How to enlarge thumbnail images on click

Hello there there,
I will be about to start designing a few artists websites. I’m sure the basics of html and css, along with use dreamweaver.
However Concerning never made selection pages and wonder the way you get images to enlarge from a separate pop-up, as well as new blank site, when clicked
Can anyone guide me – the most effective way would be valued!
thanks, Amyjojo

You will find 2 JQuery methods that happen to be really nice.
LightBox along with PrettyPhoto

It is really all Javascripting in essence.

While you click on your thumbnail, it enlarges
and then you can do PREV and Close to slideshow them.

Here’s an idea, click on your photo…
Herndon Heald – jewelry – handmade – artisan

That particular uses PrettyPhoto.


Part 2 on this post…

Commonly, a photo gallery is performed using PHP/MySQL.
You then have a login page for the artist, and they upload their own photos,
as well as captions, titles, and many others. The PHP scripts squeeze photos in a
directory and help you save photo data inside the database.

2 gallery is seen, PHP is applied again to dynamically develop the page
of photos. It also makes the Javascripting it takes for PrettyPhoto.

Doing it without PHP requires you to edit the static HTML each and every time it changes.


A little different to what exactly you’ve asked, but I often start using a css image gallery whereby larger images surface temporarily when hovered around. I prefer this because it doesn’t mean planning to a new filter – also this css code won’t clash with my rotating images script (as Lightbox does).

In the event that interested, feel here you are at adapt the code at Web design Portfolio, Suffolk, One of a kind Websites

Note this is pretty flexible regarding how the graphics appear – I will be just in the operation of redesigning my personal portfolio page so somewhat larger thumbnail graphics appear below the other person, with a description towards the side and this enlarged images will likely appear to along side it.

This entry was posted in Web Design and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *