2

Re-sizing images and running jquery cycle plugin (http://www.jquery.malsup.com/cycle/). I am also using a preloader plugin.

THE GOAL

The goal is to take a number of images (sourced from the cms database), re-size either height or width of each, (depending on its aspect ratio compared to the container's aspect ratio) so that it fits within the container, center it in the container and then run a slideshow (project images).

THE ISSUE

The cycle slideshow runs before the images have loaded (the images are way too big so it can cycle through 3 slides before images show). Wanting it to wait until the iamges have loaded, displaying a gif while it loads.

Here's the html and jquery code im running to preload, re-size and run the cycle slideshow:

<div id="slideshow" class="single_project_images pics">
    <img src="/components/com_sedarticles/assets/1333588925" />
    <img src="/components/com_sedarticles/assets/1333852906" />
    <img src="/components/com_sedarticles/assets/1333852914" />
 </div>

the script:

$(document).ready(function() {
    $(".single_project_images img").each(function(){
        $(this).imagesLoaded(function(){
            var w = $(this).width();
            var h = $(this).height();
            if( (w/h) < 0.85){
                $(this).height("541px");
                $(this).css("margin-left", parseInt((460 - $(this).width())/2)+"px");
            }else{
                $(this).width("460px");
                $(this).css("margin-top", parseInt((541 - $(this).height())/2)+"px");
            }
        }); 
});

    $('#slideshow').cycle({
        speed:  1000,
        timeout: 5000,  
        pager:  '#nav'
    }); 
});
Dean_Wilson
  • 190
  • 13

1 Answers1

0

The reason images 2 & 3 aren't showing up is because the margin-top is set to 1000px in the css and it's not being adjusted because those two images don't meet the if condition in your js.

In order to keep the slideshow from starting before images are loaded you'll need to keep track of how many have loaded and call cycle once they're all done.

something like this:

var totalimages = 6, imagesloaded = 0;

$('img').each(function() {

    this.onload = function() {
       imagesloaded++;
       if(imagesloaded === totalimages){
           //call cycle plugin
       }
    }

});
brains911
  • 1,310
  • 7
  • 5