Best way to attach a callback with a window resize function

Question

I'm attempting to create jQuery Cycle slideshow where images of different sizes are vertically and horizontally centered, and also re-size to whatever the window size is. Some of it is straight css but I need to dynamically adjust 'top', 'left', 'margin-top', and 'margin-left' on each image before fading in the first image of the slideshow.

Thus I believe need to create a callback where the dimensions and margins are set before the images appear. Can't figure out the best way of doing this.

CSS is simple. Essentially:

#gallery img {
 max-height: 100%;
 position:absolute;
 display:none;
 }

And a rough cut of the .js would be:

$(window).bind("load resize", function() {
      $('#gallery img').each(function(i) {
        var ih = $(this).height();
        var iw = $(this).width();
        var fh = Math.ceil(ih / 2);
        var fw = Math.ceil(iw / 2);
        $(this).css({
          'top' : '50%',
          'left' : '50%',
          'margin-top' : '-' + fh + 'px',
          'margin-left' : '-' + fw + 'px'
        });
      },function() {
      $('#gallery img:first').fadeIn(3000, function() {
      $('#gallery').cycle();
   });

However I'm not seeing the expected result. The fadeIn of the first img triggers before the calculations and positioning occurs.

Thinking that 'display:none' might confuse things (maybe nothing is calculated until it's 'display:block', I've tried using:

#gallery img:first-child {
  display:block;
  opacity:0;
  }

..And then animating to full opacity instead of the fadeIn--but the result is the same.

What am I doing wrong??

The each method you are using doesn't have a callback function. See http://api.jquery.com/each/ The one that does is http://api.jquery.com/jQuery.each/ This may help. — awatts, Nov 06 '11 at 00:44
how does "margin: auto;" differ from what you are trying to accomplish? — buster, Nov 06 '11 at 00:59
Thanks for the info. I'm still having issues with the syntax, as I'm also trying to bind window load and resize as well .. but assume I'll stumble upon it eventually. (Documentation for jQuery.each appears slim..) ('margin: auto' doesn't work on absolutely positioned elements) — SWW, Nov 06 '11 at 19:39
can u make an example on jsbin ive done this lots and lots before but would be good to work off a real example — Alex, Nov 12 '11 at 19:22
I've got a real example up at http://dev.schippertmartin.com - seems to be working although likely not as elegantly as could be.. — SWW, Nov 12 '11 at 20:55
(Unrelated, the pause button is not functioning as expected: it simply restarts the slide show.) — SWW, Nov 12 '11 at 21:03
Unrelated, you can actually center the image (with margin:auto) by putting the img in a div, and set the div to be absolute positioned instead :) — Yman, Nov 22 '11 at 18:43
Not is this case I can't: JQuery cycle adds absolute positioning to images. — SWW, Nov 28 '11 at 18:52

score 0 · Answer 1 · answered Dec 04 '11 at 15:09

I'm not entirely sure what your code is trying to do, but I wager the problem might be more in the event and looping logic. Your code reads as if you were trying to reinitiate the showing of the first image after resizing, not sure if I misunderstood your intent here.

Maybe splitting up the resize and the gallery cycle logic like this might help and keep the code clearer; this would resize the images on resize, and start the gallery on load:

$(document).ready( function() {

function resizeThem() {
     $('#gallery img').each(function(i) {
        var ih = $(this).height();
        var iw = $(this).width();
        var fh = Math.ceil(ih / 2);
        var fw = Math.ceil(iw / 2);
        $(this).css({
          'top' : '50%',
          'left' : '50%',
          'margin-top' : '-' + fh + 'px',
          'margin-left' : '-' + fw + 'px'
        });
      });
}

$(window).bind("resize", resizeThem);

$(document).bind("load", function () {
    resizeThem();
      $('#gallery img:first').fadeIn(3000, function() {
         $('#gallery').cycle();
      });   
});

});

Note how the resize event behaves differently across browsers. Also, it seems exessive to resize all images. How about resizing the image on display and then in turn, always resize images when they being shown according to the browser size then.

Thanks kontur - What I'm trying to do is: load the images and have them horizontally and vertically center before the cycle slideshow begins. This would account for varying sizes of images. The resizing itself is done with the CSS only, although I'd want the centering to follow along dynamically. — SWW, Dec 05 '11 at 18:25

Best way to attach a callback with a window resize function

1 Answers1