[Fynci]

I hope that somebody here will be able to help. I am having difficulties with swapping two images when you click them.

Here is an example page:

Laura Jayne Strand - Jewellery Designer - [Shop]

What I am trying to do is to click the thumbnail in the top right, and it becomes the image in the top left and vice versa. Then by clicking the thumbnail again it will swap over.

What I am trying to achieve can be seen here:

Arlene Segal Designs - Gallery \ Albums \ BAR/BAT - CUSTOM \ Pretty in Pink

I have the images at 448x500 size and 179x200. How do I go about achieving what I am trying to do?

Here is the relevent code:

HEADER INFO

Code:

<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6391392-2");
pageTracker._trackPageview();
} catch(err) {}
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_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>

MAIN AREA

Code:

<div id="large_image_left"><!-- TemplateBeginEditable name="image_left" --><img src="../images/twist2.jpg" name="image1" width="448" height="500" id="image1"><!-- TemplateEndEditable --></div>

<div id="small_image_right"><!-- TemplateBeginEditable name="image_right" --><a href="javascript:;" onClick="MM_swapImage('image1','','../images/twist3.jpg','image2','','../images/twist2s.jpg',0)"><img src="../images/twist3s.jpg" name="image2" width="179" height="200" border="0" id="image2"></a><!-- TemplateEndEditable --></div>

Thanks a lot!

[job0107]

This little program will swap two images using one thumbnail.

HTML Code:

<script type="text/javascript">
var imgs1 = new Array("../images/Creek.jpg","../images/Dock.jpg");
var c1=0;
function swap_image(id)
{
 var main=document.getElementById("main_img");
 var thmb=document.getElementById(id);
 main.src=thmb.src;
 main.alt=thmb.alt;
 thmb.src=imgs1[c1];
 thmb.alt=imgs1[c1];
 c1=c1==0?1:0;
 }
</script>
<div id="large_image" style="float:left;">
 <img id="main_img" src="../images/Creek.jpg" alt="../images/Creek.jpg" style="width:448px;height:500px;">
</div>
<div id="thumb_nail" style="float:right;">
 <img id="thmb1" src="../images/Dock.jpg" alt="../images/Dock.jpg" style="width:179px;height:200px;cursor:pointer;" onclick="swap_image(this.id);">
</div>

This one will swap two images per thumbnail using two thumbnails.

HTML Code:

<script type="text/javascript">
var imgs1 = new Array("../images/Creek.jpg","../images/Dock.jpg");
var imgs2 = new Array("../images/Forest.jpg","../images/Garden.jpg");
var c1=0,c2=1;
function swap_image(id)
{
 var main=document.getElementById("main_img");
 var thmb=document.getElementById(id);
 main.src=thmb.src;
 main.alt=thmb.alt;
 if(id=="thmb1")
 {
  thmb.src=imgs1[c1];
  thmb.alt=imgs1[c1];
  c1=c1==0?1:0;
   }
 if(id=="thmb2")
 {
  thmb.src=imgs2[c2];
  thmb.alt=imgs2[c2];
  c2=c2==0?1:0;
  }
 }
</script>
<div id="large_image" style="float:left;">
 <img id="main_img" src="../images/Creek.jpg" alt="../images/Creek.jpg" style="width:448px;height:500px;">
</div>
<div id="thumb_nails" style="float:right;">
 <img id="thmb1" src="../images/Dock.jpg" alt="../images/Dock.jpg" style="width:179px;height:200px;float:left;cursor:pointer;" onclick="swap_image(this.id);">
 <img id="thmb2" src="../images/Forest.jpg" alt="../images/Forest.jpg" style="width:179px;height:200px;float:left;cursor:pointer;" onclick="swap_image(this.id);">
</div>

This one will swap more than two images using one thumbnail.

HTML Code:

<script type="text/javascript">
var imgs1 = new Array("../images/Creek.jpg","../images/Dock.jpg","../images/Forest.jpg","../images/Garden.jpg");
var c1=2;
function swap_image(id)
{
 var main=document.getElementById("main_img");
 var thmb=document.getElementById(id);
 main.src=thmb.src;
 main.alt=thmb.alt;
 thmb.src=imgs1[c1];
 thmb.alt=imgs1[c1];
 c1++;
 if(c1>imgs1.length-1){c1=0;}
 }
</script>
<div id="large_image" style="float:left;">
 <img id="main_img" src="../images/Creek.jpg" alt="../images/Creek.jpg" style="width:448px;height:500px;">
</div>
<div id="thumb_nails" style="float:right;">
 <img id="thmb1" src="../images/Dock.jpg" alt="../images/Dock.jpg" style="width:179px;height:200px;cursor:pointer;" onclick="swap_image(this.id);">
</div>

[Fynci]

Thank you so much! The first script does exactly what I was wanting to do. Perfect!!

[job0107]

Your welcome.