Cool image gallery using jQuery CSS and z-index



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.

Get Latest Updates For Free!

Subscribe via Email

7 comments

July 30, 2011 at 4:50 AM

it's working
http://smahkin.blogspot.com/

September 22, 2011 at 5:37 PM

woww this blog it's very nice

September 22, 2011 at 6:22 PM

@Zh!nThoThanks. Hope you find what you're looking for.

April 6, 2013 at 12:08 PM

First off all.... i like your site and it's content!!

Now the question :)

I have this artisteer 4 generated theme and am wondering how to and where to add these codes? I've been searching on your site and found some nice parts i want to integrate on my site but the structure from artisteer generated themes seems to be different then other templates.
Can you please tell/teach me how to add the scripts from your site to my template?

Thanks in advance,
tinuz

April 6, 2013 at 12:12 PM

sorry but i forgot to mention that i use wordpress on n00bs on Ubuntu

April 6, 2013 at 2:17 PM

@tinuzThis tutorials are only for Blogger so it will not work on Wordpress.

April 9, 2013 at 12:14 PM

@ArtisTutor

Thanks for your answer and i already suspected it to be blogger only.

I decided to start a blogger blog too so i can use you nice components.

Thanks againg.

Click to Add a New Comment

Leave your comment

- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.

Read latest articles in your favorite news reader
Sign up for newsletter

Find us on Facebook

Followers