Responsive Lightbox

Since responsive is so important, we wanted to carry over the responsive functionality to every possible part of this theme. Fortunate for you, this included the amazing iLightBox software. A $13 value, iLightBox ensures that your lightbox images look great (and respond) on all devices. It is included for free with your purchase of X.

Horizontal With Thumbnails

  • Example
  • Example
  • Example
  • Example
[block_grid type="two-up"] [block_grid_item] [image class="my-portfolio" src="https://yourdomain.com/image.jpg" alt="Example" type="thumbnail" link="true" href="https://yourdomain.com/image.jpg" title="Example Image"] [/block_grid_item] [block_grid_item] [image class="my-portfolio" src="https://yourdomain.com/image.jpg" alt="Example" type="thumbnail" link="true" href="https://yourdomain.com/image.jpg" title="Example Image"] [/block_grid_item] [block_grid_item] [image class="my-portfolio" src="https://yourdomain.com/image.jpg" alt="Example" type="thumbnail" link="true" href="https://yourdomain.com/image.jpg" title="Example Image"] [/block_grid_item] [block_grid_item] [image class="my-portfolio" src="https://yourdomain.com/image.jpg" alt="Example" type="thumbnail" link="true" href="https://yourdomain.com/image.jpg" title="Example Image"] [/block_grid_item] [/block_grid]
[lightbox selector=".my-portfolio" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"]

Vertical Without Thumbnails

  • Example
  • Example
  • Example
  • Example
[block_grid type="two-up"] [block_grid_item] [image class="my-second-portfolio" src="https://yourdomain.com/image.jpg" alt="Example" type="thumbnail" link="true" href="https://yourdomain.com/image.jpg" title="Example Image"] [/block_grid_item] [block_grid_item] [image class="my-second-portfolio" src="https://yourdomain.com/image.jpg" alt="Example" type="thumbnail" link="true" href="https://yourdomain.com/image.jpg" title="Example Image"] [/block_grid_item] [block_grid_item] [image class="my-second-portfolio" src="https://yourdomain.com/image.jpg" alt="Example" type="thumbnail" link="true" href="https://yourdomain.com/image.jpg" title="Example Image"] [/block_grid_item] [block_grid_item] [image class="my-second-portfolio" src="https://yourdomain.com/image.jpg" alt="Example" type="thumbnail" link="true" href="https://yourdomain.com/image.jpg" title="Example Image"] [/block_grid_item] [/block_grid]
[lightbox selector=".my-second-portfolio" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="vertical" thumbnails="false"]

Options

  • selector: the selector used to activate the lightbox. Best use comes from adding a class on the links of all images you want to use, for example, “my-lightbox.” Next, you would simply write “.my-lightbox” in this field (the included period denotes a class selection).
  • deeplink: set to “true” to allow for deeplinking. Deeplinking provides direct individual links to each lightbox image.
  • opacity: opacity of the background. Acceptable values rage anywhere between 0 and 1.
  • prev_scale: the scale of the previous image. Acceptable values range anywhere between 0 and 1.
  • prev_opacity: the opacity of the previous image. Acceptable values range anywhere between 0 and 1.
  • next_scale: the scale of the next image. Acceptable values range anywhere between 0 and 1.
  • next_opacity: the opacity of the previous image. Acceptable values range anywhere between 0 and 1.
  • orientation: “horizontal,” or “vertical.”
  • thumbnails: set to “true” to allow thumbnail navigation.