12 December 2016

In WebWave - responsive webdesign application - lightbox is a type of a photo gallery in which you can see full size photo after clicking on its miniature.


Adding lightbox to a website
Lightbox size

Lightbox settings
Adding photos to lightbox
Removing photos from lightbox
Changing order of photos displayed in a lightbox


Adding lightbox to a website


To add lightbox element in a website click the corresponding icon in a toolbar on the left side of editor or drag this icon into editor window.



Then you can add photos that you want to be displayed in your lightbox from the media library. If the photos are not in the library yet, you can add them from your computer's drive.


Lightbox size


Adjusting size of lightbox


You can freely change size of lightbox element. Displayed photos will expand so they are spread symmetrically.

Minimum size of lightbox element is restricted by miniatures included.  In smallest size, whole miniatures are visible but they are squeezed together. If you want lightbox to be even smaller you can do so by decreasing the size of miniatures.


Lightbox miniatures size


After clicking on a lightbox additional box named “Lightbox size” will appear in bottom panel.

You can set here the width and height of miniatures. Dimensions are given in pixels.
You can also decide how will the miniatures be displayed in lightbox. You will do so by choosing “Fitting” option. “Crop” means that miniature will be cropped to fill whole lightbox. If you choose “Scale” option, the whole picture will be seen in miniatures but I may not fill whole box.

Lightbox setting


After clicking on lightbox, additional box named “Lightbox settings” will appear in bottom panel. You can set there following attributes:


  • Pictures in a row: defines how many picture will be displayed in a row. Pictures that will not fit in a first row will be moved to the following one.
  • Show title: defines if the titles will be displayed below photos.
  • Miniatures animation: After selecting this option photo miniatures will enlarge slightly on hover.


Adding photos to lightbox


To add photos to a lightbox select it and then click option “Edit”.




Photos are added to a lightbox through the media library. On top of newly opened window select “Media library” button. In the library select photos you wish to add and click “Add to lightbox” button.



You can read more about “Media library” here.


Removing photos from lightbox

To remove photo from lightbox select it and choose “Edit” option.


Select the photo you wish to remove. Then click “Don't show in this lightbox” in the “File details” panel on the right side.



Changing the display order of photos in a lightbox


In WebWave - responsive webdesign application - click a lightbox element in which you want to change the photos order. On the border of selected lightbox click the “Edit” button. In the new window simply drag and drop photos on the list to change its order in a lightbox.

GO BACK             

Lightbox - photo gallery



Copyright © 2011 — 2018

All Rights Reserved





Try - it's free