Third-Party Lightboxes

One of the goals with Photonic has been interoperability with themes and other plugins. To serve that goal, it comes armed with support for quite a few lightboxes. Many lightboxes are bundled within Photonic by default, while a few others, though supported, cannot be bundled due to licensing restrictions.

Lightbox? What is that? (🔗)

The term “lightbox” has its origins in photography:

light box
a boxlike object having a uniformly lighted surface, as of ground glass, against which films or transparencies can be held for examination.
Source: Random House Unabridged Dictionary

In web-parlance the definition is similar:

Lightbox is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page

Source: Wikipedia

Essentially, a lightbox script introduces a behaviour wherein when you click on a thumbnail or image on a website, it opens up on the same screen in a large size, dimming out the rest of the content. Good lightbox scripts allow gallery support (where you can navigate between photos in a group) and mouse-based, keyboard-based and touch-based navigation within a gallery. Advanced scripts offer a lot of additional features such as thumbnail display, video support, auto-looping, transition effects between images and so on.

Lightbox Feature Matrix (🔗)

Social Sharing
YouTube, Vimeo etc.
Videos from Flickr etc.
Self-hosted videos
Pure JS Lightboxes

  • JS: 10KB
  • CSS: 4KB
× × ×

  • JS: 9KB
× ×
“Gie” Lightbox (GLightbox)

  • JS: 52KB
  • CSS: 14KB
× ×

  • JS: 18KB
  • CSS: 20KB
  • Fonts: 20KB
  • + Extra Plugins

  • JS: 41KB
  • CSS: 16KB
× [4] ×

  • JS: 10KB
  • CSS: 11KB
jQuery-Based Lightboxes

  • JS: 10KB
  • CSS: 5KB

  • JS: 16KB
  • CSS: 9KB
× × [1] ×
Fancybox2 [2]

  • JS: 23KB
  • CSS: 5KB

  • JS: 61KB
  • CSS: 14KB

  • JS: 13KB
  • CSS: 5KB
× [3] ×
Image Lightbox

  • JS: 6KB
  • CSS: 5KB
× × × × ×

  • JS: 25KB
  • CSS: 16KB
Magnific Popup

  • JS: 20KB
  • CSS: 7KB
× ×

  • JS: 23KB
  • CSS: 27KB

  • JS: 39KB
  • CSS: 13KB
× × × × ×

  • JS: 12KB
  • CSS: 5KB
× ×

  1. Videos from Google Photos are not supported. They work for Fancybox2 and Fancybox3 though.
  2. Not bundled with Photonic. See next section.
  3. If you have a mixed gallery with photos and videos from Google Photos, transitioning between them does not work. Galleries with only photos or only videos work fine, and galleries from other sources work fine.
  4. Videos from Flickr are not supported.

Tweaks of various sorts have been made to some of the scripts such as PrettyPhoto (to support tooltips), Swipebox (to support tooltips) and Image Lightbox (to fix a rather broken, though extremely lightweight script). In addition:

  • All scripts have been made touch-friendly if they weren’t.
  • Deeplinking and social sharing has been added to almost all the scripts.

Non-Bundled Lightbox Support (🔗)

But what if you are using a non-GPL premium theme or plugin, or even another plugin that doesn’t use any of bundled lightboxes? To wit, what if you are using Fancybox2 or Strip from the list above? As a developer it is not possible for me to write generic code to support all flavours of lightboxes, however Photonic currently has pre-written code to support these two, and work is underway to support iLightbox. The reason these scripts are not bundled in Photonic is because neither is licensed under GPL.

If you have a theme or plugin not from that already includes Fancybox2 (or Strip), follow the first two steps below. If your theme / other plugins don’t include a script and you want to use it by downloading it because you don’t like the bundled lightboxes, follow steps 3 onward in addition:

  1. In your WP Dashboard navigate to Photonic → Settings → Generic Options → Generic Settings. For Inbuilt Lightbox libraries pick Non-bundled (You have to provide the JS and CSS links).
  2. On the same settings page, for Non-bundled Lightbox libraries select FancyBox 2.
  3. Then, for Non-bundled Lightbox JS, put in:

    Obviously, http://mydomain/link/to/ is the path to the Fancybox2 JS file, which you can download from the Fancybox2 site.

  4. If you wish to use certain advanced features that Fancybox2 offers (a.k.a. Helpers), you can add those in new lines in the above. Photonic has built-in support for the thumbnails helper.
  5. Next, for Custom Lightbox CSS, put in:

    As in the previous case, you can download this file from the Fancybox2 website, and you can add additional skins as CSS.

That’s really it. Once you save the settings, you are good to go with Fancybox2!

Lightboxes for Non-Photonic Images (🔗)

Photonic gives you the option of using its lightbox for non-Photonic images as well. This obviates the need for a separate lightbox plugin, and also keeps the look-and-feel consistent across your site. To activate this, go to Photonic → Settings → Generic Options → Generic Settings → Photonic Lightbox for non-Photonic Images and select that option. In all cases where an image is encased within an <a> tag, Photonic will convert it to a lightbox-enabled link. The lightbox used is the one you have selected for your Photonic galleries.

What if you wanted to group photos together for your lightbox, like a pseudo-gallery? You can use the rel attribute of your <a> tag for this purpose. If your lightbox is Fancybox, or Colorbox, or Swipebox, pretty much any name for your groups works, so you could name your rel attributes thus:

	<a href='image1.jpg' rel='group1'><img src='image1-thumb.jpg' /></a>
	<a href='image2.jpg' rel='group1'><img src='image2-thumb.jpg' /></a>
	<a href='image3.jpg' rel='group1'><img src='image3-thumb.jpg' /></a>

	<a href='image4.jpg' rel='group2'><img src='image4-thumb.jpg' /></a>
	<a href='image5.jpg' rel='group2'><img src='image5-thumb.jpg' /></a>
	<a href='image6.jpg' rel='group2'><img src='image6-thumb.jpg' /></a>

If you have picked PrettyPhoto as your lightbox, you will need a little bit of special handling for the rel attribute:

	<a href='image1.jpg' rel='photonic-prettyPhoto[1]'><img src='image1-thumb.jpg' /></a>
	<a href='image2.jpg' rel='photonic-prettyPhoto[1]'><img src='image2-thumb.jpg' /></a>
	<a href='image3.jpg' rel='photonic-prettyPhoto[1]'><img src='image3-thumb.jpg' /></a>

	<a href='image4.jpg' rel='photonic-prettyPhoto[2]'><img src='image4-thumb.jpg' /></a>
	<a href='image5.jpg' rel='photonic-prettyPhoto[2]'><img src='image5-thumb.jpg' /></a>
	<a href='image6.jpg' rel='photonic-prettyPhoto[2]'><img src='image6-thumb.jpg' /></a>

Lightboxes for Videos (🔗)

The Lightbox Feature Matrix says that most lightboxes support videos.

  1. For videos that are a part of albums / photosets / galleries from Flickr / Picasa / SmugMug / Zenfolio / Instagram you have to do pretty much nothing. Just make sure that your videos are getting pulled. You can do this in two different ways:
    • You can configure the settings: Photonic → Settings → <Photo service><Photo service> Settings → Media to show, where <Photo service> is either Flickr or Picasa or SmugMug or Zenfolio or Instagram.
    • Regardless of the setting above you can pass the media parameter to a shortcode. The media parameter takes 3 values: photos (to show photos only), videos (to show videos only) and all (to show both photos and videos). The following is the typical usage:
      [gallery type='google' user_id='sayontan' album='6354351428035793137' max_results=30 media='all']

      Please refer to the individual demo pages for more examples.

  2. For videos coming from YouTube / Vimeo:
    • Select the option Photonic → Settings → Generic Options → Generic Settings → Photonic Lightbox for non-Photonic videos (YouTube / Vimeo etc.).
    • Create a YouTube / Vimeo link the way you would create a regular link:
      • For YouTube regular links, embed links and short-links are all supported. For Vimeo regular and embed links are supported. So create a link in any of these formats:
        <a href=''>My YouTube video</a>
        <a href=''>My YouTube video</a>
        <a href=''><img src='https://my-cool-domain/placeholder.png'/></a>
        <a href="">Vimeo Test</a>
        <a href="">Vimeo Embed</a>

        Photonic will automatically associate a lightbox with this.

      • The following shows the behaviour above:
        Exotic delicacy
      • Note that WP’s inbuilt way of simply pasting a YouTube / Vimeo link will still show a video on the site itself. So, simply pasting this line:

        … will result in an embedded video:

        The above is untouched by Photonic.

  3. For videos hosted on your site or elsewhere on the web:
    • Select the option Photonic → Settings → Generic Options → Generic Settings → Photonic Lightbox for non-Photonic videos (YouTube / Vimeo etc.).
    • Create a link to the video the way you would create a regular link:
      <a href=''>Custom Video - External</a>

      The above results in the following:
      Custom Video – External

    • Note that WP’s inbuilt way of embedding an HTML5 video on your website works using the native [video][/video] shortcode:
      [video width="1920" height="1080" mp4=""][/video]