Looking for a thumbnail viewer like this one... [Archive]

View Full Version : 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/Audi_A6_20_TFSI_Avant_Proline_(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

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

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