SitePoint Sponsor

User Tag List

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

    Image swap instead of image change

    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/

    Code:
    <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.dcman...otel_ID=247065

    Code:
    <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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Why don't you do it like this:

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

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

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,405
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    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. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by fretburner View Post
    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.
    That's a good point.
    Maybe using a simple gallery with thumbnails would be better instead?


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
  •