Thumbnail image size for JSSOR (jQuery Plugin)

Question

I am using the jQuery image slider plugin from http://www.jssor.com/. Right now, the plugin require a width and height for the thumbnails in the slider.

I wonder can I set the thumbnail image size for each image differently, because I have image with different size, a fixed width and height will change the image ratio.

<div u="slides" style="cursor: move;">
            <div u="prototype" class="p" style="POSITION: absolute; WIDTH: 100px; HEIGHT: 50px; TOP: 0; LEFT: 0;">
                <div class="o" style="position:absolute;top:1px;left:1px;width:100px;height:50px;overflow:hidden;">
                    <ThumbnailTemplate class="b" style="width:100px;height:50px; border: none;position:absolute; TOP: 0; LEFT: 0;"></ThumbnailTemplate>
                    <div class="i"></div>
                    <ThumbnailTemplate class="f" style="width:100px;height:50px;border: none;position:absolute; TOP: 0; LEFT: 0;"></ThumbnailTemplate>
                </div>
            </div>
</div>

score 2 · Answer 1 · answered Mar 20 '14 at 03:50

Please replace

<div>
    <img u="image" src="../img/alila/01.jpg" />
    <img u="thumb" src="../img/alila/thumb-01.jpg" />
</div>

with

<div>
    <img u="image" src="../img/alila/01.jpg" />
    <div u="thumb">
        <div style="width: 100%; height: 100%; background-image: url(../img/alila/thumb-01.jpg); background-position: center center; background-repeat: no-repeat; ">
        </div>
    </div>
</div>

score 0 · Answer 2 · answered Jun 17 '16 at 03:41

Add background-size: cover; or background-size: contain; in the style of third div based on jssor's answer can change the ratio. which means:

<div>
 <img u="image" src="../img/alila/01.jpg" />
 <div u="thumb">
    <div style="width: 100%; height: 100%; background-image: url(../img/alila/thumb-01.jpg); background-position: center center; background-repeat: no-repeat; ">
 </div>
</div>

Thumbnail image size for JSSOR (jQuery Plugin)

2 Answers2