Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to make an image swap in a gallery

    I'm a designer and HTML/CSS coder only. I'd like to ask the community for the simplest solution on making an image swap to different image when the user clicks one of the many thumbnails. It's pretty standard gallery functionality, "click the thumbnail to see the big version".

    I'm hoping to get some JavaScript that is easy to configure even though I don't know how to write JavaScript.

    Here's a link to the page:
    http://clientzone.thermostudios.com/.../bouquets.html
    The thumbnails are on the left and the replicable image on the right.

    Thanks in advance.

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by ashtonbrn View Post
    I'm a designer and HTML/CSS coder only. I'd like to ask the community for the simplest solution on making an image swap to different image when the user clicks one of the many thumbnails. It's pretty standard gallery functionality, "click the thumbnail to see the big version".

    I'm hoping to get some JavaScript that is easy to configure even though I don't know how to write JavaScript.

    Here's a link to the page:
    http://clientzone.thermostudios.com/.../bouquets.html
    The thumbnails are on the left and the replicable image on the right.

    Thanks in advance.
    a lightbox? something like this:

    http://www.huddletogether.com/projects/lightbox/

    if i'm not wrong, Excavator post this few time ago:

    http://www.c6software.com/Products/PopBox/

    best regards and hapy holydays

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    I don't know if you have not put in all the larger images
    or you have them named differently from 'thumb' vs 'full'
    but you should be able to correct the changes after
    the first 4 thumb images on the first row.
    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">
    <!-- InstanceBegin template="/Templates/gallery page.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Untitled Document</title>
    <!-- InstanceEndEditable -->
    <link href="http://clientzone.thermostudios.com/bouquet/reset.css" rel="stylesheet" type="text/css" />
    <link href="http://clientzone.thermostudios.com/bouquet/style.css" rel="stylesheet" type="text/css" />
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=213600
    
    var baseURL = 'http://clientzone.thermostudios.com/bouquet/bouquets.html';
    function changeImg(info) {
      info = info.replace('thumb','full');
      document.getElementById('mainImg').src = info;
    }
    
    </script>
    </head>
    
    <body>
    <div class="container">
      <div class="sidebar"> <img src="images/B.gif" width="62" height="79" alt="B" />
    
        <div class="nav">
          <ul>
            <li><a href="whoweare.html">who we are</a></li>
            <li><a href="#">bouquets</a></li>
            <li><a href="#">receptions</a></li>
            <li><a href="#">ceremonies</a></li>
            <li><a href="#">real weddings</a></li>
    
            <li><a href="press.html">press</a></li>
            <li><a href="rave-reviews.html">rave reviews</a></li>
            <li><a href="lets-talk.html">let's talk</a></li>
          </ul>
        </div>
      </div>
      <div class="content-area"><!-- InstanceBeginEditable name="ContentArea" -->
    
    	<div class="leftside">
    	  <p><span class="bigorange">Your bouquet is one of the most essential wedding-day details. </span><br />
    	    Whether it's a bundle of bright, pink peonies or a hand-tied bouquet of tulips, our eclectic designs are eye-catching and chic while maintaining classic elements of balance and beautiful design. We hand-select each blossom to create a bouquet with unique elements that compliment your personal style. </p>
    	  <ul class="thumb-grid">
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B01thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B02thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B03thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B04thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
    
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B05thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B06thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B07thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B08thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B09thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B10thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B11thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B12thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B13thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" /></li>
    
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B14thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B15thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B16thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B17thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B18thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B19thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B20thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B21thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B22thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
    
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B23thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B24thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B25thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B26thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B27thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B28thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B29thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        <li><img src="http://clientzone.thermostudios.com/bouquet/images/B30thumb.jpg"
        width="47" height="47" alt="bouquet thumbnail" onclick="changeImg(this.src)" /></li>
        </ul>
    
    	</div>
      <div class="rightside">
      <img src="http://clientzone.thermostudios.com/bouquet/images/B01full.jpg" alt="bouquet photo" id='mainImg' />
      </div>
    	
    	<!-- InstanceEndEditable --></div>
      <div class="footer"><img src="images/bouquets-of-austin-logo.gif" width="159" height="70" alt="bouquets of austin logo" /><img src="images/fresh-inspired-floral.gif" width="257" height="71" alt="fresh inspired floral" /><span class="footertext"><a href="#">email us</a></span> <span class="footertext"><a href="#">blog</a></span> <span class="footertext">{512} 257.2395</span><img src="images/separator.gif" width="30" height="70" alt="seporator" /> <img src="images/knot.gif" width="80" height="70" alt="the knot logo" /> <img src="images/black-book.gif" width="80" height="70" alt="little black book logo" /></div>
      <!-- InstanceBeginEditable name="UnderFooter" -->
    
      <div class="credits">Photography generously provided by: a la vie : Amiage :  Amy Weison Photography : Ashley Garmon Photographers : Courtney Sprague Photography : Daniel C. Photography : Focal Point Photographics : Forever Photography : Hooked on Photography : Inked Fingers : Ivy Weddings : Jake Holt Photography : Jeff Loftin Photography : Katherine O'Brien Photography : Matt Montalvo Photography : Matthew Johnson Studios : Photography by Vanessa : Pink Posh Photography : Q Weddings : Randy Tinney Photography  : Red Letter Photos : Robert Studio : Ron Parks Photography : SMS Photography : Studio 563 : The Mill Photography Studio : The Nichols : Whitney Lee Photography </div>
      <!-- InstanceEndEditable --></div>
    </body>
    <!-- InstanceEnd -->
    </html>


  •  

    Tags for this Thread

    Posting Permissions

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