netfriend's website helpers

EZ Gallery

Create a simple image gallery using CSS inspired by FrontPage 2003, with an optional lightbox powered by PhotoViewer.



Basic setup

Add the following code to your website's CSS.

Then you can create a gallery anywhere on your webpage with the following code.

Adding the lightbox

Instead of having your users go directly to the image in the browser, you can show your images in a lightbox. This gives everyone an easy way to look at, and move between, each image in your gallery. We're going to use PhotoViewer, a full-featured but easy to install script.

Copy and paste the following into the <head> of your page.

Copy and paste the following into a file called gallery.js:

Finally, copy and paste the following into your HTML, just above </body>.

Once you reload your page, every linked photo in your gallery will now open the expanded version in the lightbox, just like it does in the demo above.

You can, of course, save the PhotoViewer CSS and JavaScript files to your own webspace. Make sure to comply with the MIT license that it uses for copyright. It's easy to comply - just make sure that you don't remove the credits from the top of its CSS and JavaScript file.