Ali Jafarian

In this tutorial we’ll be building an image tab widget using HTML, CSS, and jQuery. This type of widget can be useful for home page hero elements, product features, main services features, and anything else that involved highlighting your core offerings. I chose Game of Thrones characters because it’s the most awesome show on Earth, at the moment.

The HTML

Our HTML will consist of a parent <div> that contains the tab navigation and the tab content. We will assign a unique data-id attribute value to each <a> and then use that same value for the id’s of the .profile <div>’s we fade in using jQuery. Inside of each .profile <div> will be a .caption <div> that contains content.

<div id="tabs-container">

  <div id="tabs-nav">
    <img src="images/got-logo.jpg" class="logo" />
    <ul>
      <li><a href="#" data-id="ned-stark" class="active">Ned Stark</a></li>
      <li><a href="#" data-id="jaime-lannister">Jaime Lannister</a></li>
      <li><a href="#" data-id="rob-stark">Rob Stark</a></li>
      <li><a href="#" data-id="tyrion-lannister">Tyrion Lannister</a></li>
    </ul>
  </div>
  <!--/#tabs-nav-->

  <div id="tabs-content">

    <div class="profile" id="ned-stark" style="display:block;">
      <div class="caption">
        <h2>Ned Stark</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
      </div>
      <!--/.caption-->
      <img src="images/ned-stark.jpg" />
    </div>
    <!--/#ned-stark-->

    <div class="profile" id="jaime-lannister">
      <div class="caption">
        <h2>Jaime Lannister</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
      </div>
      <!--/.caption-->
      <img src="images/jaime-lannister.jpg" />
    </div>
    <!--/#jaime-lannister-->

    <div class="profile" id="rob-stark">
      <div class="caption">
        <h2>Rob Stark</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
      </div>
      <!--/.caption-->
      <img src="images/rob-stark.jpg" />
    </div>
    <!--/#rob-stark-->

    <div class="profile" id="tyrion-lannister">
      <div class="caption">
        <h2>Tyrion Lannister</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
      </div>
      <!--/.caption-->
      <img src="images/tyrion-lannister.jpg" />
    </div>
    <!--/#tyrion-lannister-->

  </div>
  <!--/#tabs-content-->

</div>
<!--/#tabs-container-->

The CSS

In the CSS we’ll use an image sprite for the tab navigation background states (default, hover, and active). We could definitely use straight CSS for this, but an image sprite is easier for learning purposes. We’ll also hide our .profile &lt’div>’s by default (using display:none) and then show them using jQuery. The .caption <div>’s are positioned absolutely (inside .profile) with a transparent .png for their background. And lastly, we’ll use an animated .gif as the #tabs-content background to add a nice loading effect while the content is fading in and out.

#tabs-container {
  background: #000;
  height: 400px;
  width: 900px;
}
#tabs-nav {
  float: left;
  width: 280px;
}
#tabs-nav .logo {
  float: left;
}
#tabs-nav ul {
  font-family: Garamond, Georgia;
  font-size: 1em;
  list-style: none;
}
#tabs-nav ul li {
  border-top: 1px solid #000;
  float: left;
}
#tabs-nav ul li a {
  background: url(images/nav-sprite.jpg) no-repeat;
  color: #999;
  display: block;
  height: 19px;
  padding: 30px;
  width: 220px;
  text-decoration: none;
  text-shadow: 1px 1px 1px #000;
}
#tabs-nav ul li a:hover {
  background-position: 0 -79px;
}
#tabs-nav ul li a.active {
  background-position: 0 -158px;
  color: #fff;
}
#tabs-content {
  background: url(images/ajax-loader.gif) 50% 50% no-repeat;
  float: left;
  height: 400px;
  width: 620px;
}
#tabs-content .profile {
  display: none; /* hide by default */
  height: 400px;
  position: relative;
  width: 620px;
}
#tabs-content .profile .caption {
  background: url(images/trans_black-50.png);
  padding: 30px;
  position: absolute;
  right: 0;
  top: 200px;
  width: 220px;
}
#tabs-content .profile .caption h2 {
  color: #fff;
  font-family: Garamond, Georgia;
  margin: 0 0 10px;
}
#tabs-content .profile .caption p {
  color: #ccc;
  font-family: Arial;
  font-size: .75em;
  line-height: 1.5em;
  margin: 0;
  text-align: left;
}

The jQuery

Finally, we add a little jQuery magic and our widget is complete! We’ll include a Google hosted version of jQuery and then add our custom script below.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	// bind our function to the tabs
	$('#tabs-nav ul li a').click(function(e){
		// remove the active state from all links
		$('#tabs-nav ul li a').removeClass("active");
		// add the active state to the clicked link
		$(this).addClass("active");
		// fade out the current container
		$('.profile').fadeOut(600, function(){
			// fade in the clicked container
			$('#' + profileID).fadeIn(600);
		});
		// define our current profile variable
		var profileID = $(this).attr("data-id");
	});
});
</script>

Summary

And that’s it! Make sure you remember to add your own version of jQuery or some other CDN hosted version (I prefer Google). I hope this helps you create beautiful web pages.

Discussion

1 thought on “jQuery Image Tabs with Captions”
Leave a Comment

Your email address will not be published. Required fields are marked *