<div id="thumbnail-scroller"> <div class="container"> <figure><a title="Caption 1" href="#"><img src="http://lorempixel.com/100/120/food/1" alt=""/></a> </figure> <figure><a title="Caption 2" href="#"><img src="http://lorempixel.com/100/120/food/2" alt=""/></a> </figure> <figure><a title="Caption 3" href="#"><img src="http://lorempixel.com/100/120/food/3" alt=""/></a> </figure> <figure><a title="Caption 4" href="#"><img src="http://lorempixel.com/100/120/food/4" alt=""/></a> </figure> <figure><a href="#"><img src="http://lorempixel.com/100/120/food/5" alt=""/></a> </figure> <figure><a title="Caption 6" href="#"><img src="http://lorempixel.com/100/120/food/6" alt=""/></a> </figure> <figure><a title="Caption 7" href="#"><img src="http://lorempixel.com/100/120/food/7" alt=""/></a> </figure> <figure><a title="Caption 8" href="#"><img src="http://lorempixel.com/100/120/food/8" alt=""/></a> </figure> <figure><a title="Caption 9" href="#"><img src="http://lorempixel.com/100/120/food/9" alt=""/></a> </figure> <figure><a title="Caption 10" href="#"><img src="http://lorempixel.com/100/120/food/10" alt=""/></a> </figure> <figure><a title="Caption 11" href="#"><img src="http://lorempixel.com/100/120/food/1" alt=""/></a> </figure> <figure><a title="Caption 12" href="#"><img src="http://lorempixel.com/100/120/food/2" alt=""/></a> </figure> <figure><a title="Caption 13" href="#"><img src="http://lorempixel.com/100/120/food/3" alt=""/></a> </figure> <figure><a title="Caption 14" href="#"><img src="http://lorempixel.com/100/120/food/4" alt=""/></a> </figure> <figure><a title="Caption 15" href="#"><img src="http://lorempixel.com/100/120/food/5" alt=""/></a> </figure> <figure><a title="Caption 16" href="#"><img src="http://lorempixel.com/100/120/food/6" alt=""/></a> </figure> <figure><a title="Caption 17" href="#"><img src="http://lorempixel.com/100/120/food/7" alt=""/></a> </figure> <figure><a title="Caption 18" href="#"><img src="http://lorempixel.com/100/120/food/8" alt=""/></a> </figure> <figure><a title="Caption 19" href="#"><img src="http://lorempixel.com/100/120/food/9" alt=""/></a> </figure> <figure><a title="Caption 20" href="#"><img src="http://lorempixel.com/100/120/food/10" alt=""/></a> </figure> <figure><a title="Caption 21" href="#"><img src="http://lorempixel.com/100/120/food/1" alt=""/></a> </figure> </div> </div>
body { background-color:#0D4883 } #thumbnail-scroller { height:130px; background-color:#810A0A; border:10px solid #12559D; position:relative; margin:50px; overflow:auto; } /* Create shadow effect on the left and right of container */ #thumbnail-scroller:before, #thumbnail-scroller:after { content:""; display:block; position:absolute; top:0; bottom:0; left:-4px; width:4px; height:100%; box-shadow:0 0 4px black; z-index:10; } #thumbnail-scroller:after { left:auto; right:-4px; } #thumbnail-scroller .container { position:absolute; top:0; left:0; margin:5px 0 0 5px; width:300%; height:120px; } #thumbnail-scroller figure { display:block; background-color:white; float:left; width:100px; height:120px; margin:0 5px 0 0; position:relative; overflow:hidden; } #thumbnail-scroller figcaption { display:block; position:absolute; right:0; bottom:-50px; left:0; background-color:black; font:italic normal 11px/normal Arial, Sans-Serif; color:white; padding:4px 10px; text-align:left; opacity:.8; } #thumbnail-scroller figure img { display:block; border:none; margin:0; }
(function ($) { var $thumbnailScroller = $('#thumbnail-scroller'), $container = $thumbnailScroller.find('.container'), $item = $container.find('figure'), item_length = $item.length, item_width = $item.outerWidth(true), total_width = item_width * item_length, $window = $(window); $thumbnailScroller.css('overflow', 'hidden'); $container.css('width', total_width); // Auto caption builder & hover effect $item.each(function () { if ($(this).children().attr('title')) { var cap = $(this).children().attr('title'); $(this).append('<figcaption>' + cap + '</figcaption>').children().removeAttr('title'); } }).on("mouseenter mouseleave", function (e) { $('figcaption', this).stop().animate({ bottom: e.type == "mouseenter" ? 0 : -50 }, 200); }); $window.on("resize", function () { var o_l = $thumbnailScroller.offset().left, t_w = $thumbnailScroller.width(), c_w = total_width; $thumbnailScroller.off().on("mousemove", function (e) { if ($(this).width() < $container.width()) { $container.css('left', -((e.pageX - o_l) * ((c_w - t_w) / t_w))); } }); }).trigger("resize"); })(jQuery);