PDA

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


WotNow
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

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

http://www.ceramictiletrading.co.uk/

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

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

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

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

WotNow
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.

http://www.kimberleywebdesign.com.au/PortSmithCP/chalets.html

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
</script>

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.

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

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

The instructions are easier to follow.

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

Corrosive
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.

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

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