[JavaScriptBank]

This is really very cool and amazing picture gallery to promote your personal/business pictures on the web. With two type of displaying, this JavaScript gallery script allow users to switch the layout... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript Picture Gallery with Display Switcher

How to setup

Step 1: CSS below for styling thescript, place it into HEAD section
CSS

<style type="text/css">
body {
	margin: 0;
	padding: 50px 0 0;
	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
}
* {
	margin: 0;
	padding: 0;
}

img {
	border: none;
}
h1 {
	font: 5em normal Georgia, 'Times New Roman', Times, serif;
	text-align:center;
	margin-bottom: 20px;
}
h1 span { 	color: #e7ff61; }
h1 small{
	font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing: 1.5em;
	display: block;
	color: #ccc;
}

.container {
	width: 758px;
	margin: 0 auto;
	padding-bottom: 100px;
	overflow: hidden;
}
ul.display {
	float: left;
	width: 756px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	background: #222;
}
ul.display li {
	float: left;
	width: 754px;
	padding: 10px 0;
	margin: 0;
	border-top: 1px solid #111;
	border-right: 1px solid #111;
	border-bottom: 1px solid #333;
	border-left: 1px solid #333;
}
ul.display li a {
	color: #e7ff61;
	text-decoration: none;
}
ul.display li .content_block {
	padding: 0 10px;
}
ul.display li .content_block h2 {
	margin: 0;
	padding: 5px;
	font-weight: normal;
	font-size: 1.7em;

}
ul.display li .content_block p {
	margin: 0;
	padding: 5px 5px 5px 245px;
	font-size: 1.2em;
}
ul.display li .content_block a img{
	padding: 5px;
	border: 2px solid #ccc;
	background: #fff;
	margin: 0 15px 0 0;
	float: left;
}

ul.thumb_view li{
	width: 250px;
}
ul.thumb_view li h2 {
	display: inline;
}
ul.thumb_view li p{
	display: none;
}
ul.thumb_view li .content_block a img {
	margin: 0 0 10px;
}


a.switch_thumb {
	width: 122px;
	height: 26px;
	line-height: 26px;
	padding: 0;
	margin: 10px 0;
	display: block;
	background: url(switch.gif) no-repeat;
	outline: none;
	text-indent: -9999px;
}
a:hover.switch_thumb {
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
a.swap { background-position: left bottom; }


</style>

Step 2: Use JavaScript code below to setup the script
JavaScript

<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
	$("a.switch_thumb").toggle(function(){
	  $(this).addClass("swap"); 
	  $("ul.display").fadeOut("fast", function() {
	  	$(this).fadeIn("fast").addClass("thumb_view"); 
		 });
	  }, function () {
      $(this).removeClass("swap");
	  $("ul.display").fadeOut("fast", function() {
	  	$(this).fadeIn("fast").removeClass("thumb_view");
		});
	}); 

});
</script>

Step 3: Copy & Paste HTML code below in your BODY section
HTML

<a href="javascript:void(0);" class="switch_thumb">Switch Thumb</a> 
<ul style="display: block;" class="display">
	<li>
		<div class="content_block">
			<a href="#"><img src="sample.gif" alt=""></a>
			<h2><a href="#">Image Name</a></h2>
			<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. </p>
		</div>
	</li>
	<li>
		<div class="content_block">
			<a href="#"><img src="sample2.gif" alt=""></a>
			<h2><a href="#">Image Name</a></h2>
			<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. </p>
		</div>
	</li>
	<li>
		<div class="content_block">
			<a href="#"><img src="sample3.gif" alt=""></a>
			<h2><a href="#">Image Name</a></h2>
			<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. </p>
		</div>
	</li>
	<li>
		<div class="content_block">
			<a href="#"><img src="sample4.gif" alt=""></a>
			<h2><a href="#">Image Name</a></h2>
			<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. </p>
		</div>
	</li>
	<li>
		<div class="content_block">
			<a href="#"><img src="sample5.gif" alt=""></a>
			<h2><a href="#">Image Name</a></h2>
			<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. </p>
		</div>
	</li>
	<li>
		<div class="content_block">
			<a href="#"><img src="sample6.gif" alt=""></a>
			<h2><a href="#">Image Name</a></h2>
			<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. </p>
		</div>
	</li>
	<li>
		<div class="content_block">
			<a href="#"><img src="sample7.gif" alt=""></a>
			<h2><a href="#">Image Name</a></h2>
			<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. </p>
		</div>
	</li>
	<li>
		<div class="content_block">
			<a href="#"><img src="sample8.gif" alt=""></a>
			<h2><a href="#">Image Name</a></h2>
			<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. </p>
		</div>
	</li>
	<li>
		<div class="content_block">
			<a href="#"><img src="sample9.gif" alt=""></a>
			<h2><a href="#">Image Name</a></h2>
			<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. Woman kickin', work yer last dogs, rattler hee-haw
mobilehome stew trailer driveway shootin'.</p>
		</div>
	</li>
	<li>
		<div class="content_block">
			<a href="#"><img src="sample10.gif" alt=""></a>
			<h2><a href="#">Image Name</a></h2>
			<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. </p>
		</div>
	</li>
	<li>
		<div class="content_block">
			<a href="#"><img src="sample11.gif" alt=""></a>
			<h2><a href="#">Image Name</a></h2>
			<p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell. </p>
		</div>
	</li>
	<li>
		<div class="content_block">
			<a href="#"><img src="sample12.gif" alt=""></a>
			<h2><a href="#">Image Name</a></h2>
			<p>Askin',
jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors
spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman
kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer
driveway shootin'. </p>
		</div>
	</li>
</ul>

Step 4: downloads
Files
Picture_Gallery_with_Display_Switcher_images.zip

JavaScript Countdown Timer - JavaScript Web based Music Player - JavaScript AJAX Page Content Loader