Zoom-Info – Create An Informative Image Gallery With jQuery & CSS

Question: Have you ever wanted to neatly display a few lines of text about an image in your site but didn’t want to compromise on the design of your overall layout?we’ll going to show you how to create a useful information-rich jQuery Image Gallery that solves that problem. The best part of it is that it’s so simple to write up that all you’ll need are jQuery’s excellent .hover() and .animate() functions to get it up and running.

 

HTML for the gallery:

Taylor Swift

Taylor Alison Swift (born December 13, 1989)
is an American country pop singer-songwriter
and actress.

Rihanna

Rihanna (born February 20, 1988) is a Barbadian
R&B recording artist and model born in Saint
Michael, Barbados.

Black Eyed Peas

The Black Eyed Peas is a Grammy Award winning hip
hop group that formed in Los Angeles, California
in 1995.

Lady Antebellum

Lady Antebellum is an American country
music group formed in Nashville,
Tennessee in 2006.

Lady Gaga

Lady Gaga is an American recording
artist who rose to fame with her
first two singles "Just Dance" and
"Poker Face".

The Killers

The Killers is an American rock
band from Las Vegas, Nevada, formed
in 2002 who have sold over 16 million
records worldwide.

CSS:

.galleryContainer
{
width: 1024px;
}
.galleryImage {
background-color:black;
width:325px;
height:260px;
overflow:hidden;
margin:5px;
float:left;
}
.info{
margin-left:10px;
font-family:arial;
padding:3px;
}
.info h2{
color:gray;
}
.info p {
color:white
}
.clear {
clear:both;
margin-top:10px;
}

jQuery:

$(document).ready(function()
{
$('.galleryImage').hover(
function()
{

$(this).find('img').animate(
{ width:100,
marginTop:10,
marginLeft:10
}, 500);

},
function()
{

$(this).find('img').animate(
{width:325,
marginTop:0,
marginLeft:0
},300);

});
});

and that’s it!. By using jQuery’s always-useful animate() and hover() functions we’re able to define simple behaviours that shrink the size of the overall image and re-position it for more information to be visible.

Download: http://www.htmldrive.net/items/download/100

Be Sociable, Share!

Leave a comment