Looking for a thumbnail viewer like this one...

**Roubaan** · 04-26-2010, 11:10 AM

Hello
Im looking for a thumbnail viewer that looks and works like this
(click on one af the objekts pictures)

http://www.kvd.se/objekt/nr/459024/A...e_(170hk).html

I want to show both the big picture and all the thumbnails in the same view, and when you click on the big picture it changes into the next thumbnail,
AND/OR change picture with arrows.

Does anyone knows where i can find / buy a script like this ?

Many thanks in advance
Jonas - Sweden

**MJH** · 04-26-2010, 12:39 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<script type="text/javascript">

/*   Thumbnail Image Swap */
/*   Copyright 2009, Michael J. Hill.  All rights reserved. Used with permission.  www.javascript-demos.com */
/*   Free use of the code, so long as this notice is kept intact */

	var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false;	
	var nInterval = "";
	var placeHolderImg = document.createElement('img');

	function brushIn(currImg,nextImg){

		clearInterval(nInterval);		
		currImg.src = nextImg;
		var nOpacity = 0;	
		nInterval = setInterval(function()
			{
			 nOpacity < 100 ? nOpacity = nOpacity + 5 : clearInterval(nInterval);
			 IE ? currImg.style.filter = "alpha(opacity = "+nOpacity+")"
			    : currImg.style.opacity = (nOpacity / 100); 
			}, 5);			
	}

	function brushOut(currImg,nextImg){

		var nOpacity = 100;		
		nInterval = setInterval(function()
			{
			 nOpacity > 0 ? nOpacity = nOpacity - 5 : brushIn(currImg,nextImg);
			 IE ? currImg.style.filter = "alpha(opacity = "+nOpacity+")"
			    : currImg.style.opacity = (nOpacity / 100); 
			}, 3);		
	}

	function swapFullSize(fullSizeImgContainer,nextImg){

		var currFullImg = fullSizeImgContainer.getElementsByTagName('img')[0];
		var nextFullImg = nextImg.getElementsByTagName('img')[0].src;
		placeHolderImg.src = nextFullImg;		
		setTimeout(function()
			{
			 brushOut(currFullImg,placeHolderImg.src);
			}, 350);
	}

	function init(){

		var fullSizeImg = document.getElementById('fullSize');	
		var nGallery = document.getElementById("photoGallery").getElementsByTagName("a");
		for (i=0; i<nGallery.length; i++)
			{
			 nGallery[i].onclick = function()
				{
				 swapFullSize(fullSizeImg,this);				 				 	 
				 return false;
				}			
			 nGallery[i].href = "#";			 
			}			
	}

	IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);	

</script>
<style type="text/css">

	 body {background-color: #f0fff0;}
	.fullSize {margin: 25px;}	
	.thumbNail {width: 600px; background-color: #f6eabc; border: 1px solid black; text-align: center;
		    margin-left: auto; margin-right: auto; margin-top: 15px;}
	.thumbNail img {border: 2px solid blue; margin-left: 15px; margin-top: 5px; margin-bottom: 0px;
			width: 130px; height: 98px;}	

</style>
</head>
	<body>
		<div id="fullSize" class="fullSize"><img src="./images/hard_rock.jpg"></div>

		<div id="photoGallery" class="thumbNail">
			<a href="./images/hard_rock.jpg"><img src="./images/hard_rock.jpg" alt="First Image Description" title="First Image Description"></a>
			<a href="./images/free_stamp.jpg"><img src="./images/free_stamp.jpg" alt="Second Image Description" title="Second Image Description"></a>
			<a href="./images/playhouse.jpg"><img src="./images/playhouse.jpg" alt="Third Image Description" title="Third Image Description"></a>
		</div>
	</body>
</html>

**vwphillips** · 04-26-2010, 01:44 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.SS {
  position:relative;width:620px;height:400px;border:solid black 1px;
}
#thumbs {
  position:absolute;left:520px;top:10px;width:120px;height:200px;border:solid black 0px;
}

#thumbs IMG {
width:40px;margin-Left:5px;cursor:pointer;
}

#main {
  position:absolute;left:10px;top:10px;width:500px;cursor:pointer;
}
/*]]>*/
</style></head>

<body>
<div class="SS" >
 <img id="main" src="http://www.kvd.se/obj/img/4590nn/24/p459024-1L.jpg" />

<div id="thumbs" >
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-1.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-2.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-3.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-4.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-5.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-6.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-7.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-8.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-9.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-10.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-11.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-12.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-13.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-14.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-15.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-16.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-17.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-18.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-19.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-20.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-21.jpg" />
<img src="http://www.kvd.se/obj/img/4590nn/24/p459024-22.jpg" />
</div>
</div>

<script type="text/javascript">
/*<![CDATA[*/

function SlideShow(o){
 var imgs=document.getElementById(o.ThumbID).getElementsByTagName('IMG');
 this.imgs=[];
 for (var z0=0;z0<imgs.length;z0++){
  this.imgs[z0]=imgs[z0].src.replace(o.ReplaceWith[0],o.ReplaceWith[1]);
  this.addevt(imgs[z0],'mouseup','GoTo',z0);
 }
 this.main=document.getElementById(o.MainID);
 this.addevt(this.main,'mouseup','Next',z0);
 this.cnt=4;
 this.GoTo(this.cnt);
}

SlideShow.prototype.GoTo=function(nu){
 this.main.src=this.imgs[nu];
 this.cnt=nu;
}

SlideShow.prototype.Next=function(nu){
 this.cnt=++this.cnt%this.imgs.length;
 this.GoTo(this.cnt);
}


SlideShow.prototype.addevt=function(o,t,f,p){
 var oop=this;
 if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
 else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
 else {
  var prev=o['on'+t];
  if (prev) o['on'+t]=function(e){ prev(e); oop[f](p,e); };
  else o['on'+t]=o[f];
 }
}


new SlideShow({
 ThumbID:'thumbs',
 MainID:'main',
 ReplaceWith:['.jpg','L.jpg'] // replace '.jpg' with 'L.jpg' for the large image
});


/*]]>*/
</script></body>

</html>

Thread: Looking for a thumbnail viewer like this one...

Thread Tools

Search Thread

Looking for a thumbnail viewer like this one...

Bookmarks

Bookmarks

Posting Permissions