<link rel="stylesheet" type="text/css" href="styles/galleria.css" media="screen">
<style type="text/css">
.caption{
	color:#000; 
	margin-left:20px;
}

.demo{
	position:relative;
	margin-top:2em;
}

.gallery{
	width: 630px; 
	margin:10px 20px;
}

.gallery li{
	width:100px;
	height:100px;
	border:1px solid #111; 
	margin: 2px; 
	background:#000;
}

.gallery li div{
	left:240px
}

.galleria li img.thumb{
	cursor:pointer;
	top:auto;
	left:auto;
	display:block;
	width:auto;
	height:auto
}

#main_image{
	margin:0 auto 60px auto;
	height:300px;
	width:200px;
	background:black;
}

#main_image img{
	margin-bottom:10px;
}
</style>
		
<script type="text/javascript" src="scripts/galleria.js"></script> 
<script type="text/javascript"> 
jQuery(function($) {
	
	$('ul.gallery').galleria({
		history   : false, // activates the history object for bookmarking, back-button etc.
		clickNext : true, // helper for making the image clickable
		insert    : '#main_image', // the containing selector for our main image
		onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
			
			// fade in the image & caption
			if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
				image.css('display','none').fadeIn(1000);
			}
			caption.css('display','none').fadeIn(1000);
			
			// fetch the thumbnail container
			var _li = thumb.parents('li');
			
			// fade out inactive thumbnail
			_li.siblings().children('img.selected').fadeTo(1000,1.0);
			
			// fade in active thumbnail
			thumb.fadeTo('fast',1).addClass('selected');
			
			// add a title for the clickable image
			image.attr('title','Next image >>');
		},
		onThumb : function(thumb) { // thumbnail effects goes here
			
			// fetch the thumbnail container
			var _li = thumb.parents('li');
			
			// if thumbnail is active, fade all the way.
			var _fadeTo = _li.is('.active') ? '1' : '1.0';
			
			// fade in the thumbnail when finnished loading
			thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
			
			// hover effects
			thumb.hover(
				function() { thumb.fadeTo('fast',1); },
				function() { _li.not('.active').children('img').fadeTo('fast',1.0); } // don't fade out if the parent is active
			)
		}
	});
});
</script>


		

<ul class="gallery"> 
	<li class="active"><img src="images/jack1.jpg" title="A caption" alt="Image01"></li> 
	<li><img src="images/jack2.jpg" title="A caption" alt="Image01"></li> 
	<li><img src="images/jack3.jpg" title="A caption" alt="Image01"></li> 
	<li><img src="images/jack4.jpg" title="A caption" alt="Image01"></li> 
</ul>
<br class="clearleft" />		
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">« previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next »</a></p>