Jssor动态缩略图不工作 [英] Jssor dynamic thumbnail not working

问题描述

我正在尝试制作一个基于instagram饲料的jssor画廊。到目前为止，图像是成功的，但不是缩略图。

  var img ='< img u =imagesrc = '+ thisMedia.images.standard_resolution.url +'alt =Instagram Imagedata-filter ='+ thisMedia.filter +'width =720height =480/>'; 
 var thumb ='< img u =thumbsrc ='+ thisMedia.images.standard_resolution.url +'width =99height =66/>'; 
 
 $（'＃slide  - '+ i +''）。html（img）; 
 $（'＃slide  - '+ i +''）。append（thumb）; 
  

这种情况发生在instafeed文件中，到目前为止，img在库中很好，但不是拇指。我也试图把拇指代码放在同一行的img变量。

当我在浏览器中打开它并检查发生了什么，我看到图像和缩略图被正确放入所需的幻灯片。所有的缩略图应该由jssor代码照顾，他们只是坐在那里，我基本上复制了演示版本的代码。任何想法发生了什么？

解决方案

在原始HTML中，幻灯片的缩略图以以下格式定义。

 < div> 
< img u =imagesrc =../ img / alila / 01.jpg/> 
< img u =thumbsrc =../ img / alila / thumb-01.jpg/> 
< / div> 
  

当jssor滑块初始化时，它会隐藏幻灯片中的缩略图，并将克隆复制到缩略图导航器。实际上，缩略图浏览器是一种滑块。

您可以检查元素来查看它的排列方式。如果需要更换缩略图，请在缩略图浏览器中操作元素。

I am trying to make a jssor gallery based of instagram feed. So far the images are succeeding, but not the thumbnails.

var img = '<img u="image" src="'+thisMedia.images.standard_resolution.url+'" alt="Instagram Image" data-filter="'+thisMedia.filter+'" width="720" height="480" />';
var thumb = '<img u="thumb" src="'+thisMedia.images.standard_resolution.url+'" width="99" height="66"/>';

$('#slide-'+i+'').html(img);
$('#slide-'+i+'').append(thumb);

This happens in the instafeed file and so far the img goes well in the gallery but not the thumb. Ive also tried to put the thumb code in the same line for the img variable.

When I open it in the browser and check what is happening i see the images and thumbnails correctly being put in the desired div slides. Allthough the thumbnails should be taken care of by the jssor code they just sit there, I basically copied the code of the demo version. Any idea what is happening?

解决方案

In the raw html, thumbnail for a slide is defined in following format.

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

When jssor slider initializes, it hide the thumbnail in the slide and copy a clone to thumbnail navigator. Actually, thumbnail navigator is a kind of slider.

You can inspect element to see how it arranges. If you need to replace thumbnails, please operate elements in thumbnail navigator.

这篇关于Jssor动态缩略图不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！