DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Faithful has posted 1 posts at DZone. View Full User Profile

Interactive Gallery

10.03.2013
| 3379 views |
  • submit to reddit
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Gallery</title>
		<style>
		
		body {
			width: 830px; 
			
		}
		
			#gallery-wrap {
				/* border: 1px solid #000; */
				width: 777px; 
				height: 450px; 
				border: 3px solid #000; 
				margin: 0 auto; 
			}
			
			#gallery-container {
				width: 600px; 
				height: 450px; 
				overflow:hidden; 
				border-right: 3px solid #000;
				float: left; 
			}
			
			.description {
				position: absolute; 
				width: 600px; 
				height: 70px; 
				top: 465px; 
				opacity: 0.5; 
				background-color: #000; 
				color: #fff;
				font-family: Arial, Helvetica, sans-serif; 
				font-size: 13px; 
				text-align: center; 
			
			}
			#thumbnail-container {
				width: 165px; 
				height: 447px;
				padding-top: 3px; 
				overflow: scroll; 
				float: right; 
			}
			
			#thumbnail-container img {
				cursor: pointer; 
			}
			
			#disclaimer {
				padding-left: 25px; 
				font-family: sans-serif; 
				font-size: 14px;
			}
			
			footer {
				font-family: serif; 
				font-size: 13px;
				margin-left: 28px;  
			}
		</style>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>		
		
		<script>
			$(document).ready(function(){
				$("#thumbnail-container img").click(function(){
					$("#largeImage").attr("src", $(this).attr('src').replace('thumb', 'large')); 
					$(".description p").html($(this).attr('alt')); 
				}); 
				
				
			}); 
		
		</script>
	
	</head>
	<body>
		
	<header>
		<h1 style="text-align: center">A Visit To The National Zoo, D.C.</h1>
	</header>
	
	<div id="gallery-wrap">
		<div id="gallery-container">
			
			<img id="largeImage" src="images/image_01_large.jpg" alt="Thumbnail"/>
			<div class="description"><p>A day at the Smithsonian's National Zoo, Washington, D.C.</p></div>
			<!--<div id=""><img src="images/zooimage2.jpg"/></div>
			<div id=""><img src="images/zooimage3.jpg"/></div>
			<div id=""><img src="images/zooimage4.jpg"/></div>
			<div id=""><img src="images/zooimage5.jpg"/></div>
			<div id=""><img src="images/zooimage6.jpg"/></div>
			<div id=""><img src="images/zooimage7.jpg"/></div>
			<div id=""><img src="images/zooimage8.jpg"/></div>-->
			
		</div><!-- Gallery Container -->
			
		<div id="thumbnail-container">
			<img src="images/image_01_thumb.jpg" alt="A day at the Smithsonian's National Zoo, Washington, D.C." />
			<img src="images/image_02_thumb.jpg" alt="The lions yawns either in boredom or hunger."/>
			<img src="images/image_03_thumb.jpg" alt="In a video captured by our journalist, the female lion here goes ahead to massage the male lion's back, a gesture that appears well received at first 
			but eventually leads up to a brief, but fiesty ruffle."/>
			<img src="images/image_04_thumb.jpg" alt="This tiger prawls in search for his prey, a bouncing ball containing meat and simulating an animal on the run."/>
			<img src="images/image_05_thumb.jpg" alt="This elephant, out from a bath in the pond, is picking up the sand with his trunk and throwing it onto his back."/>
			<img src="images/image_06_thumb.jpg" alt="A panda lays leisurely in his man-made territory."/>
			<img src="images/image_07_thumb.jpg" alt="This special breed of a lizard gazes curiously as a camera clicks in his direction."/>
			<img src="images/image_08_thumb.jpg" alt="A gorrilla, done with his meal of bananas, watches the curious passerbys atop his little jungle."/>
		</div><!-- Thumbnail container -->
		
	</div><!-- Gallery Wrap-->
	
	<div id="disclaimer">
		<p>Note: The pictures are only for demonstration. The captions may or may not actually go along with the event's occurences.
			 </p>
	</div>
	<footer>
			<p>
					© Copyright  by Faithful Okoye
			</p>
	</footer>
	</body>
</html>

This is a gallery using JavaScript. You can customize it to fit your needs. 

AttachmentSize
image_01_large.jpg24.42 KB
image_01_thumb.jpg9.54 KB