Question

I had a developer make a slideshow based off of a 960px layout design. Now, I am creating a responsive design. I have been having a very hard time fixing the slideshow load function. The content below the slideshow will slide-up and then slide-down when you click for the next img. It works great when the images are cached.

I have tried so many things, but my jQuery knowledge is a bit lacking. Does anyone have a suggestion? You can find the code and script at the following assembla link:
https://www.assembla.com/code/cfrepo/subversion/node/blob/trunk/index.html#image=JohnMerriam

http://jsfiddle.net/doobada/HDyyk/

I have tried to set the #real_display li height to equal the preloaded image, but I can’t get that figured out. I have also tried to set the #real_display li height to equal the current image, then hide the li and then set the #real_display li height to auto after the image has been loaded.

JS:

$('#real_display li:visible').hide(0); 

var customURL = window.location.href;

$('#info_box').remove();

$('#real_display').append('<div id="info_box"><ul id="social_buttons_box"></ul>'+
                                '<p>'+curr_obj["img_caption"]+'&nbsp;'+
                                '<a href="'+curr_obj["img_href"]+'">'+curr_obj["img_author"]+'</a></p></div>');

$('#social_buttons_box').hide();

setTimeout(function(){$('#social_buttons_box').fadeIn(500);}, 0);

var curr_dom_obj_li = $('#rimg_id_'+img_num);
var curr_dom_obj = curr_dom_obj_li.find('img');

if(curr_dom_obj.attr("src") == ""){
    curr_dom_obj.attr("src", curr_dom_obj.attr("link"));
}

curr_dom_obj_li.fadeIn(500);

I’m stuck and have searched everywhere for an answer.

Answer 1

Rather than trying to determine the size of the next image and dynamically changing the height, you probably just want to preload the images with JQuery. This would give you the effect that you get once the images have been loaded that you mentioned you’re happy with.

Preloading images with JQuery is explained here.