# How do I make an image open to a larger image with Dreamweaver CS3?



## Dano2 (Nov 30, 1999)

Hi all, 
I just have a question using Dreamweaver CS3. I have several images on the website that I am developing (not yet up on a server) and I want to make it so a person can click on the image so it would open to a larger image to view, then they could just click the close or X button on it. This is just so they could get a closer look at the product. I can't seem to find documentation on how to perform this, but then I am still kinda new to using DW CS3. 

Thanks in advance for any help...dano2


----------



## colinsp (Sep 5, 2007)

You probably want a bit of javascript to do this. Something like:


```
<a href="#"onclick="window.open('image.jpg','new','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=yes, width=785, height=500')"><img src="image.jpg" border="0" /></a>
```
replace image.jpg with the path and name of your your image and the width and height you require. You can turn scroll bars off if you want to.

This is untested but should work or at least give you a starting point for more research.


----------



## lordsmurf (Apr 23, 2009)

Most of these are done with "Lightbox" style JS codes, more often in a CMS like WordPress.


----------



## Dano2 (Nov 30, 1999)

Wow is this really that difficult to do? Can't dreamweaver do this within itself easily I had thought? Here is an example of what I am talking about. If you click on the Guitar Image it opens to a larger pic, then you can just close it. Thanks in advance Dano2

http://www.guitarcenter.com/Seagull-The-Original-S6-Acoustic-Guitar-104069091-i1147556.gc


----------



## colinsp (Sep 5, 2007)

Dano

It isn't difficult to do. In DW just position your thumbnail on the page wherever you want it in whatever way suits you. Then just go to code view in DW and edit the code like in my original post and you will achieve what you want. AFAIK this is the only way to do it in DW, there may be an add-on that allows you to do it in the design view in DW but I am not aware of it. Looking at the code on the page that you linked to they do it with a javascript call as I suggested in my original reply.

This is the code that they use:


```
<a href="javascript:openOptionImage('Seagull/561775jpg.jpg')" id="ctl00_CenterContent_g_t_href_optionimage">
```


----------



## Dano2 (Nov 30, 1999)

Ok cool, I will give it a try...thanks for the info....I guess the other thing I could do is just add another page that has a larger image and just link that page.


----------



## colinsp (Sep 5, 2007)

Yes that would work. You can always open the larger image page with a target=_blank to open it in a new page but it does mean that you have to create an html page for each image unles you just link to the full sized jpg image and rely on the users browser to create the page. I think it is worth the effort to try the javascript.


----------



## Eriksrocks (Aug 7, 2005)

colinsp said:


> This is the code that they use:
> 
> 
> ```
> ...


This will not work because it does not have the JS that defines the openOptionImage() function.

It's not a difficult thing to do, but Dreamweaver can't do everything. 

For something like this I would recommend using a prebuilt lightbox script like Slimbox 2. These are guaranteed to work in every modern browser and are very robust. Learn some Javascript, read the instructions, and you should have an awesome-looking lightbox "pop-up" within minutes.


----------

