Issue in loading array of images from database into jssor slider on Page show event

Question

I am working on JSSOR Slider for an array of images from database.

1. Is there any restriction that the "slides div" must have at-least 1 div inside to initialize.As I am getting this error on my iphone as I launch the app

2. Also upon page show I am getting only 1st image on slider but cannot scroll it even though I have both AutoPlay and manual scroll enable.

Till the time I was having a bunch of static images for slider it worked fine but not working for dynamic images. I am getting all the images as base64 strings and displayed them.

/*inside pageshow for a page*/
var verticaltext = "";
var allItems = Tables.images.all();
var rating = [];
allItems.list(null, function (results)
 {
 results.forEach(function (r) {
 rating.push([r.capturedDate, r.name, r.ratingTreatment, r.ratingSkinCleansing, r.ratingPlucking, r.ratingView, r.ratingLastVal, r.capturedDate]);
            });
$.each(rating, function (key, value) {
console.log("record is " + value[1]);
verticaltext = verticaltext + "<div><img  src=" + value[1] +/"></div>"
           });
console.log("HTML" +verticaltext);
$('#abc').append(verticaltext);
            verticaltext = "";
        });

Can you please provide me the source for fetching an array of images records and then on page show it should populate list of images in divs inside my slides div. I tried it and i am getting the html but my pageshow finishes before my html is formed completely

Any help would be appreciated.

Answer 1

You can populate list of images and then initialize jssor slider.

Make sure that you get slides html code populated before you initialize jssor slider.

For example,

//call the following method when the ajax call returns
function OnDataReady(data) {
    //analyze data and fill the <div u="slides' ...> element with correct html code

    //and then initialize jssor slider
    var options = {...};
    var jssor_slider1 = new $JssorSlider$(options);
}

Re 1: yes, there must be at least 1 slide to make the slider work

Re 2: there must be some error in your code.