Image swap instead of image change

JavaScript
1

I had the code below which allowed me to have 5 pics and when one is clicked it swapped with the main image, so you could move the 5 images around, 4 being thumbnails and 1 main image. It works fine, but I had to change it so that it didnt interfear with a history back button I had.

But this is the image swap code:

http://www.room-check.com/


<script type="text/javascript">
/*<![CDATA[*/
function Swap(obj,id){
 var main=document.getElementById(id).getElementsByTagName('IMG')[0],msrc=main.src,obj=obj.getElementsByTagName('IMG')[0],tsrc=obj.src;
 main.src=tsrc;
 obj.src=msrc;
 return false;
}
/*]]>*/
</script>

<div id="imgHolder">
<div id="hotel_Pic_Area_Middle">
<img class="HomeFeaturedImages3" src="/foxglove<?=$rows['Foto1_Hot']?>" alt="" border="0" height="362" width="533" />
</div>
</div>
<div id="hotel_Pic_Area_Right">
<div id="imgThumbs">
<div id="hotel_Pic_Area_Right_Pic_1">
<a href="#" class="showImg active" onmouseup="return Swap(this,'imgHolder');" >
<img class="HomeFeaturedImages3" src="/foxglove<?=$rows['Foto2_Hot']?>" alt="" border="0" height="119" width="179" />
</a>
</div>
<div id="hotel_Pic_Area_Right_Pic_2">
<a href="#" class="showImg" onmouseup="return Swap(this,'imgHolder');">
<img class="HomeFeaturedImages3" src="/foxglove<?=$rows['Foto3_Hot']?>" alt="" border="0" height="119" width="179" />
</a>
</div>
<div id="hotel_Pic_Area_Right_Pic_3">
<a href="#" class="showImg" onmouseup="return Swap(this,'imgHolder');">
<img class="HomeFeaturedImages3" src="/foxglove<?=$rows['Foto4_Hot']?>" alt="" border="0" height="118" width="179" />
</a>
</div>
</div>
</div>

Then had to change it to the code below, and basically the images dont swap anymore, so once the first thumb is clicked it takes over the main image, and then that mainimage is lost, with only the 4 thumbnails to play with.

http://devchecksafetyfirst.csf.dcmanaged.com/hotel.php?hotel_ID=247065


<script>
$(document).ready(function(){
    var mainImage = $("#imgHolder img")[0];
    $("a.showImg").click(function(e){
        e.preventDefault();
        mainImage.src = $(this).children('img')[0].src;
    });
});
</script>

<div id="images_gallery">

<div id="imgHolder">
<div id="hotel_Pic_Area_Middle">
<img class="HomeFeaturedImages3" src="<?=$f['Foto1_Hot']?>" alt="" border="0" height="285" width="430" />
</div>
</div>

<div id="hotel_Pic_Area_Right">
<div id="imgThumbs">
<div id="hotel_Pic_Area_Right_Pic_1">
<a href="#" class="showImg">
<img class="HomeFeaturedImages4" src="<?=$f['Foto2_Hot']?>" alt="" border="0" height="65" width="130" />
</a>
</div>
<div id="hotel_Pic_Area_Right_Pic_2">
<a href="#" class="showImg">
<img class="HomeFeaturedImages4" src="<?=$f['Foto3_Hot']?>" alt="" border="0" height="65" width="130" />
</a>
</div>
<div id="hotel_Pic_Area_Right_Pic_3">
<a href="#" class="showImg">
<img class="HomeFeaturedImages4" src="<?=$f['Foto4_Hot']?>" alt="" border="0" height="65" width="130" />
</a>
</div>
<div id="hotel_Pic_Area_Right_Pic_4">
<a href="#" class="showImg">
<img class="HomeFeaturedImages4" src="<?=$f['Foto5_Hot']?>" alt="" border="0" height="65" width="130" />
</a>
</div>

</div>
</div>

So what I would like to do is go back to the swap way but not have it so the page refreshes, is that possible.

2

Hi there,

Why don’t you do it like this:

<!DOCTYPE HTML>
<html>
  <head>
    <base href="http://devchecksafetyfirst.csf.dcmanaged.com/" />
    <meta charset="utf-8">
    <title>CSF Hotel Page</title>
    <link href="css/style.css" rel="stylesheet" type= "text/css" />
  </head>

  <body>
    <div id="hotel_Top_Area">
      <div id="hotel_Picture_Section">
        <div id="hotel_Picture_Section_Left">
          <div id="images_gallery">

            <div id="imgHolder">
              <div id="hotel_Pic_Area_Middle">
                <img class="HomeFeaturedImages3" src="/imgdata/hotel/6242GranPalPuntApr1.jpg" alt="" border="0" height="285" width="430" />
              </div>
            </div>

            <div id="hotel_Pic_Area_Right">
              <div id="imgThumbs">
                <div id="hotel_Pic_Area_Right_Pic_1">
                  <a href="#" class="showImg">
                    <img class="HomeFeaturedImages4" src="/imgdata/hotel/8585GranPalPuntApr2.jpg" alt="" border="0" height="65" width="130" />
                  </a>
                </div>

                <div id="hotel_Pic_Area_Right_Pic_2">
                  <a href="#" class="showImg">
                    <img class="HomeFeaturedImages4" src="/imgdata/hotel/6112GranPalPuntApr3.jpg" alt="" border="0" height="65" width="130" />
                  </a>
                </div>

                <div id="hotel_Pic_Area_Right_Pic_3">
                  <a href="#" class="showImg">
                    <img class="HomeFeaturedImages4" src="/imgdata/hotel/2615GranPalPuntApr4.jpg" alt="" border="0" height="65" width="130" />
                  </a>
                </div>

                <div id="hotel_Pic_Area_Right_Pic_4">
                  <a href="#" class="showImg">
                    <img class="HomeFeaturedImages4" src="/imgdata/hotel/2470655.jpg" alt="" border="0" height="65" width="130" />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      var mainImage = $("#imgHolder img");

      $("a.showImg").click(function(e){
        e.preventDefault();
        var currImage = $(this).children('img');
        var oldMainImageSrc = mainImage[0].src;
        mainImage[0].src = currImage[0].src;
        currImage[0].src = oldMainImageSrc;
      });
    </script>
  </body>
</html>
3

Morning Pullo,

Will give this a go and let you know, thanks.

4

Morning Multichild, Pullo,

I feel I should just add a comment to this. The reason that the images stopped swapping is my fault because when (in a previous thread) I rewrote the JS to avoid the page reload problem, I changed the behaviour because I assumed that it was a mistake. Personally, I would avoid having the images swap when clicked because it’s non-standard behaviour - it threw me at first when I saw it as I wasn’t expecting it, and I think other visitors to your site will find it unintuitive at first too, as the position of each thumbnail changes as you click through them.

5

That’s a good point.
Maybe using a simple gallery with thumbnails would be better instead?