PDA

View Full Version : Making images clickable to be viewed larger in popup?


realizment
03-06-2009, 03:29 AM
How would i go about making the small images on a page popup to be larger image like on this site http://www.tigerlilyflorist.ie/index.html. Or the sites that have the whole page fade and the image pops up in the center? Thanks guys.

Ricky55
03-06-2009, 12:47 PM
These use the built in Dreamweaver behaviour pop up window but I would look at using something like lightbox it looks much more professional.

Check it out here, very easy to implement.

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

realizment
03-06-2009, 08:22 PM
thanks, so i just add the code and that works?

d a v e
03-06-2009, 08:38 PM
all the instructions are on the lightbox site ;)

Ricky55
03-06-2009, 09:22 PM
Yes, all the hard work has been done for you.

realizment
03-06-2009, 11:48 PM
i know i was reading trough the instructions and i was still mind boggled, i know i must be irritating u guys but i really am an uber noob and knowing where those codes go etc, are just crazy. lol sorry

Corrosive
03-07-2009, 06:46 AM
i know i must be irritating u guys

No, not at all. We all have to start somewhere. :wink:

We won't be able to give you any more instructions than are on the Lightbox site though. Just work your way through them step-by-step.

Ricky55
03-07-2009, 12:17 PM
If you just use Lightbox and not lightbox 2 it really is very straight forward. The instructions on the site are very well written.

Basically just copy the files into your site, the reference the javascript file in the head of your document.

Which part don't you understand?

Ricky55
03-07-2009, 12:34 PM
Download the zip file and extract the contents.

In your site create the following folders to keep everything neat:

images
styles
scripts

Now copy the file lightbox.js into the scripts folder.
Copy lightbox.css into the styles folder
And all of the images along with the image you want to make larger into the images folder.

Right now open your html file.

Ensure that the HTML file is in the same place as the folders mentioned above.

So you have

your html file.html
images
styles
scripts

Now look at the code using code view. Insert the code below on the line after the title tags <title></title> the following code links to the style sheet and the lightbox script.


<link href="styles/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/lightbox.js"></script>


Now when you create a link make sure your links look like this


<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>


All that's left to do is make sure the lightbox.js and css file know where the images are.

First open the lightbox.js file and change these two lines so they read like they do below:


var loadingImage = 'images/loading.gif';
var closeButton = 'images/close.gif';


Finally open the lightbox css file and change these lines so they read like theu do below


#overlay{ background-image: url(../images/overlay.png); }
background-image: url(../images/blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="../images/overlay.png", sizingMethod="scale");


That's it, upload all the files to your server and it will work. It will only work when on a server by the way, you can't test locally.

Let us know how you get on.