Themeforest

Slick jQuery Image Captions

In today’s tutorial we are going to show how you can add slick image captions to an image gallery using just a few lines of jQuery and CSS.

1. Gallery HTML

Our image gallery is going to just be a simple unordered list containing our image thumbnails. For the captions we will use span tags, which will contain a header tag and our main caption text.

<ul id="gallery">
	  <li>
	    <img src="images/gallery/thumb/img_1a.jpg" alt="" />
		<span>
		  <h3>Image 1</h3>
		  This is the caption for the first image
		</span>
	  </li>
	  <li>
	    <img src="images/gallery/thumb/img_2a.jpg" alt="" />
		<span>
		  <h3>Image 2</h3>
		  This is the caption for the second image
		</span>
	  </li>
	  <li>
	    <img src="images/gallery/thumb/img_3a.jpg" alt="" />
		<span>
		  <h3>Image 3</h3>
		  This is the caption for the third image
		</span>
	  </li>
	  <li>
	    <img src="images/gallery/thumb/img_4a.jpg" alt="" />
		<span>
		  <h3>Image 4</h3>
		  This is the caption for the fourth image
		</span>
	  </li>
	  <li>
	    <img src="images/gallery/thumb/img_5a.jpg" alt="" />
		<span>
		  <h3>Image 5</h3>
		  This is the caption for the fifth image
		</span>
	  </li>
	  <li>
	    <img src="images/gallery/thumb/img_6a.jpg" alt="" />
		<span>
		  <h3>Image 6</h3>
		  This is the caption for the last image
		</span>
	  </li>
	</ul>

2. The CSS

Most of our CSS is just for styling the gallery thumbnails. For our captions we are going to use absolutely positioned span tags so there are a couple of important CSS rules required to make our jquery captions work.

The CSS below contains some notes to identify which ones we need:

#gallery {
margin-bottom: 20px;
width: 100%;  /* Use this & the overflow: hidden to clear the floated list items */
overflow: hidden;
}
#gallery li {
float: left;
margin: 0 3px 3px 0;
width: 214px;
height: 131px;
position: relative; /* Required for positioning of span tags */
color: #000;
}
#gallery li img {
padding: 6px;
background: #ececec;
border: 1px solid #ccc;
}
#gallery li h3 {
font: bold 11px Helvetica,Arial,sans-serif;
padding: 0;
margin: 0;
}
#gallery li span {
display: none;  /* Required to hide the captions */
font-size: 11px;
position: absolute; /* Required for positioning to overlay over image */
bottom: 7px;
left: 7px;
padding: 5px;
background: url(images/bg_white_trans.png) repeat;
width: 190px; /* Since we are using absolute positioning we need to set the width */
line-height: 1.2em;
}

With the above CSS we are hiding the span tags using display: none – this means that if the user does not have javascript enabled they will be unable to see the captions. If you want to change this you can set the span tags to not display using jQuery instead.

3. The jQuery Code – Fading Captions

Our jQuery is very simple and we can use the hover event, which allows us to add effects for both mouseover and mouseout:

$(document).ready(function() {
    $('#gallery li').hover(
        function(){$('span',this).fadeIn('slow');},
        function(){$('span',this).fadeOut('slow');
    });
});

4. The jQuery Code – Sliding Captions

One of the great things about jQuery is its built-in effects, so if we want to change the caption animation from fade in/out to sliding we just change the code as follows:

$(document).ready(function() {
    $('#gallery li').hover(
        function(){$('span',this).slideToggle('slow');},
        function(){$('span',this).slideToggle('slow');
    });
});

View jQuery Fading Caption DemoView jQuery Sliding Caption DemoDownload Source Files

6 Comments

  • Hi,
    Im trying to use captions with click event. With this code:

    $(document).ready(function() {
       $('.gallery li').click(
       		function(){
    			$('span').slideToggle('slow');
    		},
                    function(){
    			$('span',this).slideToggle('slow');
    		}
    	);
    });
    

    i’m expect that on click firstly it toggle all the span opened, and then toggle the “this” span. But doesn’t work. Could you help me?

    • Hi,

      The jQuery onClick event doesnt work the same way as hover. You would need to use something like:

      $(document).ready(function() {
          $('.gallery li').click(function(){
              $('.gallery li span').slideDown('slow');
              $('span',this).slideUp('slow');
          });
      });
      
  • Hi,
    I would like to try this with a standard image gallery in wordpress. Is it possible? I imagine that I would just copy/paste the HTML directly into the wordpress page interface. However I’m unclear where the CSS and JQuery code have to be added for a given page (standard template).

    Thanks

    • Hi,

      You can either add the CSS and jQuery code into the page template (probably not the best option) or into the theme’s style sheet and an external js file for the jquery

  • Hi, thank you for all your work.
    In my personal case I have to use “click” event instead “hover” event.
    Changing the actual script it work, but obviously the caption wont close until another click on the same image. I would like to close the last caption if another image is clicked. Please, please, could you help me?
    Regards, Davide.

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags