مشکل در نمایش تصاویر در جوم شاپینگ

[ابوذر مرادی]

دوست عزیز قالب وب سایت شما کاملا واکنش گرا (ریسپانسیو) هست نباید همچین اندازه هایی رو قرار داد!
توی کد های زیر از % استفاده شده و کاملا ریسپانسیو هست!!
خب برای حل این مشکل
به مسیر زیر بروید

کد: (انتخاب همه)

.../components/com-jshopping/css

فایل jquery.lightbox.css را باز کرده و آی دی زیر را جستجو کنید (خط 36)

کد: (انتخاب همه)

#lightbox-container-image-data-box

خصوصیات فعلی این آی دی به صورت زیر است :

کد: (انتخاب همه)

#lightbox-container-image-box {
    position: relative;
    background-color: #fff;
    width: 250px;
    height: 250px;
    margin: 0 auto;
}

این قسمت را با کد زیر جایگزین کنید

کد: (انتخاب همه)

#lightbox-container-image-box {
    position: relative;
    background-color: #fff;
    width:100% !important;
    max-width: 500px;
    margin: 0 auto;
}

خب برای اینکه قسمت پایین عکس داخل اسلایدشو با کادر عکس مساوی بشه توی همین فایل آی دی زیر را جستجو کنید (خط 77)

کد: (انتخاب همه)

#lightbox-container-image-data-box

خصوصیات فعلی این آی دی به صورت زیر است :

کد: (انتخاب همه)

#lightbox-container-image-data-box {
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: #fff;
    margin: 0 auto;
    line-height: 1.4em;
    overflow: auto;
    width: 100%;
    padding: 0 10px 0;
}

این قسمت را با کد زیر جایگزین کنید

کد: (انتخاب همه)

#lightbox-container-image-data-box {
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: #fff;
    margin: 0 auto;
    line-height: 1.4em;
    overflow: auto;
    width: 100% !important;
    max-width: 480px;
    padding: 0 10px 0;
}

دوست عزیز توی قسمت اول بیشترین عرض برای تصویر 500 پیکسل و توی قسمت دوم که همون کادر پایین عکس هست عرض رو 480 پیکسل تنظیم کردم. (480 بخاطر اینه که اون کادر از 2 طرف به اندازه 20 پیکسل گرفته شده {padding: 0 10px 0;} )
میتونید اندازه دلخواهتون رو بهش بدید ولی پیشنهاد میشه بیشتر از 600 پیکسل نباشه....!

موفق باشید