How to call specific images with javascript?

**GodfatherAntiques** · 18 Jan 2011, 08:25 PM

I am having problems figuring out how to call specific images for each product that I have. I got this script off a forum and it works great, but my problem is how do I call certain images to display on my product info page. Here is the code for the slideshow javascript.

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

var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false; 
var nInterval = "";
var placeHolderImg = new Image();

function brushIn(currImg,nextImg){

clearInterval(nInterval); 
currImg.src = nextImg;
var nOpacity = 0; 
nInterval = setInterval(function()
{
nOpacity < 100 ? nOpacity = nOpacity + 7 : 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 - 50 : 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);
}, 400);
}

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: #ffffff;}
.fullSize {margin: 25px;} 
.thumbNail {width: 600px; background-color: #ffffff; 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: 120px; height: 88px;} 

.style1 {
	margin: 25px;
	text-align: center;
}

</style>
</head>
<body>
<div id="fullSize" class="style1"><img src="../Pictures/2010-06-26 whitman/whitman 007.JPG"></div>

<div id="photoGallery" class="thumbNail">
<a href="../Pictures/2010-06-26%20whitman/whitman%20007.JPG"><img src="../Pictures/2010-06-26 whitman/whitman 007.JPG" alt="First Image Description" title="First Image Description"></a>
<a href="../Pictures/2010-06-26%20whitman/whitman%20008.JPG"><img src="../Pictures/2010-06-26 whitman/whitman 008.JPG" alt="Second Image Description" title="Second Image Description"></a>
<a href="../Pictures/2010-06-26%20whitman/whitman%20009.JPG"><img src="../Pictures/2010-06-26 whitman/whitman 009.JPG" alt="Third Image Description" title="Third Image Description"></a>
<a href="../Pictures/2010-06-26%20whitman/whitman%20010.JPG"><img src="../Pictures/2010-06-26 whitman/whitman 010.JPG" alt="Fourth Image Description" title="Fourth Image Description"></a>
</div>
</body>
</html>

What I want is to have different images to show for each of my products. Here is link to my website www.godfatherantiques.com I am hoping you folks can understand what is needed to be done. I tryed to look all over this forum and couldn't find any help. So any help would be appreciated.
I am currently using v1.3.9h Also this script is not currently on my website, but I attached an image of what this script looks like.
Thank you Godfather Antiques

Thread: How to call specific images with javascript?

Thread Tools

Search Thread

Display

How to call specific images with javascript?

Similar Threads

Calling Images With Javascript

How to set up specific products as call for pricing?

New payment module with javascript call

How do I add extra images to a product using javascript

How to call JavaScript Slide show

Posting Permissions