Bookshelf

This widget is inspired from iBook app of iOS. You can display any items such as book covers, album jackets, photo thumbnails, video posters, and so on. Each item can be linked to a specific page. This background is cropped from iBook. You are free to replace the background to your own custom image.This core script (jcarousel) is created by Jan Sorgalla, http://sorgalla.com/jcarousel/. Special thanks to him.

Preview

* You can experience a Pro version 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 of each shelf, shadow effect, frame border, more beautiful bookshelf image, and supporting multiple rows).

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.)

* Customize styles (all sizes are fixed.)

widget width widget height max image width max image height

border color (mouse-over)

* Optional settings

the number of items in a row where to open a link round border

* Insert contents

photo path width height

link

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml" 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.easing.1.3.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B6W2C3whvuZdQnBLSzZkTXlLbXM/jquery.jcarousel.js"></script>
<style type="text/css">
.bookshelf-container {
	/*widget_width*/width:728px;
	/*widget_height*/height:136px;
	background: url('https://googledrive.com/host/0B6W2C3whvuZdSWdabXZ5MnZ1REE/bookself_bg_728136.jpg') no-repeat;padding:0;margin:0;
}
.bookshelf-container ul{list-style:none; margin: 0;padding: 0;}
.jcarousel-container-horizontal {width:100%;height:100%;border:none;padding: 0;margin: 0;}
.jcarousel-clip-horizontal {top:13%;left:3%;width:94%;height:76%;}
.bookshelf-container li {position:relative;}
.bookshelf-container li,.jcarousel-item-horizontal,.jcarousel-item-placeholder-horizontal{/*max_image_width*/width:103px;/*max_image_height*/height:103px;text-align:center;}
.bookshelf-container li img{display:none;position:absolute;border:2px ridge transparent;}
.bookshelf-container li img:hover {/*border_color*/border-color:red;}
.jcarousel-next-horizontal {background: url('https://googledrive.com/host/0B6W2C3whvuZdSWdabXZ5MnZ1REE/arrow-right.gif') center no-repeat;position: absolute;top: 0;right: 0;width: 14px;height:90%;cursor: pointer;border:none;}
.jcarousel-next-disabled-horizontal {cursor: default;opacity: .5;-moz-opacity: .5;filter: alpha(opacity=50);}
.jcarousel-prev-horizontal {background: url('https://googledrive.com/host/0B6W2C3whvuZdSWdabXZ5MnZ1REE/arrow-left.gif') center no-repeat;position: absolute;top: 0;left: 0;width: 14px;height:90%;cursor: pointer;border:none;}
.jcarousel-prev-disabled-horizontal {cursor: default;opacity: .5;-moz-opacity: .5;filter: alpha(opacity=50);}
.round-border {-khtml-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
</style>

<script type="text/javascript">
$(document).ready(function(){function mycarousel_itemLoadCallback(d,c){if(c!="init"){return} $(".bookshelf-container li img").fadeIn();}/*var_visible_items*/var visible_items=6;var total_items=$(".bookshelf-container li").size();var o=$(".bookshelf-container li:first").width();var d=$(".bookshelf-container li:first").height();var j=$(".bookshelf-container").width() - Math.ceil($(".bookshelf-container").width() * 0.03*2);if(o*visible_items>j){visible_items=Math.floor(j/o)}var a=j-(o*visible_items);var total_page=Math.ceil(total_items/visible_items);$(".bookshelf-container li").css({"margin-left":Math.ceil((a/visible_items)/2)+"px","margin-right":Math.floor((a/visible_items)/2)+"px"});o-=4;d-=4;$(".bookshelf-container li img").each(function(){var e=e_width=$(this).width();var c=e_height=$(this).height();if(e>o){e_width=o;e_height=Math.round((c*e_width)/e);if(e_height>d){e_height=d;e_width=Math.round((e*e_height)/c)}}else{if(c>d){e_height=d;e_width=Math.round((e*e_height)/c);if(e_width>o){e_width=o;e_height=Math.round((c*e_width)/e)}}}$(this).css({"z-index":0,width:e_width+"px",height:e_height+"px",bottom:"0px",left:Math.floor((o-e_width)/2)+"px"});});$(".bookshelf-container ul").jcarousel({visible:visible_items,size:total_items,easing:"easeInOutExpo",scroll:visible_items,itemLoadCallback:mycarousel_itemLoadCallback});});
</script>
</head>
<body style="background: transparent; margin: 0pt;">
<div class="bookshelf-container"><ul>
<!--begin to insert contents-->

<!--end to insert contents-->
</ul></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.