Product Browser

This widget is inspired by apple.com. The original source code is from jQuery for Designer but we edited the code for the use of snippet. More powerful and better look. Additionally, every icon (image) size will be automatically adjusted so you can insert different sizes.

* You can experience a Pro version (name: 'Item Browser') of this widget from Pro Pack. Pro versions enable users to save and load (sharing contents with other green label widgets) their code with additional customizable options (+ flexible width & height, and supporting multiple rows).

Preview

Mac iWork iLife

Build your own

Input data in the fields below. (Your contents such as images, videos, and music can be anywhere on web. DropBox is recommended.)
Once you finish to insert contents please click "Verify the actual size of every photo" to get each correct photo dimension.
Click "Apply these settings", select the entire codes. Then, press Command + C (Mac) or Control + C (Windows) to copy.
Paste the source code into HTML snippet in iWeb. (Non-iWeb users can get an iFrame code by clicking "Make an iFrame" button.)

* Optional settings

where to open a link

* Insert groups

group 1
group 2
group 3

* Insert contents

photo path width height

label link

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B6W2C3whvuZdQnBLSzZkTXlLbXM/jquery-ui.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B6W2C3whvuZdQnBLSzZkTXlLbXM/jquery.ui.slider.js"></script>
<style type="text/css">
.product-browser-container {
	/*widget_width*/width:708px;
	/*widget_height*/height:126px;
	background: url('https://googledrive.com/host/0B6W2C3whvuZdZWpBVm0tNWR6TjQ/gradient_bg_728x146.jpg') no-repeat;padding:10px;margin:0;overflow: visible;
}
.sliderGallery {overflow:hidden;position:relative;width:100%;height:100%;padding:0;margin:0;}
.sliderGallery ul{list-style:none; margin: 0;padding: 0;position: absolute;padding-top:10px;}
.sliderGallery ul li{width:140px;height:90px;margin:0 5px;padding:0;float:left;display:block;text-align:center;position:relative;overflow:hidden;}
.sliderGallery ul li img{border:none;display:none;position:absolute;bottom:20px;opacity: .7;-moz-opacity: .7;filter: alpha(opacity=70);}
.sliderGallery ul li:hover img {opacity: 1.0;-moz-opacity: 1.0;filter: alpha(opacity=100);}
.sliderGallery ul li .text-holder {/*font_family*/font-family:Lucida Sans Unicode,Lucida Grande,sans-serif;position:absolute;color:#ccc;bottom:0;font-size:11px;text-align:center;height:16px;line-height:16px;clear: both;width:100%;padding:0;padding-top:4px;margin: 0;white-space:nowrap;}
.sliderGallery ul li a {color:#ccc;text-decoration:none;}
.sliderGallery ul li:hover a, .sliderGallery ul li:hover p {color:white;}
.sliderContainer {width:692px;height: 19px;top: 106px;margin: auto;padding: 0;position: relative;background: url('https://googledrive.com/host/0B6W2C3whvuZdZWpBVm0tNWR6TjQ/scrollbar_692.png') no-repeat;}
.slider {width: 520px;height: 17px;margin; 0;padding:1px;position:relative;left:85px;top:0;white-space:nowrap;line-height:14px;font-family:Lucida Sans Unicode,Lucida Grande,sans-serif;}
.slider .slider-lbl1 {left:50px;}
.slider .slider-lbl2 {left:250px;}
.slider .slider-lbl3 {left:450px;}
.ui-slider-handle {position: absolute;cursor: move;height: 17px;width: 140px;top: 0;margin: 0 -70px;background: url('https://googledrive.com/host/0B6W2C3whvuZdZWpBVm0tNWR6TjQ/scroller.png') no-repeat;z-index: 100;}
.sliderContainer span.btn-left {float: left; width: 20px;height: 19px;cursor: pointer; }
.sliderContainer span.btn-right {float: right; width: 20px;height: 19px;cursor: pointer; }
.sliderContainer span.start {float: left; width: 70px;height: 19px;}
.sliderContainer span.end {float: right;width: 70px;height: 19px;}
.slider span {color:#bbb;font-size:10px;cursor: pointer;position: absolute;z-index: 110;top: 2px;}
</style>

<script type="text/javascript">
/*var_target_window*/var target_window="_top";
var contents=[/*begin to insert contents*/
/*end to insert contents*/];

/* don't change this script line */
$(document).ready(function(){for(var a=0;a<contents.length;a++){if(contents[a].link){$(".sliderGallery ul").append('<li><a href="'+contents[a].link+'" target="_top"><img src="'+contents[a].image+'" width="'+contents[a].width+'" height="'+contents[a].height+'" /><p class="text-holder">'+contents[a].desc+"</p></a></li>")}else{$(".sliderGallery ul").append('<li><img src="'+contents[a].image+'" width="'+contents[a].width+'" height="'+contents[a].height+'" /><p class="text-holder">'+contents[a].desc+"</p></li>")}}var c=$(".sliderGallery ul li:first").width();var b=$(".sliderGallery ul li:first").height()-20;$(".sliderGallery ul").css("width",(contents.length*(c+10))+"px");$(".sliderGallery li img").each(function(){var d=e_width=$(this).width();var f=e_height=$(this).height();if(d>c){e_width=c;e_height=Math.round((f*e_width)/d);if(e_height>b){e_height=b;e_width=Math.round((d*e_height)/f)}}else{if(f>b){e_height=b;e_width=Math.round((d*e_height)/f);if(e_width>c){e_width=c;e_height=Math.round((f*e_width)/d)}}}$(this).css({"z-index":0,width:e_width+"px",height:e_height+"px",left:Math.floor((c-e_width)/2)+"px"}).show()});DrawSliderbars()});function DrawSliderbars(){var a=$("div.sliderGallery");var b=$("ul",a);var c=b.innerWidth()-a.outerWidth();$(".slider",a).slider({min:0,max:c,handle:".ui-slider-handle",stop:function(d,e){b.animate({left:e.value*-1},500)},slide:function(d,e){b.css("left",e.value*-1)}});$(".btn-left").click(function(){var d=$(".slider",a).slider("option","value");if(d>0){d=d-100;if(d<0){d=0}$(".sliderGallery .slider").slider("value",d);$(".sliderGallery ul").animate({left:d*-1},500)}});$(".btn-right").click(function(){var d=$(".slider",a).slider("option","value");if(d<c){d=d+100;if(d>c){d=c}$(".sliderGallery .slider").slider("value",d);$(".sliderGallery ul").animate({left:d*-1},500)}});$("span.end").click(function(){var d=$(".slider",a).slider("option","value");d=c;$(".sliderGallery .slider").slider("value",d);$(".sliderGallery ul").animate({left:d*-1},500)});$("span.start").click(function(){var d=$(".slider",a).slider("option","value");d=0;$(".sliderGallery .slider").slider("value",d);$(".sliderGallery ul").animate({left:d*-1},500)})};
</script>
</head>
<body style="background: transparent; margin: 0pt;">
<div class="product-browser-container"><div class="sliderGallery"><ul></ul><div class="sliderContainer"><span class="btn-left"></span><span class="start"></span><span class="btn-right"></span><span class="end"></span><div class="slider"><div class="ui-slider-handle"></div>
<!--begin to insert contents-->
<!--end to insert contents-->
</div></div></div></div>
</body>
</html>

* Copy and paste this code above into HTML snippet (iWeb) or snippet (for other tools, follow "Installation Guide"), and see if it works on your web browser.

- iFrame code for non-iWebsites (other tools except for iWeb)

I am Preview

This live demo is dynamically loaded when you push "Apply these settings" button. This preview may not be same to the actual view in your website.
* Important! Don't click a link from this preview. It will make you leave this page out so that you may lose your own code.