SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Main and thumbnail image swap

    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. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!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

    Code:
    <!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. #3
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Thanks again


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •