Template Gallery Builder

Imagen:

Fotos	Thumbnail
Width:	Width:
Height:	Height:
	Habilitado:

HTML:

JavaScript:

/*Gallery CCS*/
			.galleryFrame{
			display: block; clear: both; 
			border: 5px solid #FFF;
			height: px; width: px;
			margin: 5px 0 10px;
			position: relative;
			/*overflow: hidden;*/
			box-shadow: 3px 3px 3px #AAA;
		}
		.galleryFrame .gallery{
			display: block; width: px; height: px; overflow: hidden; position: relative;
		}
		.galleryFrame .gallery .item{
			display: block; position: absolute; width: px; height: px; overflow: hidden;
		}

.galleryFrame .gallery .item.selected{
			z-index: 101!important;
		}
		.galleryFrame .itemList{
			position: absolute;
			overflow: hidden;
			z-index: 200;
			bottom: 10px; right: 10px;
		}
		.galleryFrame .itemList .item{
			display: block; float: left; 
			height: 20px; width: 20px;
			background-color: #DDD;
			border: 2px solid #FFF;
			opacity: .75;
			margin-left: 5px;
		}
		.galleryFrame .itemList .item:hover,
		.galleryFrame .itemList .item.selected{
			background-color: #FFF;
		}
	
	/*SCRIPTS*/
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
	<script type="text/javascript" src="http://vacationsmarket.com/js/heroGallery.js"></script>
	<script type="text/javascript">
		$(document).ready(
			function(){
				$("#hotelGallery").heroGallery({
					useThumbnails: false });
				});
	</script>

Template para Gallery Builder

Fotos

Thumbnail