Loading all images before triggering JQuery Slideshow

css, jquery, ruby-on-rails

Solution

Regarding #2: I think youve made this too complex. You don't have to check on the individual `img` assets like you're doing; you really just want to know when the entire gallery has loaded, so make your life simple:

  $('#gallerycontainer').load(function(){
      $('#gallery').unslider();
    }
  });

Your might want to add the HTML into your question so people know how to target the jQuery:

<div id="gallerycontainer">
  <div id="gallery">
    <div id="slidecontainer">
      <div class="slide">
        <a href="#"><img /></a>
      </div>
    </div>
  </div>
</div>

Problem

I've modified Visual Idiot's Unslider (http://unslider.com/) to accommodate multiple-width slides based on image proportions, but in the process, I've encountered a bug which causes slides to load as tiny thumbnails (I think in the case where the images haven't loaded all the way). That's problem #1. So I'm trying to wait until all images are loaded. But I haven't found a way to do that successfully. That's problem #2. Here is my added code inside the Unslider init() function: ``` _.init = function(el, o) { // Check whether we're passing any options in to Unslider _.o = $.extend(_.o, o); _.el = el; _.ul = el.find(_.o.items); _.max = [el.outerWidth() | 0, el.outerHeight() | 0]; _.max = [100, 100]; _.li = _.ul.find(_.o.item).each(function(index) { var me = $(this); var an_image = me.find('img'); an_image.load(function() { width = an_image[0].naturalWidth, height = an_image[0].naturalHeight; setSlideHeight(an_image, width, height, 300, 20); if ( an_image.parent().parent().is(":last-child") ) { _.el.css("width", 900); } }) // Set the max values //if (width > _.max[0]) _.max[0] = width; //if (height > _.max[1]) _.max[1] = height; }); ``` And here is my Ruby partial with a script inline for triggering Unslider when all the images are loaded. ``` <% if @page.cap_gallery_images.any? %> <script> $(document).ready(function() { var numLoaded = 0; var numToLoad = $('#gallery img').length; alert("To Load: " + numToLoad); $('#gallery img').load(function(){ numLoaded += 1; alert("Loaded: " + numLoaded); if (numLoaded == numToLoad) { var gallery = $('#gallery').unslider(), data = gallery.data('unslider'); data.to(0); } }); $("#slidecontainer .slide a").click(function(e) { destination = $(this).parent().index(); data.to(destination); e.preventDefault; }); $(window).scroll(function() { checkGalleryAgainstLogo(); }); $(window).resize(function() { checkGalleryAgainstLogo(); }); checkGalleryAgainstLogo(); $('#logo.small').addClass('white'); }); </script> <% end %> ``` The issue is that it looks like the image loading handlers aren't all triggering. Look at it in context on the page I'm using it on: http://penumbra-2.herokuapp.com/education

Original source

Related problems