Welcome!

[crinkle]

I'd like to have a gallery of product thumbnails and one "large" image. When a customer clicks on a thumbnail, the main image is replaced. There are easy hack ways to do this, but in the interests of good web development I wanted to pose the question - what's the best way?

These images will have auto generated URLs, so the URLs themselves mustn't need to be entered in manually. That's it as far as conditions go, I think.

Thank you!

Anna

[smart.1]

Try any "-box" plugin (Lightbox, Slimbox, Greybox...)

[crinkle]

Will they replace the main image, or open a lightbox?

[smart.1]

Sorry, they're boxes. Here one that's not: Dojo (example) (btw, this is the fastest JS framework)

[jock]

I'm doing exactly the same on a site I'm working on and I'm using galleria jQuery plugin - http://devkick.com/lab/galleria/

I'm using php to pull out the images src, images are stored in a db.

[crinkle]

Thank you

So I have my images swapping. Now the client has asked to have the capability to have the "swapped" images be clicked on to open in a lightbox style window (presumably a 'zoomed in' version).

How would you approach this?

This is my javascript:

Code: Select all

function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}

And this is my HTML:

Code: Select all

<img id="placeholder" src="images/product.png" /></p>
<div id="extraProdImages">

<h3>Other Views</h3>
     
<a onclick="return showPic(this)" href="images/Brocade_Blue.png" title="Blue Brocade" /><img src="images/Brocade_Blue.png" style="height:60px; width:60px; border:1px solid #f0f0f0; margin:2px; padding:2px;" /></a>
<a onclick="return showPic(this)" href="images/Brocade_Green.png" title="Green Brocade" /><img src="images/Brocade_Green.png" style="height:60px; width:60px; border:1px solid #f0f0f0; margin:2px; padding:2px;" /></a>
<a onclick="return showPic(this)" href="images/Brocade_Magenta.png" title="Magenta Brocade" /><img src="images/Brocade_Magenta.png" style="height:60px; width:60px; border:1px solid #f0f0f0; margin:2px; padding:2px;" /></a>
<a onclick="return showPic(this)" href="images/Brocade_Orange.png" title="Orange Brocade" /><img src="images/Brocade_Orange.png" style="height:60px; width:60px; border:1px solid #f0f0f0; margin:2px; padding:2px;" /></a>
</div>


I'm guessing that I'll need to restructure the function to include:

• Adding a link to the larger version
• Adding a class to the link (e.g. thickbox)

The final HTML would need to look something like this:

Code: Select all

<p id="desc">
Blue Brocade
<a href="LARGE IMAGE" class="thickbox"><img id="placeholder" src="images/Brocade_Blue.png"/></a>
</p>


Where should I put the "large image" src initially? Somewhere in the initial link? Ergh. Does that seem like the best way to go about it? This client is doing my head in in a big way.

Thanks!

Anna

[crinkle]

Any ideas?