Main and thumbnail image swap

JavaScript
1

What Im looking to get working is to have three thumbnail images and 1 main image already populated, and when you clik the thumb image it takes over the main image, now I know there loads of code on the web to get this working, but unfortunately it isnt as straight forward as a simple click a thumb and change the main.

The problem I have is that the designer wants 4 images, and the way it is at the mo, is that I only have space for 3 thumbs on the right, and the 4th image at the moment is the main large image. So what I would like to happen as I cant accomodate a fouth thumb is that when say the first thumb is clicked it swaps with the main imagem so Ive always got 3 different thumbs on the right and another image as the main, so there 4 images, but only space for 3 thumbs.

Where as what I have seen on the web for this to work, is that I would need to have all 4 thumbs there and on click that thumb populates the large space.

There loads like this one out there which would be easy to replicate for myself.

http://fiddle.jshell.net/Gkjx2/show/

Cheers

2 
<!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>
  <link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/Gkjx2/show/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/Gkjx2/show/css/result-light.css">

  <style type='text/css'>
    #imgThumbs {
    overflow: hidden;
    margin: 20px auto;
    width: 396px;
    text-align: center;
}

.showImg {
    width: 100px;
    padding: 15px;
    float:left;
    border: 1px solid #fff;
    border-radius: 5px;
}

#imgHolder {
    border-top: 5px solid #bbb;
    padding: 20px;
    text-align:center;
    width: 100%;
}

.active {
    border: 1px dashed #aaa;
    background-color: #f4f4f4;
}


  </style>
<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>
 </head>

<body>
      <div id="imgThumbs">
            <a href="#" class="showImg active" onmouseup="return Swap(this,'imgHolder');" >
                <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" width="100" height="100" alt="Image 1" />
            </a>
            <a href="#" class="showImg" onmouseup="return Swap(this,'imgHolder');">
                <img src="http://www.stockvault.net/blog/wp-content/uploads/2012/07/colorfulnature-20.jpg" width="100" height="100" alt="Image 2" />
            </a>
            <a href="#" class="showImg" onmouseup="return Swap(this,'imgHolder');">
                <img src="http://www.myspace.cc/layoutcms/images/graphics/nature/nature6.jpg" width="100" height="100" alt="Image 3" />
            </a>
    </div>

    <div id="imgHolder">
        <img src="http://www.whitegadget.com/attachments/pc-wallpapers/16215d1222951905-nature-photos-wallpapers-images-beautiful-pictures-nature-444-photos.jpg" alt="" width="400" height="400">
    </div>

</body>

</html>

or

<!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>
  <link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/Gkjx2/show/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/Gkjx2/show/css/result-light.css">

  <style type='text/css'>
    #imgThumbs {
    overflow: hidden;
    margin: 20px auto;
    width: 396px;
    text-align: center;
}

.showImg {
    width: 100px;
    padding: 15px;
    float:left;
    border: 1px solid #fff;
    border-radius: 5px;
}

#imgHolder {
    border-top: 5px solid #bbb;
    padding: 20px;
    text-align:center;
    width: 100%;
}

.active {
    border: 1px dashed #aaa;
    background-color: #f4f4f4;
}


  </style>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
$('.showImg').hover(function(){

    $(".showImg").removeClass("active");
    $(this).addClass("active");

    var imgURL = $(this).find('img').attr("src"),mainURL = $('#imgHolder').find('img').attr("src");
    $('#imgHolder').find('img').attr("src", imgURL);
    $(this).find('img').attr("src", mainURL);
});
});//]]>

</script>
 </head>

<body>
      <div id="imgThumbs">
            <a href="#" class="showImg active" >
                <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" width="100" height="100" alt="Image 1" />
            </a>
            <a href="#" class="showImg" >
                <img src="http://www.stockvault.net/blog/wp-content/uploads/2012/07/colorfulnature-20.jpg" width="100" height="100" alt="Image 2" />
            </a>
            <a href="#" class="showImg" >
                <img src="http://www.myspace.cc/layoutcms/images/graphics/nature/nature6.jpg" width="100" height="100" alt="Image 3" />
            </a>
    </div>

    <div id="imgHolder">
        <img src="http://www.whitegadget.com/attachments/pc-wallpapers/16215d1222951905-nature-photos-wallpapers-images-beautiful-pictures-nature-444-photos.jpg" alt="" width="400" height="400">
    </div>

</body>

</html>
3

Hi Vic,

I used the first one, and it works perfectly thank you very much.

I’m sure that post will help a lot of people, especially those with demanding graphic designers :slight_smile:

Thanks again

4