An introduction to the Photo Gallery

Quick 'n Easy Web Builder's Photo Gallery is a powerful tool to create amazing galleries. The gallery support titles, descriptions, frames, lightboxes, polaroid mode and much more! This tutorial gives an overview of some of the great features of the Photo Gallery with live examples.

Adding a gallery is very easy: just drag & drop the Photo Gallery object to the page, then double click it to add images.
Adding Titles
Each photo can have a title and description. You can enable 'Auto titles' to automatically assign titles to the images based on the filename or set the title manually: select the photo in the list and click 'Edit'. The description can have mulitple lines.

The Photo Gallery has different title modes and the font and colors can be customized.

Gallery Mode
The gallery mode specifies what happens when the user clicks on an image.

Open in the same browser window
The larger version of the image will be displayed in the same browser window.
Click here for a demo

Open in a new browser window
The larger version of the image will be displayed in a new browser window.
Click here for a demo

Open in a popup window
The larger version of the image will be displayed in a popup browser window. The popup window will have the size of the full image.
Click here for a demo

Open in another window
The larger version of the image will be displayed in another window. For example in an inline frame. You can specify the name of the target window in the Name field.
Click here for a demo

Light Box Gallery
If you select this option then clicking on one of the images will start a lightbox slideshow.
Click here for a demo

Quick 'n Easy Web Builder has several built-in lightbox scripts like slimbox, prettyphoto and fancybox. And you can download additional galleries/lightbox add-ons from the website:
http://www.quickandeasywebbuilder.com/free_extras.html



Frames
One of the great features of the Photo Gallery is the support for image frames, this includes several drop shadow effects.
Polaroid Mode
The Photo Gallery also has Polaroid mode' which uses CSS3 and has a few cool effects like rotated or variable sized polaroids.
To enable Polaroid mode select (Polaroid) as the frame style. For the best effect set the border width to 20 or more and use 'white' as the frame color. Also adding a little shadow will give it a more realistic effect. For more details about the available options please see the help.
Responsive Gallery
The Photo Gallery can be used in responsive layouts. When the thumbnail size is set to 'Responsive' the gallery can have a different number of columns in breakpoints! The images in the gallery will be responsively resized based on the gallery size. This means for example that when the gallery is inside a Layout Grid that it can be full width or use a percentage of the screen size width.

Click here for a demo

Download project file


More information
The photo gallery has lots of other cool features. Check out the help for more details.
Copyright 2017 Quick 'n Easy Web Builder
Follow us on:
Quick 'n Easy Web Builder News