In website builder WebWave lightbox is similar with functionality to a photo gallery. The difference between them is that photos are presented in slightly another way. In this tutorial you will find out how to make a website with an effective lightbox.
Change photos order in lightbox
Add lightbox to your website
In order to add lightbox to your website, select Image icon from the toolbar on the left side of the builder and choose the last icon.
Next click right mouse button on lightbox then choose option "Change images". From "My images and files" select pictures that you want to show up on lightbox by clicking on them and clicking Add to images grid. If they are not in "My images and files" yet, add them from your hard drive by clicking "Select files" on right top corner of Images menager.
Change lightbox size
Change lightbox size the way you want to and photos will proportionally and symmetrically follow.
Lightbox minimum size is only limited by its thumbnails. By setting the smallest lightbox size all the thumbnails become visible but there is no space between them. If you want your lightbox to be even smaller, change thumbnails size.
Change lightbox thumbnails size
After clicking on your lightbox you will able to set in pixels lightbox's thumbnails width and height through the "Lightbox size" section in the "Element settings panel".
You can also choose the way thumbnails will be displayed in the lightbox. Choose crop type. "Crop" means that an image will fully fit the lightbox and will get cropped. "Fit" means that the whole thumbnail will be displayed but it might not fill out the whole space.
Lightbox settings
After clicking on lightbox you will see "Lightbox settings" in the Settings panel.
You can set there:
- Images in a row - shows how many images displayed are displayed in a row.
- Image spacing - shows the vertical and horizontal distance from one image to another image
- Show titles - indicates whether the titles should be displayed under the photos.
- Thumbnails animation - after ticking that box lightbox thumbnails will slightly enlarge when a user hovers over them.
- No image compression - after ticking that option the lightbox photos will not be compressed when published.
Layout
You can also change the layout of your image lightbox in the item settings. You can choose between:
-
Fluid - you can change the distance between elements and the height of the images
-
Masonry vertical - you can change the space between the images and the appearance by changing the order of the images
-
Classic layout
Add photos to lightbox
In order to add photos to lightbox, click on it and select "Edit content" from Imgae grid settings in Settings panel.
On the top of a new window select "Media library", choose photos and press "Add lightbox" at the bottom of the window.
More about media library read here.
Removing photos from lightbox
In order to remove photos from lightbox, click on it and select "Edit content".
Select a picture which needs to be removed and in "File details" choose "Remove from lightbox".
Change the photos order in lightbox
Click on lightbox and select "Change content.
In this window select a photo, drag and drop it in a place where you want it to be.
Click action on single image
Select the Lightbox, and then in the "Edit" section, select "Image".
Click on the specific image which you want to set the click action, then in the settings panel go to the "Click action (link)" section and select the action you are interested in.
Lightbox
Our free Website Builder lets you create amazing websites effortlessly. You can build your website from scratch, start with a blank page or choose various templates from our free collection and modify it according to your needs. With WebWave you have a free design software at your fingertips.
Find us online
Website builder.
Offerings.
Help docs.
Company.