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.