How to add top-margin for an image in a slider

Question

Hello guys I have the following div format for an image slider

<div class="callbacks_container">
<ul id="slider1" class="rslides"> 
<li id="transparent-btns1_s0" class="fluidratio transparent-btns1_on" style="display: block; float: left; position: relative; opacity: 1; z-index: 2; transition: opacity 500ms ease-in-out 0s;">
<div id="bg">
<img class="thumb" >
</div>
</li></ul</div>

and I have following css for above

.callbacks_container {
    float: left;
    position: relative;
    width: 100%;
}

.rslides {
    list-style: none outside none;
    margin: auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100%;
}

and the JQuery script is like this

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script defer src="http://wstation.inmomundo.com/static01/scripts/responsiveslides.min.js"></script>
<script>

$(window).load(function() {

var h = $('.rslides ').find('img').outerHeight(true);
if( h<290)
{
  var m = 290-h;
      m = m/2;
$('.thumb').css('margin-top', +m + "px");
}
$("#slider1").responsiveSlides({

        auto: false,
        pager: true,
        nav: true,
        speed: 500,
        maxwidth: 540,
        namespace: "transparent-btns"
      });
      });

</script>

My problem is that I have added script to check the height of the image and then add top margin accordingly . this workss only for the first image of the slider I mea when the page loads it will work but after that for all the next images it remains same . What should I do to work similarly for all the images in the slider .

Thanks

Answer 1

First thing: you have an error with your markup, the UL closing tag is malformed.

You need to iterate over each thumb and individually work out the height and the difference like this:

$(window).load(function() {

    var images = $('.rslides ').find('img');

    images.each(function(){ // jQuery each loops over a jQuery obj

        var h = $(this).outerHeight(true); // $(this) is the current image
        if( h<290)
        {
          var m = 290-h;
              m = m/2;
          $(this).css('margin-top', +m + "px");
        }

    });

    $("#slider1").responsiveSlides({

            auto: false,
            pager: true,
            nav: true,
            speed: 500,
            maxwidth: 540,
            namespace: "transparent-btns"
    });
});

Here's a JSFiddle, notice how each image now has a margin at the top:

http://jsfiddle.net/chrissp26/9JLxE/