Image Slideshow widget with AJAX and responsiveSlides.JS not loading (noConflict issue?)

306 Views Asked by At

I'm building a simple slideshow widget for my library that displays book covers of new titles. I'm using Jquery AJAX to call an API I built in Codeigniter, and then load responsiveSlides plugin to format the slideshow. The goal is for other librarians to paste this on different websites.

Could this be a no conflict issue? Since I'm using multiple plugins?

However, I'm having issues hooking in the slideshow. I'm not getting any console errors, but the the slideshow is not working.

<div class="rslides result"></div>

<script type="text/javascript">
    jQuery(document).ready(function(){
    //load the jquery and css from responsiveSlides
    jQuery('footer').append('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js">');             
    jQuery('head').append('<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.css">');

    //start AJAX call
    jQuery.ajax({
    async : true,
    crossDomain : true,
    //query the API
    url : "https://library-kit-gortiz022.c9users.io/api/featuredslideshow/1",
    method : "GET",
    dataType : 'json',
    headers : {
        "x-api-key": "123456",
        "cache-control": "no-cache"
    },

    success : function(response){
        var slider;
        //grab the response message
        var records = response.message;
        console.log(records);

        //iterate through the response and format image in slider
        for(var i = 0; i < records.length; i++){
            var record = records[i];
            slider += "<img src=\"" + record.listitem_img + "\" alt=\"\" " +  "title=\"" + record.listitem_title + "\" />";
        }
            //console.log(slider);
            jQuery('.result').append(slider);
        }//end of success

    });//end of ajax request

});//end of documnet.ready

(function(jQuery) {
    jQuery.noConflict();
    jQuery(".rslides").responsiveSlides();
});

Thank you so much for your help!

0

There are 0 best solutions below