Classic jQuery Gallery

User Rating: / 0
PoorBest 

Hi, in this tutorial i will present a Classic jQuery Gallery. You have a container with 500 height and 860 width px, obviously you can change this values. In the first phase you have a container with images ordered by columns, and then when click a image is load a nice  expansion effect and in the left side the rest of the images is transform in thumbnail!

Create a new html page, and in the head section copy the script and the links with css and jquery plugin:

<script type="text/javascript" src="js/mootools-for-gallery.js"> </script>
<script type="text/javascript" src="js/UvumiGallery-compressed.js"> </script>
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />

<script type="text/javascript">
new UvumiGallery({container:'gallery'});
</script>

In the body section create link with images:

<div id="gallery">
        <a href="http://img.uvumi.com/tools/ben-clapp.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_ben-clapp.jpg" alt="Ben Clapp master drummer"/></a>
        <a href="http://img.uvumi.com/tools/black-joe.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_black-joe.jpg" alt="Black Joe Lewis of Austin, Texas"/></a>
        <a href="http://img.uvumi.com/tools/blue-guitar.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_blue-guitar.jpg" alt="Classic Gibson SG in metalic blue"/></a>
        <a href="http://img.uvumi.com/tools/favilla-neck.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_favilla-neck.jpg" alt="Acoustic guitarist self portrait"/></a>
        <a href="http://img.uvumi.com/tools/gibson-rock-out.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_gibson-rock-out.jpg" alt="Running the line on a Gibson Les Paul"/></a>
        <a href="http://img.uvumi.com/tools/sprux-guitar.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_sprux-guitar.jpg" alt="Going to Austin"/></a>
        <a href="http://img.uvumi.com/tools/harp-and-shure.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_harp-and-shure.jpg" alt="Bullet with a blues harp"/></a>
        <a href="http://img.uvumi.com/tools/mandolin.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_mandolin.jpg" alt="Electric mandolin street musician"/></a>
        <a href="http://img.uvumi.com/tools/mariomicrophone.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_mariomicrophone.jpg" alt="Mario Matteoli at the mic"/></a>
        <a href="http://img.uvumi.com/tools/marshall.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_marshall.jpg" alt="Marshall amplification"/></a>
        <a href="http://img.uvumi.com/tools/mcfadden.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_mcfadden.jpg" alt="Classic Eric McFadden style"/></a>
        <a href="http://img.uvumi.com/tools/microphone.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_microphone.jpg" alt="Stock microphone photo"/></a>
        <a href="http://img.uvumi.com/tools/power-supply.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_power-supply.jpg" alt="DC Power supply for your rack"/></a>
        <a href="http://img.uvumi.com/tools/reels.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_reels.jpg" alt="Ampex on the move"/></a>
       
        <a href="http://img.uvumi.com/tools/scott-h-biram.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_scott-h-biram.jpg" alt="Dirty old one-man band"/></a>
        <a href="http://img.uvumi.com/tools/teac-34b.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_teac-34b.jpg" alt="Teac 34B reel to reel"/></a>
        <a href="http://img.uvumi.com/tools/turntable.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_turntable.jpg" alt="Stock photo of a turntable"/></a>
        <a href="http://img.uvumi.com/tools/vermin-guitars.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_vermin-guitars.jpg" alt="Caption missing..."/></a>
        <a href="http://img.uvumi.com/tools/weary-boys.jpg"><img src="http://img.uvumi.com/tools/thumbs/th_weary-boys.jpg" alt="Live music in Lafayette"/></a>
</div>

Now create a new css file and call it style.css: 

body,html{
background-color:#333;
margin:0;
padding:0;
font-family:Trebuchet MS, Helvetica, sans-serif;
}

#gallery{
margin:20px auto;
height:500px;
width:860px;
position:relative;
color:#aaa;
padding:20px;
overflow:hidden;
border:1px solid #888;
background-color:#000;
}

/*
TO AVOID UNEXPECTED RESULTS, DO NOT MODIFY ANY OF THE PROPERTY OTHER THAN THE ONES SET HERE
*/

img{
border:0;
}

/*The color of the border will actually also define the color of the progresser inside*/
div.progress-bar{
border:1px solid #fff;
background-color:#000;
}

/*try not to make the border thicker than 1px*/
div.missing-thumbnail{
background:#333 url('redx.gif') center center no-repeat;
cursor:pointer;
border:1px solid #bbb;
}

div.error-message{
color:#bbb;
font-size:1.2em;
margin-top:-0.6em;
position:relative;
text-align:center;
}

div.caption{
background-color:#000;
color:#fff;
}

/*to style the direct link inside the caption*/
div.caption a{
color:#fff;
}

The last step is to download the jQuery plugin, that was all, bye!

This script has been developed by http://tools.uvumi.com !