{# Settings #} {% set root = "../../" %} {% set mainNavActive_1 = "shortcodes" %} {% set sidebarNavActive_1 = "shortcode-base-lightbox-options" %} {% set title = "Lightbox Options" %} {% include "html/assets/include/nunjucks/partials/head.njk" %} {% include "html/assets/include/nunjucks/partials/core-fonts.njk" %} {% include "html/assets/include/nunjucks/partials/core-css.njk" %} {% include "html/assets/include/nunjucks/partials/core-icons.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-showcode.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
{% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-shortcode-nav.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/page-title/shortcode-page-title/shortcode-page-title-base.njk" %}

Lightbox Types

Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit.

Lightbox Single Image

Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode1" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Lightbox Gallery (without thumbnails)

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode2" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Lightbox Gallery (with thumbnails)

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode3" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Lightbox Gallery (with hidden images)

Image Description
Image Description
Image Description 3+
view photos
{% set contentTarget = "#shortcode4" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Lightbox Gallery (with hidden videos)

Image Description 2
videos
{% set contentTarget = "#shortcode5" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Additional Lightbox Types

Open Form Open Video Open Google Map
{% set contentTarget = "#shortcode6" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Popup Animations

Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit.

FlipInX/FlipOutX

Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode7" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

FlipInY/FlipOutY

Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode8" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

BounceInRight/ BounceOutLeft

Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode9" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

BounceInRight/ BounceOutRight

Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode10" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

BounceInDown/ BounceOutDown

Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode11" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

ZoomIn/ZoomOut

Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode12" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

FadeInRightBig/ FadeOutLeftBig

Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode13" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

FadeInDownBig/ FadeOutDownBig

Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode14" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

LightSpeedIn/ LightSpeedOut

Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode15" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

RotateIn/RotateOut

Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode16" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

SlideInUp/SlideOutUp

Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode17" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

SlideInLeft/ SlideOutRight

Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode18" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

RollIn/RollOut

Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode19" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Examples

Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit.

With Icon

Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode20" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode21" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

With Hover Effect

More block hover effects – shortcode-blocks-block-hovers.html

Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode22" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
Image Description
Image Description
Image Description
{% set contentTarget = "#shortcode23" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
{% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
{% include "html/assets/include/nunjucks/partials/blocks/modals/modal-markup.njk" %} {% include "html/assets/include/nunjucks/partials/core-js.njk" %} {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %} {% include "html/assets/include/nunjucks/partials/js/js-jquery-ui-core.njk" %} {% include "html/assets/include/nunjucks/partials/js/js-show-code.njk" %}