View Full Version : How to Create a Thumbnail that When Clicked Opens a Larger Version of the Picture in Dreamweaver

08-20-2009, 03:36 PM
Hi am designing a page with thumbnails of images and would like to be able to click on the thumbnails and a larger version of the images will be displayed on the same page. Have tried on click open browser window but this puts the image in a separate window. Have also tried right clicking on thumbnail and choosing make link and browsing for the larger image but this also opens the image in another window. Hope someone can help, thanks

08-20-2009, 03:59 PM
Did you want something like this on the right hand side?


08-20-2009, 04:25 PM
If so it's using Thickbox, a jQuery plugin.
I love it.

08-21-2009, 04:38 AM
Yes exactly what I want

08-21-2009, 05:45 AM
Yes, thickbox/lightbox2 should do it. Both free. Google them :)

08-21-2009, 08:25 AM
Thanks trying it out now

08-22-2009, 12:46 AM
Hi! Not having much luck with plugs in. I have tried both thickbox and lightbox and am obviously doing something wrong. I have read all the documentation and examples.


The above is the page I am developing and I do not have the images in a gallery, so used the:

<script type="text/javascript">
$(function() {
$('a.lightbox').lightBox(); // Select all links with lightbox class

I cant see the class lightbox in the css file. I copied the lightbox gif images into my images folder and have tried everything, well everything that doesnt work lol. Sorry to bother you, I really appreciate you guys, such a blessing for a newbie.

08-22-2009, 07:24 AM
Try this lightbox


The instructions are easier to follow.

08-24-2009, 04:53 AM
I cant begin to thankyou, u r a legend!!!! Have got it to work woo hoo!
One thing Im not sure of is:
If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Would this require that I put the set of images in a folder within images folder and then replace roadtrip with the name of the new folder?

Thanks again!!

08-24-2009, 06:11 AM
Nice one :)

No, you don't need to put the images in a 'road trip' folder. Just group them in the HTML code as you have done and they will appear in the same 'gallery'. Simple.

08-24-2009, 08:53 AM
Awesome, thank you

08-24-2009, 11:47 AM
You're welcome