Vertical Slider with dynamic sized images

Question

I have an infinite vertical slider with static sized images that works perfectly

Fiddle Here: http://jsfiddle.net/kTLWx/1/

However, the next slider I have to create the markup is a little different and all the images vary in height. Im trying to dynamically grab the height of the tags and move accordingly but I have not seem to find a working solution yet.

Notes
- I CANNOT change the HTML markup (its ugly I know but unfortunately I cannot change it), I cant add classes or IDS
- The image widths are all the same, only the heights change

HTML

<div class="contain">
<a href="#" id="up">Up</a>
<span>
    <span>
        <a style="height: 90px;"><img /></a>
        <a style="background-color:blue; height: 69px;"><img /></a>
        <a style="height: 45px;"><img /></a>
        <a style="background-color:blue; height: 87px;"><img /></a>
        <a style="height: 43px;"><img /></a>
        <a style="background-color:blue; height: 72px;"><img /></a>
    </span>
</span>
<a href="#" id="down">Down</a>
</div>

jQuery

$('.contain span > span a:first-of-type').before($('.contain span > span a:last-of-type'));

$('#up').click(function() {
    var a = $('.contain span > span a:first-of-type'); 
    var height = a.clientHeight;

    movement = parseInt($('.contain span > span').css('top')) + height;  

   $('.contain span > span:not(:animated)').animate({ 'top': movement }, 500, function () {
        $('.contain span > span a:first-of-type').before($('.contain span > span a:last-of-type'));
        $('.contain span > span').css({ 'top': height });
   });
});

$('#down').click(function() {
    var a = $('.contain span > span a:first-of-type'); 
    var height = a.clientHeight;

    movement = parseInt($('.contain span > span').css('top')) - height;  

   $('.contain span > span:not(:animated)').animate({ 'top': movement }, 500, function () {
        $('.contain span > span a:last-of-type').after($('.contain span > span a:first-of-type'));
        $('.contain span > span').css({ 'top': height });
   });
});

Non-working fiddle: http://jsfiddle.net/RPeLK/2/

Answer 1

Well thought I would work on it just for fun. I could not accomplish this using a span for the link container. It was behaving oddly.. The overflow:hidden does not seem to work very good on a span element. But it worked when changing it to a div.

jQuery

$('.contain span > div a:first-of-type').before($('.contain span > div a:last-of-type'));
$('.contain span > div').css('top','-'+$('.contain span > div a:first-of-type').height()+'px');

$('#up').click(function() {
    var a = $('.contain span > div a:first-of-type'); 
    var height = a.height();
    movement = parseInt($('.contain span > div').css('top')) + height;     
   $('.contain span > div:not(:animated)').animate({ 'top': movement }, 500, function () {
        $('.contain span > div a:first-of-type').before($('.contain span > div a:last-of-type'));
        height = $('.contain span > div a:first-of-type').height();
        $('.contain span > div').css({ 'top': '-'+height+'px' });
   });
});

$('#down').click(function() {
    var a = $('.contain span > div a:nth-child(2)'); 
    var height = a.height();
    movement = parseInt($('.contain span > div').css('top')) - height;  
   $('.contain span > div:not(:animated)').animate({ 'top': movement }, 500, function () {
        $('.contain span > div a:last-of-type').after($('.contain span > div a:first-of-type'));
        height = $('.contain span > div a:first-of-type').height();
        $('.contain span > div').css({ 'top': '-'+height+'px' });
   });
});

HTML

<div class="contain">
<a href="#" id="up">Up</a>
<span>
    <div>
        <a style="height: 90px;background-color:green;"><img /></a>
        <a style="background-color:blue; height: 69px;"><img /></a>
        <a style="height: 45px;background-color:green;"><img /></a>
        <a style="background-color:blue; height: 87px;"><img /></a>
        <a style="height: 43px;background-color:green;"><img /></a>
        <a style="background-color:blue; height: 72px;"><img /></a>
    </div>
</span>
<a href="#" id="down">Down</a>
</div>

CSS

.contain span { 
    display: block;height: 150px; border: 1px solid #d8d8d8; width: 50px; 
    margin: 0 auto; overflow: hidden; position: relative;
}
.contain span > div { 
    list-style: none; margin: 0; padding: 0; position: relative; border:none; 
    /*top: -?px; Needs to be dynamic based on first img*/
}
.contain span > div a { width: 100%;}

a { display: block; width: 50px; margin: 0 auto; }

Example

http://jsfiddle.net/RPeLK/4/