Submit your widget

Slide Thumbs

Created 13 years ago   Views 13657   downloads 2677    Author jqueryglobe
Slide Thumbs
View DemoDownload
Share |

Step 1: Create the Mark-up

First we add container elements for output. The outer-most container is used to decorate the output with a background image and padding. The next container is the element that will be used to view the images through. The images and their captions are placed inside the inner-most container and wrapped with div elements.

The images are all a uniform size, and the preview_inner container will be sized to accommodate them. The image size will be used in the script that we'll add later.


<div id="preview_wrap">
 <div id="preview_outer">
  <div id="preview_inner">
    <img src="1_b.jpg" alt="Leonardo Maia" />
    <a target="_blank" href="">Leonardo Maia</a>
    <img src="2_b.jpg" alt="skillicorn" />
    <a target="_blank" href="">skillicorn</a>
    <img src="3_b.jpg" alt="theenergycell" />
    <a target="_blank" href="">theenergycell</a>
    <img src="4_b.jpg" alt="Fred Maya" />
    <a target="_blank" href="">Fred Maya</a>


Within the thumbnails container element, we add list of thumbnails linking to the image slides and an arrow indicating current position.


<div id="thumbs">
 <div id="arrow"></div>
 <span><img src="1_s.gif" alt="Leonardo Maia" /></span>
 <span><img src="2_s.gif" alt="skillicorn" /></span>
 <span><img src="3_s.gif" alt="theenergycell" /></span>
 <span><img src="4_s.gif" alt="Fred Maya" /></span>


Step 2: CSS

The CSS is pretty simple but it sets up everything that is happening. Since overflow is hidden on the preview_outer container what part of the image slide were showing is just a matter of setting a scrollLeft value.


#preview_wrap {
 margin: 0 auto;
 padding: 22px;
 width: 550px; 
 height: 400px;
 background: url('bg_preview.gif') top left no-repeat;
#preview_outer {
 overflow: hidden;
 width: 550px;
 height: 400px;
 position: relative;
#preview_inner {
 text-align: left;
 height: 100%;
 position: relative;
#preview_inner div {
 float: left;
 width: 550px;
 height: 400px;
 position: relative;
#preview_inner div a {
 position: absolute;
 bottom: 0;
 left: 0; 
 display: block;
 width: 100%;
 text-indent: 20px;
 padding: 20px 0;
 color: #fff;
 background: url(bg_trans.png);
 text-decoration: none;
 font-size: 18px;
#thumbs {
 padding-top: 30px;
 position: relative;
 width: 750px;
 text-align: center; 
#thumbs span {
 padding: 12px;
 width: 80px;
 height: 80px;
 cursor: pointer;
 background: url('bg_thumb.gif') top left no-repeat;
 display: inline-block;
#arrow {
 position: absolute;
 top: -13px;
 background: url('bg_arrow.gif') top center no-repeat;
 width: 104px;
 height: 39px;
 display: none;


Step 3: jQuery

Now, let’s add the JavaScript. The code is commented to explain what we’re doing.


$(document).ready(function() {
 // Save  the jQuery objects for later use.
 var outer = $("#preview_outer");
 var arrow = $("#arrow");
 var thumbs = $("#thumbs span");
 var preview_pos;
 var preview_els = $("#preview_inner div");
 var image_width = preview_els.eq(0).width(); // Get width of imaages
 // Hook up the click event {
  // Get position of current image
  preview_pos = preview_els.eq( thumbs.index( this) ).position();
  // Animate them!
  outer.stop().animate( {'scrollLeft' : preview_pos.left}, 500 );
  arrow.stop().animate( {'left' : $(this).position().left }, 500 );
 // Reset positions on load
 arrow.css( {'left' : thumbs.eq(0).position().left } ).show();
 outer.animate( {'scrollLeft' : 0}, 0 );
 // Set initial width
 $("#preview_inner").css('width', preview_els.length * image_width);