Zoom-Info – How To 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? In today’s post I’m 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.

You can view a live MTV themed demo of what we’re going to create here or see the screenshot below.

(Click the image above to view full-size version)

In User-Interface design we’re always trying to push the envelope with new and interesting ways of presenting interfaces that users are used to seeing. One such interface is the traditional image gallery. You can find them pretty much everywhere..social networks, shopping, e-commerce ..even porn (not that I would ever dream of looking at anything like that!). The question is.. how do you allow a user to still get all the information they want without having to sacrifice on your UI or design?.  The answer, is by hiding that information in your interface, but keeping it accessible.

Let’s take a look at the following wirefame for today’s jQuery component.

What we’re going to try achieving is having our full-size gallery image occupy the entire area of the wire-frame in our default view (“A”). What the user doesn’t know is that the image is actually contained in a div with more information about it (which you can see in the area denoted by “Header” and “Text goes here”).

When the user hovers over this image we’re going to animate/resize it to occupy the thumbnail space (“B”) you see above. This will allow the user to view all the information they want about it. They can then return back just by moving their cursor outside of the image pane.

Now that we know what we’re building, let’s code it up!.

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.

You can now download the source files or view the demo to see what we’ve created.

Why do I think this is a better solution, than say, something that just moves the image completely off-screen?. Well, It’s really a question of context.

If you’re reading about a particular topic, no matter how short he piece of text on it is,  allowing the user to retain the context of that text (in this case the image in thumbnail form) lets them to easily remember why they hovered over it or what took their interest.

This is probably more important in interfaces where you’re clicking through to see more images, like a Facebook Photo Album – eg. just because that folder cover has a fun picture on it doesn’t mean the rest of it’s contents are!. Thats where a descriptive caption comes in handy and why I think this isn’t a bad idea for a user interface.

I hope you found this article useful!. If so, please feel free to share or leave a comment below. Thanks!

-Addy.