2

new to the community.

I have a slideshow on one of my pages. The images vary in height so I've written this:

$(document).ready(function(){
    $('.pslider img:first').load(function(){        
    var firstImg = $('.pslider img:eq(0)').height();    
    $('.pslider').css({"height":firstImg});
});

//other code
});

As far as I can tell this means that jquery will wait until the first img element withing my .pslider is loaded. Then it will get the img height and set the .pslider height to the value. I used serialscroll to manage the change of class height using its onbefore option. it works perfectly.

This works on a normal click to the page. But if I click on the page, then go to another, then press the back button, it doesn't execute. Doesn't get a value for the height.

I've tried window.onload(){} but the same thing happens.

I'm using 1.6.2

Any ideas?

user1050965
  • 21
  • 1
  • 1
    Good question - see this SO where user accounts for cached images in this case. http://stackoverflow.com/questions/7587714/image-does-not-have-width-at-document-ready/7587748#7587748 – mrtsherman Nov 17 '11 at 04:10
  • Try using a server side language to append ?seed=RANDOMNUMBER to the end of the image path with each load of the page so that it doesn't cache the image? – John Kurlak Nov 17 '11 at 04:11
  • thanks guys. Found the answer in that thread you linked @mrtsherman. It was window.load instead of window.onload. I'm new to js but whatever it did, it worked. – user1050965 Nov 17 '11 at 04:37
  • @user1050965 You should post the solution as an answer to this question. :) – neezer Nov 18 '11 at 17:15

1 Answers1

0

I had the same issue and had to use the this variable inside the load function.

    var firstImg = this.height;

You might also have to update your selector.

msantoro12
  • 126
  • 4