PDA

Click to See Complete Forum and Search --> : help for simple rollover gallery with captions



jmaxh
03-07-2007, 04:01 PM
Hi,

I'm a graphics person & I need help with this swap Image script.

It works fine, but I'd like each large image to have a caption.

can someone please help?

Here's the page:

http://www.johnhintlian.com/portfolio.htm

here's the script:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}


//-->
</script>

Thanks!

John :doughnut:

ihoss.com
03-07-2007, 04:48 PM
That looks like a very complicated way to do something simple. All you have to do is give the large image an id of largeImg and the caption div or span an id of caption. Then all you need is the following code:


swapImage(e){
var s = event.target.src;
document.getElementById("largeImg").src = s.substring(0,s.length-7)+".jpg";
document.getElementById("caption").innerHTML = event.target.title;
}

Example:

<a href="#" onclick="swapImage(event);"><img src="some image" title="This is the image caption" /></a>

jmaxh
03-07-2007, 05:35 PM
Thanks, I'm new to all this, I'm having trouble making this work.

is that the entire script? should there be a "function MM" first?

What I want is this:

Click on the thumbnail, and the large image shows up along with a caption

ihoss.com
03-07-2007, 09:14 PM
sorry, you should put function before swapImage :p forgot that :D Apart from that the script should work:


<script type="text/javascript">
function swapImage(e){
var s = event.target.src;
document.getElementById("largeImg").src = s.substring(0,s.length-7)+".jpg";
document.getElementById("caption").innerHTML = event.target.title;
return false;
}
</script>

<a href="#" onclick="swapImage(event);">
<img src="some image" title="This is the image caption" />
</a>


That should be it :)

jmaxh
03-08-2007, 04:50 PM
It won't work, are you sure this is good code? Please visit my site to see what I'm trying to do.

Thanks anyway

ihoss.com
03-08-2007, 07:36 PM
<html>
<head>
<title>Thumbnail Example</title>
<script type="text/javascript">
function swapImage(event){
alert(event);
var s = event.target.src;
document.getElementById("largeImg").src = s.substring(0,s.length-6)+".jpg";
document.getElementById("caption").innerHTML = event.target.title;
return false;
}
</script>
</head>
<body>
<img id="largeImg" alt="" />
<div id="caption">
</div>
<a href="#" onclick="swapImage(event);">
<img src="http://www.johnhintlian.com/images/portfolioImages/tylerTN.jpg" title="This is the image caption" />
</a>
</body>
</html>

jmaxh
03-08-2007, 11:29 PM
that's' great, much appreciated! :mrt: