how set automatic image slider of images obtained through given API.

Below is the only code i have that will only show one single image.

Please suggest what i can do in getting solved. Thanks

jQuery(function(){

loadDD();

function loadDD(date){
    var mandir="perth";
    var ddLink = "http://dd.bhujmandir.org/index.php?output=json&mandir=" + mandir;
    var qryDate = getParameterByName("date");

    var jsonLink = ddLink;

    if (qryDate)
        jsonLink = ddLink + "&date=" + qryDate;

    jQuery("#cloudDarshan").css({opacity:0.3});
    jQuery.get(jsonLink, {}, function(data){
        var jsonData = jQuery.parseJSON(data);
        var template = '<style type="text/css"> .dd-row {margin-bottom: 15px;}</style><h3 class="pull-centre"><#= curNiceDate #></h3>   <# for (var i = 3; i < images.length; i++) {var imageSrc = images[i];   #>  <# if (i != 0 && i % 5 == 0) { #>       </div>      <div class="row dd-row">    <# } #>     <div class="col-md-6"><img style="margin-top:5px; padding:2px; border: 1px solid #E4E8FF; width:100%" src="http://dd.bhujmandir.org/<#= images[i]#>"></img><class="img-thumbnail" />        </div>  <# } #></div></div></div><div class="clearfix"></div>'
        var htmlText = tmpl(template, jsonData);
        jQuery("#cloudDarshan").html(htmlText).css({opacity:1});            
    });
}

function getParameterByName(name) {
    name = name.replace(/[[]/, "\[").replace(/[]]/, "\]");
    var regex = new RegExp("[\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/+/g, " "));
}

// micro template engine
var _tmplCache = {}
var tmpl = function (str, data) {
    var err = "";
    try {
        var func = _tmplCache[str];
        if (!func) {
            var strFunc = "var p=[],print=function(){p.push.apply(p,arguments);};" +
            "with(obj){p.push('" +
            str.replace(/[rtn]/g, " ")
            .replace(/'(?=[^#]*#>)/g, "t")
            .split("'")
            .join("\'")
            .split("t")
            .join("'")
            .replace(/<#=(.+?)#>/g, "',$1,'")
            .split("<#")
            .join("');")
            .split("#>")
            .join("p.push('") +
            "');}return p.join('');";

            func = new Function("obj", strFunc);
            _tmplCache[str] = func;
        }
        return func(data);
    }
    catch (e) {
        err = e.message;
    }
    return "[ERROR: " + err + "]";
}

});

Read more here: how set automatic image slider of images obtained through given API


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: