Frique/example_fancybox-gallery.html

## example_fancybox-gallery.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Etalage - Fancybox as a gallery example</title>
		<link rel="stylesheet" href="css/etalage.css">
		<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.min.css">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script src="js/jquery.etalage.min.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.min.js"></script>

		<script>
			$(document).ready(function(){

				// Invoke the Etalage plugin
				$('#etalage').etalage({
					click_callback: function(image_anchor, instance_id){
						// Get image index
						var index = $( '[href="' + image_anchor + '"]' ).first().parents('li').index();
						// Trigger fancybox at this index
						$.fancybox(allimages, { index: index });
					}
				});

				// Collect all images for the fancybox gallery
				var allimages = [];
				$('.etalage_source_image').each(function(){
					allimages.push({ href:$(this).attr('src') });
				});

			});
		</script>
		<style>
			body{ margin: 50px; }
			#etalage{ margin-right: 50px; }
		</style>
	</head>
	<body>

		<ul id="etalage">
			<li>
				<a href="demo_files/images/image2_large.jpg"></a>
				<img class="etalage_thumb_image" src="demo_files/images/image2_thumb.jpg" />
				<img class="etalage_source_image" src="demo_files/images/image2_large.jpg" />
			</li>
			<li>
				<a href="demo_files/images/image3_large.jpg"></a>
				<img class="etalage_thumb_image" src="demo_files/images/image3_thumb.jpg" />
				<img class="etalage_source_image" src="demo_files/images/image3_large.jpg" />
			</li>
			<li>
				<a href="demo_files/images/image4_large.jpg"></a>
				<img class="etalage_thumb_image" src="demo_files/images/image4_thumb.jpg" />
				<img class="etalage_source_image" src="demo_files/images/image4_large.jpg" />
			</li>
		</ul>

		<a href="instructions.html">Back to instructions</a>
		<br><br>
		todo
		<br><br>
		<a href="example_fancybox.html">Regular fancybox example</a><br>
		<a href="example_fancybox-nozoom.html">Fancybox without zoom example</a>

	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Etalage - Fancybox as a gallery example</title>
	<link rel="stylesheet" href="css/etalage.css">
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.min.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="js/jquery.etalage.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.min.js"></script>

	<script>
	$(document).ready(function(){

	// Invoke the Etalage plugin
	$('#etalage').etalage({
	click_callback: function(image_anchor, instance_id){
	// Get image index
	var index = $( '[href="' + image_anchor + '"]' ).first().parents('li').index();
	// Trigger fancybox at this index
	$.fancybox(allimages, { index: index });
	}
	});

	// Collect all images for the fancybox gallery
	var allimages = [];
	$('.etalage_source_image').each(function(){
	allimages.push({ href:$(this).attr('src') });
	});

	});
	</script>
	<style>
	body{ margin: 50px; }
	#etalage{ margin-right: 50px; }
	</style>
	</head>
	<body>

	<ul id="etalage">
	<li>
	<a href="demo_files/images/image2_large.jpg"></a>
	<img class="etalage_thumb_image" src="demo_files/images/image2_thumb.jpg" />
	<img class="etalage_source_image" src="demo_files/images/image2_large.jpg" />
	</li>
	<li>
	<a href="demo_files/images/image3_large.jpg"></a>
	<img class="etalage_thumb_image" src="demo_files/images/image3_thumb.jpg" />
	<img class="etalage_source_image" src="demo_files/images/image3_large.jpg" />
	</li>
	<li>
	<a href="demo_files/images/image4_large.jpg"></a>
	<img class="etalage_thumb_image" src="demo_files/images/image4_thumb.jpg" />
	<img class="etalage_source_image" src="demo_files/images/image4_large.jpg" />
	</li>
	</ul>

	<a href="instructions.html">Back to instructions</a>
	<br><br>
	todo
	<br><br>
	<a href="example_fancybox.html">Regular fancybox example</a><br>
	<a href="example_fancybox-nozoom.html">Fancybox without zoom example</a>

	</body>
	</html>