JQuery iTunes Like Slide Show Gallery

January 17th, 2011 by aditia rahman / 1 Comment  

     

Today post is my other post with jquery, so how you do you have in mind about iTunes gallery? well this capture image are in my mind

This example is not really the same like iTunes gallery like in the image above, but at least the basic behavior almost the same, in previously post I have played with JQuery UI Slider and Rotate3Di plugin, in thisĀ  post that plugins are used again, and actually I modified the jQuery UI slider scroll pane example.

View Demo | Download Source

I’m using 20 items inside the scroll pane but to simplify the code, I just show only 4 items. Here the html code look a like

<div class="scroll-pane">
    <div id="slider"></div>
	<div class="scroll-content">
                <div class="scroll-content-item first">1</div>
		<div class="scroll-content-item">2</div>
		<div class="scroll-content-item">3</div>
		<div class="scroll-content-item">4</div>
	</div>
</div>

There is a difference between the first items and the other, this is because the first item will default showed item in the middle of the scroll pane, and the default rotate angel will be different too, as defined in the below jquery code

$(function() {
    //scrollpane parts
    var scrollPane = $(".scroll-pane"),
        scrollContent = $(".scroll-content");

    var max = $(".scroll-content div").length;
    $("#slider").slider({
        value: 1,
        min: 1,
        max: max,
        step: 1,
        slide: function( event, ui ) {
            moveItems(ui.value)
        }
    });

    $(".scroll-content-item").click(function() {
        var val = parseInt($(this).attr("id").replace("d", ""));
        moveItems(val)
        $("#slider").slider({
            value: val
        });
    });

    function moveItems(index) {
        var total = $(".scroll-content").children().length;
        var box_width = scrollContent.width() / 20;
        $("#midpane").val(box_width*index);
        var mleftnew = -1 * (box_width*index);
        scrollContent.css( "margin-left", mleftnew+"px" );

        // rotate item before current item
        for (i=1; i<index; i++) {
            $("#d"+i).rotate3Di(135, 300);
        }

        // rotate item after current items
        for (z=index+1; z<=max; z++) {
            $("#d"+z).rotate3Di(45, 300);
        }

        $("#d"+index).rotate3Di(0, 300);
    }

    // giving id to each element
    var i = 0;
    var scrollcontent = $(".scroll-content").children().each(function() {
        i++;
        $(this).attr("id", "d"+i);
    });

    // default all items angle
    $(".scroll-content-item").rotate3Di(45);

    // default showed item
    $(".first").rotate3Di(0);
});

The event handler is when user slide the slider and when click one of the item, the current items will be rotate to “0″, and to make the selected item still in the middle just playing with the div left margin, and last is the CSS code

body {
    padding-top: 50px;
}
.scroll-pane {
    overflow: hidden;
    width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background: #d3d3d3;
    border:1px solid #999;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
}
.scroll-content {
    width: 2440px;
    padding: 50px 550px;
    float:left;
}
.scroll-content-item {
    width: 100px;
    text-shadow: 0 2px 2px rgba(0,0,0,.3);
    background: url('img/img.jpg');
    border:1px solid #999;
    height: 100px;
    float: left;
    margin: 10px;
    font-size: 4em;
    line-height: 96px;
    color: #999;
    text-align: center;
    cursor: pointer;
    display: inline;
}

Here is the result, well yes really not perfect, but at least I can have gallery like in iTunes.

View Demo | Download Source
        submit to reddit Delicious

One Comment Leave a Comment Subscribe RSS

Leave a Comment