Question

There is a nifty flash banner located here: http://osc4.template-help.com/drupal_30779/. I was wondering if there is a jquery library out there that allows me to achieve the same effect. (click, slide,expand). Thanks in advance

Answer 1

I wrote you a little answer that is a good start. The working code is at http://jsfiddle.net/fxBjw/ here it is in pieces

HTML

<div id="container">
    <ul>
        <li class="block" id="a"></li>
        <li class="block" id="b"></li>
        <li class="block" id="c"></li>
        <li class="block" id="d"></li>
        <li class="block" id="e"></li>
    </ul>
</div>

CSS

#container {
    height: 100px;
    width: 245px;
    border: #000 1px solid;
    overflow: hidden;
}
/*I am not great with css so the only thing i think you could do better is the positioning.
Maybe style everything in JS and use position absolute
there also may be a better way to handle the overflow but this is a good jq start*/
.block {
    width: 45px;
    height: 100px;
    display: inline-block;
    margin: 0px;
    position: relative;
    background-repeat: no-repeat;
}

#a {
    background: url(http://rndimg.com/ImageStore/OilPaintingOrange/50x100_OilPaintingOrange_d190c94ef0c845399e2849fd7e9d54de.jpg);}
#b {
    background: url(http://rndimg.com/ImageStore/OilPaintingBlue/50x100_OilPaintingBlue_44398b9cfff447938d5b02c56e275611.jpg);}
#c {
background: url(http://rndimg.com/ImageStore/OilPaintingGreenReal/50x100_OilPaintingGreenReal_d3284c223f484ad584d4cc6d9de29ba5.jpg);
}
#d {background: url(http://rndimg.com/ImageStore/OilPaintingGreen/50x100_OilPaintingGreen_03938e7dbfa74b0f861d9a0851a34455.jpg); }
#e {background: url(http://rndimg.com/ImageStore/OilPaintingBlueReal/50x100_OilPaintingBlueReal_d2e4856d7e4e4224b42ced5cf6675132.jpg); }

JS

//This creates the click function in jquery
$('#container li').click(function (event) {
    //Create a var for the index of the LI
    var ind = $(this).index();
    //Move the LI right to the edge I am not good with stying so there is probably a better way to do this also in the CSS
    //The set up is you move it to the right * the number of elements it is in the list
    $(this).animate({
       'right': ind*50+'px'
    });
    //Now for all the other list items
    $('#container li').each(function () {
        //Check if the items are after the one clicked if so move them off to the right
    if ($(this).index() > ind) {
             $(this).animate({ 'left': '200px'});
        //if they are smaller mover them to the left
    } else if ($(this).index() < ind ){
        $(this).animate({ 'right': '200px'});
    }});
});

I did not add a reset button just click run again the return animate should be pretty straight forward.

PS. Thanks for giving me an excuse not to do my HW