Wednesday, June 8, 2011

Create a unique Gallery by using z-index and jQuery, Image Rotator in Jquery, Jquery Tutorial for Image Rotaor amd gallery

Here I am posting a unique image rotator gallery created in Jquery having effect of Sliding the image to background with shuffling effect.

Please read the tutorial carefully to use Image Rotator and gallery.

HTML Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

<html xmlns="" xml:lang="en" lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Demo for - 'Create a unique Gallery by using z-index and jQuery'</title>
    <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/960.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
        <!-- relevant for the tutorial - start -->
        <div class="grid_6 prefix_1 suffix_1" id="gallery">
          <div id="pictures">
            <img src="images/picture1.png" alt="" />
            <img src="images/picture2.png" alt="" />
<img src="images/picture3.png" alt="" />
            <img src="images/picture4.png" alt="" />
            <img src="images/picture5.png" alt="" />
          <div class="grid_3 alpha" id="prev">
            <a href="#previous">&laquo; Previous Picture</a>
          <div class="grid_3 omega" id="next">
<a href="#next">Next Picture &raquo;</a>
        <!-- relevant for the tutorial - end -->

CSS Source Code
 /* Main Style Sheet start here */
html { font-size: 16px; min-height: 100%; margin-bottom: 1px; }
body { font-size: 62.5%; font-family: Verdana, Arial, sans-serif; color: #555555; background: #22384d url(../images/bg.jpg) repeat-x; }
a { color: #0F67A1; text-decoration: none; }
a:hover { text-decoration: underline; }

#wrapper { background: white url(../images/sidebar_bg.jpg) repeat-y top right; }

#content { }
  #content h1 { font-size: 2.4em; font-weight: normal; line-height: 32px; margin: 30px 0 50px 0; }
  #content p { font-size: 1.4em; line-height: 22px; margin-bottom: 20px; }
  /* relevant for the tutorial - start */
  #gallery { position: relative; }
    #pictures { position: relative; height: 408px; }
    #pictures img { position: absolute; top: 0; left: 0; }
    #prev, #next { margin-top: 30px; text-align: center; font-size: 2.0em; }
  /* relevant for the tutorial - end */
#footer { text-align: center; margin: 50px 0 20px 0; }

#sidebar { }
  #sidebar ul { margin-top: 20px; }
  #sidebar ul li { font-size: 1.2em; padding: 20px 0 20px 0; border-bottom: 1px solid #dddcdc; line-height: 18px; }
  #sidebar ul li h2 { font-size: 1.2em; margin-bottom: 8px; }
 /* Main Style Sheet Ends here */
 /* 960 Style Sheet start here */
 .container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}.container_12 .grid_3,.container_16 .grid_4{width:220px}.container_12 .grid_6,.container_16 .grid_8{width:460px}.container_12 .grid_9,.container_16 .grid_12{width:700px}.container_12 .grid_12,.container_16 .grid_16{width:940px}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_16 .grid_1{width:40px}.container_16 .grid_2{width:100px}.container_16 .grid_3{width:160px}.container_16 .grid_5{width:280px}.container_16 .grid_6{width:340px}.container_16 .grid_7{width:400px}.container_16 .grid_9{width:520px}.container_16 .grid_10{width:580px}.container_16 .grid_11{width:640px}.container_16 .grid_13{width:760px}.container_16 .grid_14{width:820px}.container_16 .grid_15{width:880px}.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0}.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}
 /* 960 Style Sheet Ends here */
 /* Reset Style Sheet Starts here */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
body {
 line-height: 1;
ol, ul {
 list-style: none;
blockquote, q {
 quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;

/* remember to define focus styles! */
:focus {
 outline: 0;

/* remember to highlight inserts somehow! */
ins {
 text-decoration: none;
del {
 text-decoration: line-through;

/* tables still need 'cellspacing="0"' in the markup */
table {
 border-collapse: collapse;
 border-spacing: 0;
 /* Reset Style Sheet Ends here */ 

Script Source Code
$(document).ready(function() { //perform actions when DOM is ready
    var z = 0; //for setting the initial z-index's
    var inAnimation = false; //flag for testing if we are in a animation

    $('#pictures img').each(function() { //set the initial z-index's
        z++; //at the end we have the highest z-index value stored in the z variable
        $(this).css('z-index', z); //apply increased z-index to <img>

    function swapFirstLast(isFirst) {
        if (inAnimation) return false; //if already swapping pictures just return
        else inAnimation = true; //set the flag that we process a image

        var processZindex, direction, newZindex, inDeCrease; //change for previous or next image

        if (isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; } //set variables for "next" action
        else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; } //set variables for "previous" action

        $('#pictures img').each(function() { //process each image
            if ($(this).css('z-index') == processZindex) { //if its the image we need to process
                $(this).animate({ 'top': direction + $(this).height() + 'px' }, 'slow', function() { //animate the img above/under the gallery (assuming all pictures are equal height)
                    $(this).css('z-index', newZindex) //set new z-index
            .animate({ 'top': '0' }, 'slow', function() { //animate the image back to its original position
                inAnimation = false; //reset the flag
            } else { //not the image we need to process, only in/de-crease z-index
                $(this).animate({ 'top': '0' }, 'slow', function() { //make sure to wait swapping the z-index when image is above/under the gallery
                    $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); //in/de-crease the z-index by one

        return false; //don't follow the clicked link
    function runauto() {
       // alert('hu');
        setTimeout(runauto, 3000);
    $('#next a').click(function() {
        return swapFirstLast(true); //swap first image to last position

    $('#prev a').click(function() {
        return swapFirstLast(false); //swap last image to first position
JavaScript Library File

Share this link with your facebook profile if you like this.

No comments: