This tutorial explains how to create and display the FlexGrid Lightbox.

  1. Read and follow installation instructions: Installation.
  2. Create an Image Collection.
  3. Set image upload options.
  4. Upload images.
  5. Create FlexGrid Lightbox.
  6. Set Lightbox options.
  7. Copy the FlexGrid Lightbox shortcode to your page or post.
  8. Preview the page.



2. Create an Image Collection

An image collection is a source of all images for your FlexGrid Lightbox.

You'll use the collection to add, remove and set order of images.

  1. Go to Image Collections > Add New.
  2. Enter collection name.
  3. Click Save.
  4. Collection screen will open.

Add new image collections FleGgrid Lightbox



3. Set Image Upload Options

  • FlexGrid Lightbox requires two sets of images: large and thumbnails.
  • Thumbnails will display as a FlexGrid gallery.
  • The large images are used by a lightbox.
  • All thumbnails have to have the same height.
  • Lightbox images can have different sizes.


Customize Image Collection options before uploading any images.

  1. Click Options tab if not already opened.
  2. Large images > Resize Images on Upload: Checked.
  3. Large images > Width: 900, Height 600, Fixed Dimension: No. Quality 90%.
  4. Thumbnails > Width: 0, Height 300, Fixed Dimension: Yes. Quality 70%.
  5. Click Save.


collection options


4. Upload Images

Upload a couple of test images.

  1. Click tab Image Uploader.
  2. Click Select Files.
  3. Select a few images. Images have to be 900×600 pixels (WxH) or larger.
  4. Click Upload Images.
  5. Upload will start. Wait until all images are uploaded.




Upload in progress. Do not close browser window until all images are processed.




5. Create FlexGrid Lightbox

  1. Go to FlexGrid Lightbox > Gallery Light> Add New.
  2. Enter title.
  3. Go to Images Collection
  4. Select the collection you've created in step 2.
  5. Select Grid and Lighbox image sizes.
  6. Save.


FlexGrid Lightbox Add New


WordPress plugin FlexGrid Lightbox Add New Options


7. Add the Shortcode to a Page or a Post

To add FlexGrid Lightbox to a page or a post copy the shortcode and paste it into the post content area.

  1. Create a new page or a post.
  2. Copy the shortcode from the FlexGrid Lightbox screen.
  3. Paste it into your the post content area.
  4. Save page.
  5. Preview page.


FlexGrid Lightbox Copy Shortcode



8. Preview the FlexGrid Lightbox

  1. Open the page or post you've added the shortcode to.
  2. Click on any thumbnail.


WordPress plugin FlexGrid Lightbox preview