Displaying pictures - easy question

Please help - very easy question - client wants a display of pictures on one webpage: fine - can resize them and put them all in a table …BUT then when the web user clicks on one of the pictures - client wants it to display on screen in a larger size.

How can i do this ? I’m using Dreamweaver but do I need to use Javascript or something ?

Many thanks:)

thanks guys so far but all that is a bit beyond me at the moment - I’ve decided to put all my thumbnails in a table (am using Dreamweaver) the PROBLEM is this:

here is the code I’ve got so far and it does work, that is, it places “bigger.jpg” into the table when the mouse is clicked on “smaller.jpg”

<a href=“#” onmouseout=“MM_swapImgRestore()” onClick=“MM_swapImage(‘Image2’,‘’,‘index.php_files/bigger.jpg’,1)”><img src=“index.php_files/smaller.jpg” name=“Image2” width=“133” height=“100” border=“0” id=“Image2” /></a>

BUT what I really want is for “bigger.jpg” to be displayed on screen in a bigger size obviously (when “smaller.jpg” is clicked)- any ideas on how to do this ?

many thanks ! :slight_smile:


Do you want the bigger image to replace the smaller image, or appear somewhere else?

Eric, I recently wrote an article for Six Revisions where I produced a 100% semantic CSS lightbox (using target like you did, with less bulky code) that doesn’t require any JavaScript (except for snotty ole IE). Here’s the demo I built: http://downloads.sixrevisions.com/css-light-box/source.html Who needs jQuery! :wink: :smiley:

Lightboxes are those annoying JavaScript contraptions that seem to have replaced popup windows: http://en.wikipedia.org/wiki/Lightbox_&#37;28JavaScript) where usally they grey-out the rest of the screen and highlight a frame-less boxlike structure or pseudo control.

Now if you were just wanting to see a larger image you could provide a link to a larger image file using the normal method of a hyperlink and thus opening the file. Though I doubt your client wanted that they were probably expecting something similar to the solutions above.

You may want to search for other examples of how to create the above if you didn’t follow those exact samples they were probably slightly biased choices and possibly a little brief but on the plus side they did have working examples.

This is what I thought when I first read the request.

Just make the image a hyperlink, linking to the fullsize image. Have the link open in a new window/tab, and you’ll be fine.

Something like:

<a href="larger image" target="_blank"><img src="thumbnail"></a>

NO! :mad: Don’t spawn new links, especially not for a photo gallery. Just open the link in the same window, like every other link. If God* had intended links to be opened in new windows, he would have made that the default action.

Popup links should only ever be used in exceptional circumstances. A photo gallery is not an exceptional circumstance. Popup links are confusing and irritating, particularly with the advent of tabbed browsing, where they too often open a new window rather than a new tab. Any vaguely competent web surfer can choose to open a normal link in a new window/tab if they want to, but only a small proportion of the Enlightened One Percent will be able to open a “target=_blank” link in the current window if they want to (after having found out the hard way that it’s a popup link, of course).

* In the context of the Internet, that is of course Sir TBL.
ie Opera users

Thanks but eek! those examples a bit too complex for me!
can anyone pls explain it in a more basic way ?

Plus what exactly is lightbox ?!

Many thanks!

hi, you could do this with…

pure css http://www.visibilityinherit.com/code/pure-css-lightbox.php
simple js http://www.visibilityinherit.com/code/popup.php
or a lightbox http://www.visibilityinherit.com/code/jquery-fancybox.php

The simple js example above is about as easy as it gets. This is pretty easy too. :hover instead of click though. http://www.visibilityinherit.com/code/css-popup-image2-example.php

For a disabled user… it can pretty much be like that. Popup windows where the end user has no say in the matter not only violates the end user’s ability to access information effectively, it’s highly intrusive and damaging to the end users experience (and often results in people not returning to your website). :slight_smile:

:lol: You make it sound like it’s a matter of life and death.

Good compendium of demos, Eric. Checked out the examples. You know the most interesting people… :slight_smile: