CODEWITHSUNDEEP
javascriptcssimagejssor
faraz azhar
faraz azhar

Reputation: 31

Add captions and slides dynamically in jssor and show full size image in overlay by onclick

I am using the simple jssor slideshow with thumbnails.

In my page I am getting image captions and urls in a javascript array on page load. To use in jssor I gave the images and thumbnails an id and added src to each of them in javascript as follows:

document.getElementById("image1").src = "img/photography/002.jpg";
document.getElementById("thumb1").src = "img/photography/thumb-002.jpg";

On doing this the slides do load correctly in the correct areas but the green loading sign of slideshow remains active and the slides appear to be in the background. However when I give the urls directly in the img tags and not through javascript file it loads correctly without showing the green loading image. Please provide a solution to this issue.

Furthermore If my slides are less than ten how to remove the extra thumbnail images borders from appearing and how to add more image and thumbnail elements dynamically in jssor using javascript if number of images exceeds that number.

Secondly how to similarly add captions in the jssor slideshow using javascript. Also I need javascript and css code for jssor to display image full size in an overlay on click.

Since I am not using the jQuery version but javascript I would like the solutions in javascript.

Upvotes: 3

Views: 2141

Answers (1)

jssor
jssor

Reputation: 6985

Re: loading issue. Please assign image src before initialization of jssor slider. See

document.getElementById("image1").src = "img/photography/002.jpg";
document.getElementById("thumb1").src = "img/photography/thumb-002.jpg";
var jssor_slider1 = new $JssorSlider$(...;

Re: dynamically remove/add slide Please add new slide element to 'slides' container or remove unused slide from 'slides' container.

Re: add captions to slide document.getElementById("slide0").appendChild(...

Re: display image full size in overlay

        function DisplayFullSizeImage(slideIndex) {
            //do something to display full size image
        }

        jssor_slider1.$On($JssorSlider$.$EVT_CLICK, DisplayFullSizeImage);

Btw, there is a better way to populate html code for your slider dynamically.

Reference:

Jssor - how to add slides dynamically?

Jssor for jssor slider user is it possible to make a jssor slider with dynamic images

Upvotes: 1

Related Questions