...

View Full Version : How to make an image swap in a gallery



ashtonbrn
12-30-2010, 08:06 PM
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/bouquet/bouquets.html
The thumbnails are on the left and the replicable image on the right.

Thanks in advance.

oesxyl
12-30-2010, 10:19 PM
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/bouquet/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

jmrker
12-31-2010, 12:17 AM
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.


<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum