« »

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 of gallery into thumbnail preview or listing scene.

Try more picture gallery JavaScript on jsB@nk if you still need:

- 16 Free Picture Slideshow Gallery scripts
- JaS Gallery
- Next-Previous Image Gallery

Label: picture slideshow JavaScript, picture gallery JavaScript, JavaScript picture viewer, JavaScript image gallery, photo gallery JavaScript, JavaScript gallery slideshow

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
Files
CSS
JavaScript
HTML
Print

Picture_Gallery_with_Display_Switcher_images.zip

Copy All x2

<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>

Copy All x2

<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>

Copy All x2

<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>

Comment (1)
Write

by yurtdisi egitim, 01/05/2011 01:05 AM
Reply

great, thank for sharing

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language

Dall-E-OpenAI.com
Generate creative images automatically with AI

AIVideo-App.com
Render creative video automatically with AI

Cool Domains for Sale!

CoinHolo.com eChainBank.com index.services pornID.net ChatTotal.com CryptoKD.com choose.exchange ApexBTC.com XMQV.com CTRCoin.com Card.rip ABP3.com this.bid choose.works YeuNu.com war.money ChainTutor.com system.money ZWVQ.com CreditCard.rip

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

03/02/2011
Soh Tanaka [more]
9,294
1
1
0
0.33 KBytes

JavaScript Picture Gallery with Display Switcher

3/5 1 votes / 9,294 previews / 1 comment 03/02/2011 This is really very cool and amazing picture gallery to promote your personal/business pictures on the web. With two typ...JavaScript Picture Gallery with Display Switcher - Picture Gallery with Display Switcher

fireball shadowbwb Ly4ever Cao Phong[7]

Let's be first member to do this