Jssor dynamic thumbnail not working

Question

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?

Answer 1

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.