0

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.

doobada
  • 29
  • 7

1 Answers1

0

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.

Community
  • 1
  • 1
Peter Oram
  • 6,213
  • 2
  • 27
  • 40
  • Thanks for your response, Peter. The script has a preloader right now... So, it may not be functioning properly or preloading in the right spot...? I want it to load the next image, not all images (there will be many, many images added later on). I'll continue to play with this, thanks! – doobada Nov 01 '12 at 13:05
  • Sure - depending on how many images there are, it may be more workable for you to preload the next image when their on the one prior to it. In other words the first and second load together. When you go to the second it also loads the third, when you go to the third it loads the fourth, etc. That way you don't have a long loading lag, but always have your images preloaded. – Peter Oram Nov 01 '12 at 21:04