Slide Thumbs

This is a demo page. You can view the supporting article here

---

Leonardo Maia

skillicorn

theenergycell

Fred Maya

		$(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
			thumbs.click(function() {
				// 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);
		});