javascript - Flexslider doesn't recognise dynamically loaded content? - Stack Overflow

I am using the SoundCloud API to load artwork into the HTML document as an ul via Javascript, using instructions I found here, then slide through a carousel of the covers (wrapped in li tags) using Flexslider. This works fine when the the list items are hard-coded into the HTML document, however, when I use the loading script to dynamically retrieve the the artwork as an img from the API and inject them into the DOM, Flexslider does not register that they are there and add the necessary styling to the lis, despite the Flexslider script being loaded after the SoundCloud script. Can anyone show me how to make Flexslider pick up on the dynamic content? Here are my files:

HTML (snippet)

<div class="page-container">
    <section id="work">
        <h3>Work</h3>
        <p>Check out my latest mixes below.</p>
        <div class="sc-stream">
            <ul class="cover-flow clearfix">
                <!-- Covers inject here -->
            </ul>
        </div>
    </section>
    <hr>
</div><!-- End page-container -->

<!-- Scripts -->
<script src="//ajax.googleapis/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="js/vendor/soundmanager2.js"></script>
<script src="js/sc-custom-player.js"></script>

<script src="js/flexslider.min.js"></script>
<script src="js/main.js"></script>

sc-custom-player.js

Same as the file found here

main.js

$(document).ready(function() {

    $('.sc-stream').flexslider({
        namespace:  "sc-",
        animation:  "slide",
        selector:   ".cover-flow > li",
        slideshow:  false,
        controlNav: false,
        minItems:   1,
        itemWidth:  224,
        itemMargin: 8
    });

});

Let me know if you need anything else. Thanks in advance.

I am using the SoundCloud API to load artwork into the HTML document as an ul via Javascript, using instructions I found here, then slide through a carousel of the covers (wrapped in li tags) using Flexslider. This works fine when the the list items are hard-coded into the HTML document, however, when I use the loading script to dynamically retrieve the the artwork as an img from the API and inject them into the DOM, Flexslider does not register that they are there and add the necessary styling to the lis, despite the Flexslider script being loaded after the SoundCloud script. Can anyone show me how to make Flexslider pick up on the dynamic content? Here are my files:

HTML (snippet)

<div class="page-container">
    <section id="work">
        <h3>Work</h3>
        <p>Check out my latest mixes below.</p>
        <div class="sc-stream">
            <ul class="cover-flow clearfix">
                <!-- Covers inject here -->
            </ul>
        </div>
    </section>
    <hr>
</div><!-- End page-container -->

<!-- Scripts -->
<script src="//ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="js/vendor/soundmanager2.js"></script>
<script src="js/sc-custom-player.js"></script>

<script src="js/flexslider.min.js"></script>
<script src="js/main.js"></script>

sc-custom-player.js

Same as the file found here

main.js

$(document).ready(function() {

    $('.sc-stream').flexslider({
        namespace:  "sc-",
        animation:  "slide",
        selector:   ".cover-flow > li",
        slideshow:  false,
        controlNav: false,
        minItems:   1,
        itemWidth:  224,
        itemMargin: 8
    });

});

Let me know if you need anything else. Thanks in advance.

• javascript
• jquery
• css
• plugins
• flexslider

Share Improve this question Follow asked Jan 1, 2013 at 12:54 JoeJJoeJ 94011 gold badge66 silver badges1818 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

It might be that you need a slight delay to allow the data to fully load first? Using setTimeout worked on my current project:

HTML

<div class="flexslider">
    <ul class="slides"></ul>
</div>

JS

$(function () {

function initGame() {
    // load xml data file (from same domain)
    // iterate xml elements and load <li>s into HTML variable

    $(HTML).appendTo('.slides');

    setTimeout(function () {
        startGame();
    }, 500);
}

function startGame() {
    $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        randomize: true,
        directionNav: false,
        touch: true,
        after: function (slider) {
            $(".flex-control-nav li").removeClass("active");
            $(".flex-active").parent().addClass("active");
        },
        itemMargin: 5
    });
}

initGame();

});

Currently you have written the flexslider code in $(document).ready function

You have to write the following code after loading the content dynamically

$('.sc-stream').flexslider({
    namespace:  "sc-",
    animation:  "slide",
    selector:   ".cover-flow > li",
    slideshow:  false,
    controlNav: false,
    minItems:   1,
    itemWidth:  224,
    itemMargin: 8
});

Here's a possible solution.

function CreateBrandsGallery() {
  $.getJSON("services/products/read.php?req=brands", function(data) {
    $.each(data.product_brand, function(i,data) {
      var box = "<li class='add-bord-left'>";
      box += "<div class='brand_carousel_box_img remove-over add-bord-radius fl_left'><a class='item_detail_box' href='products.php?req=allproducts&art="+data.brand_id+"'>";
      box += "<img src='"+data.brand_preview+"' />";
      box += "</a></div>";
      box += "</li>"
      $(box).appendTo('div.brands_gallery ul');
      setTimeout(function () { ProductSBrandsGallerySlider(); }, 500);
    });
  });   
}

And the other function:

function ProductSBrandsGallerySlider() {
  $('.brands_gallery,.products_new_gallery').flexslider({
    animation: "slide",
    animationLoop: true,
    reverse: false,
    slideshowSpeed: 7000,
    animationSpeed: 500, 
    itemWidth: 233,
    itemMargin: 0,
    minItems: 4,
    maxItems: 4,
    randomize: true,
    pauseOnHover: true,
    initDelay: 300
  });
}