Question

我想在URL上的lightslider中设置缩略图图像的高度和宽度：

http://agentpet.com/ver1/index.php/user/get_pet_details/84

以下是我目前的代码：

$('#imageGallery').lightSlider({
        gallery:true,
        item:1,
        loop:true,
        thumbItem:9,

        slideMargin:0,
        enableDrag: false,
        currentPagerPosition:'left',
        onSliderLoad: function(el) {
            el.lightGallery({

                selector: '#imageGallery .lslide'
            });

        }   
    });

请帮助我如何将高度和宽度设置为出现在大图像下的缩略图？

Answer 1

简单：在lightslider.css中查找.lSSlideOuter .lSPager.lSGallery img{}

它可能位于第140行，可能只在img下设置height 50px;和widht:100%;

那就是!!无论你的图像的宽高比是什么，它都会在灯光中设置缩略图的大小!!

Answer 2

如果你想增加宽度，你必须减少thumbItem值，b / c插件根据thumbItem计数设置宽度。

Answer 3

像Aniket Nagapure一样，你不能改变lightslider.css但是如果你不想让图像变形，可以在lightslider.css寻找.lSSlideOuter .lSPager.lSGallery li{}并添加height: 50px;然后，在.lSSlideOuter .lSPager.lSGallery img{}添加width: 100%;和overflow: hidden;

Answer 4

verticalHeight和vThumbWidth在我们将vertical属性设置为true时起作用，在我的情况下它是false，因此这两个属性适用于宽度和高度。另外，我尝试了Jquery选项（$（“。lSGallery li”）。css（“width”，100 +“px”）。css（“height”，100 +“px”））以及CSS选项（ul。 lSGallery li img {max-height：50px; max-width：100px;}）。他们都没有工作。

Answer 5

LightSlider可以选择设置名为verticalHeight和vThumbWidth的宽度和高度缩略图。如果这些不是您需要的，那么您可以使用jquery

手动设置宽度和高度

$(".lSGallery li").css("width", 100 + "px").css("height", 100 + "px")

如何使用lightSlider设置缩略图的宽度和高度

5 个答案: