Create a simple image gallery using CSS inspired by FrontPage 2003, with an optional lightbox powered by PhotoViewer.
Add the following code to your website's CSS.
Then you can create a gallery anywhere on your webpage with the following code.
- You can add as many images as you want. The CSS will look for
<img>tags and arrange them on the page.
horizontalin the class attribute if you want to use the horizontal style.
- You should create smaller thumbnail images to embed on your page as previews, to save everyone's bandwidth and make the gallery load faster. The hyperlink on that line can then go the larger image.
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
Finally, copy and paste the following into your HTML, just above
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.