Cool image gallery using jQuery CSS and z-index

Cool image gallery using jQuery CSS and z-index

Friday, July 29, 2011 | Posted by ArtisTutor | Edit Post

In a previous post i presented you a tutorial about a css - jQuery image gallery.Today i will teach how to make another cool gallery. This gallery is based on the CSS property z-index .The gallery will be formed by the wrapping container gallery, a container pictures for the pictures and two controls prev and next for swapping the pictures.
We can add as many pictures as we want because our script will pick them up dynamically.
As you know the z-index is used for positioning images. An image with the value of z-index bigger will be displayed in front of a picture with a smaller value.So picture with z-index 1 will be displayed under a picture with z-index 2,3,4 etc.

How to create unique z-index gallery?

1. Log in to your dashboard--> Design- -> Edit HTML

 2. Search "Ctrl+F" and find the following code: ]]></b:skin> Right before it paste the next code:

#gallery {
  position: relative; 
  
}
    #pictures {
 position: relative; 
 height: 320px;
 margin-left:-20px; 
 
}
    #pictures img {
 position: absolute;
 top: 0;
 left: 0; 
}
    
    #prev {
text-align: center;
text-decoration: none !important;
font-size: 1.3em; 
font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 3px;
  text-decoration: none;
  -webkit-border-radius: 11px;
  -moz-border-radius: 11px;
  -webkit-box-shadow: 1px 1px 3px #666666;
  -moz-box-shadow: 1px 1px 3px #666666;
  text-shadow: 0px 0px 0px #f5f0f5;
  border: solid #ffb700 2px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fabc3f), to(#e09936));
  background: -moz-linear-gradient(top, #fabc3f, #e09936);
margin-left:45px;
margin-top:-10px; }
     #next {
text-align: center;
text-decoration: none !important;
font-size: 1.3em; 
font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 3px;
  text-decoration: none;
  -webkit-border-radius: 11px;
  -moz-border-radius: 11px;
  -webkit-box-shadow: 1px 1px 3px #666666;
  -moz-box-shadow: 1px 1px 3px #666666;
  text-shadow: 0px 0px 0px #f5f0f5;
  border: solid #ffb700 2px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fabc3f), to(#e09936));
  background: -moz-linear-gradient(top, #fabc3f, #e09936);
margin-right:75px;
margin-top:-10px;
}
#loader { 
position: absolute; 
top: 0; left:0;
 height: 350px;
 width: 100%;
 background: url(http://img14.imageshack.us/img14/2083/ajaxloaderlz.gif) white no-repeat center center;
 z-index: 9999;
 }

This is the CSS for the gallery. You will have to use images with the same dimension because the images will not be resized.
Change the red line value with the height of your images.
Change the blue values line for aligning the text around the gallery.

2. Now find  </head> and bfefore it add the next script code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<link href='http://demos.usejquery.com/03_z-index_gallery/css/960.css' media='screen' rel='stylesheet' type='text/css'/>

 <script type='text/javascript'>
        //<![CDATA[

$(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
  var imgLoaded = 0; //for checking if all images are loaded
  
  $('#pictures').append('<div id="loader"></div>'); //append the loader div, it overlaps all pictures
  
  $('#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>
    
    $(new Image()).attr('src', $(this).attr('src')).load(function() { //create new image object and have a callback when it's loaded
      imgLoaded++; //one more image is loaded
      
      if(imgLoaded == z) { //do we have all pictures loaded?
        $('#loader').fadeOut('slow'); //if so fade out the loader div
      }
    });
  });

  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
  }
  
  $('#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
  });
});
//]]>
    </script>

If you have jQuery on your blog delete the red line.

3. Save the template. Create a new post and make sure you are in HTML mode. Paste the next code in the post window. This code is the markup for the gallery.

<div class="grid_6 prefix_1 suffix_1" id="gallery">
<div id="pictures">
<img alt="" src="http://img5.imageshack.us/img5/1074/picture1fown.png" />
<img alt="" src="http://img847.imageshack.us/img847/5516/picture2jb.png" />
<img alt="" src="http://img684.imageshack.us/img684/6374/picture3qw.png" />
<img alt="" src="http://img6.imageshack.us/img6/1308/picture4hyk.png" />
<img alt="" src="http://img841.imageshack.us/img841/1152/picture5jv.png" />
</div>

<div class="grid_3 alpha" id="prev">
            <a href="#previous">&laquo; Prev Picture</a>
          </div>
          <div class="grid_3 omega" id="next">
            <a href="#next">Next Picture &raquo;</a>
</div>

Replace the red links with your own picture link
Write the rest of the article , publish it and see the result.

| | | |

Save on Delicious

Get Latest Updates For Free!

Subscribe via Email