0

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!

Gabriel Ortiz
  • 13
  • 4
  • Is the dynamic addition of the script and link tags truly needed? I'm betting that this at least a contributing factor to your issue. You're including `responsiveSlides.min.js` in the document ready, but you're calling `jQuery(".rslides").responsiveSlides();` in the IIFE which *should* execute first before the js file is downloaded. – Steve Oct 12 '16 at 01:29
  • Also, if the goal is to allow other librarians to paste this on other Web sites, you'll need to enable CORS on that API (which it is not currently) or change this code to use a JSONP request. – Steve Oct 12 '16 at 02:06
  • Thanks so much @scarabaeus Which order would you recommend with loading the scripts and the plugin hook? I'm using a CDN for the required responsiveSlider files so it will be easier to load when on a different webpage. Is it necessary for me to use document.ready at all? Oh and yes, you are correct about the CORS.. thanks for mentioning that.. – Gabriel Ortiz Oct 12 '16 at 02:18

0 Answers0