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

noun
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 (🔗)

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?

There are a variety of reasons for not including certain scripts as a part of Photonic:

• Licensing
  • Fancybox 2 is distributed under the CC-BY-NC 3.0 license. This is not compatible with GPL (Photonic’s license).
• Discontinued Scripts – These scripts were previously included with Photonic, but have now been removed. However, the code to support them is still included with the plugin.
  • Fancybox 1 was last updated on 11th November, 2010. That is a long time without updates! I understand that many themes still include it, but my recommendation would be to switch to Fancybox 3. In fact, if you were previously using Fancybox, Photonic will automatically switch you over to Fancybox 3. If your theme or another plugin uses it, you don’t have to do anything special in Photonic. If not, and you are feeling adventurous and you would like to install it by yourself, you can get a copy of the code from the linked website, and include the JS/CSS as per the instructions below.
  • Magnific Popup was last updated in Feb 2016. While not as old as Fancybox 1, the WordPress PLugins team believes that it is discontinued, probably because of the huge number of unresolved issues on GitHub. So it is no longer included with Photonic (replaced by VenoBox). If you still want to use it via your theme, you can include the JS/CSS as per the instructions below. If you want to use it independent of your theme, you can get the CSS and JS files from GitHub – you only need the jquery.magnific-popup.min.js and magnific-popup.css files.
  • Magnific Popup was last updated in Feb 2016. While not as old as Fancybox 1, the WordPress PLugins team believes that it is discontinued, probably because of the huge number of unresolved issues on GitHub. So it is no longer included with Photonic (replaced by VenoBox). If you still want to use it via your theme, you can include the JS/CSS as per the instructions below. If you want to use it independent of your theme, you can get the CSS and JS files from GitHub – you only need the jquery.magnific-popup.min.js and magnific-popup.css files.

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 the above.

If you have a theme or plugin not from WordPress.org that already includes the scripts above, 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, or whichever one you intend to use.
3. Then, for Non-bundled Lightbox JS, put in (assuming that you are going with Fancybox2):

   http://mydomain/link/to/jquery.fancybox.pack.js

   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:

   http://mydomain/link/to/jquery.fancybox.css

   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 a non-bundled lightbox!

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='https://www.youtube.com/watch?v=AAmCedDNGgU'>My YouTube video</a>
       <a href='https://youtube.com/embed/AAmCedDNGgU'>My YouTube video</a>
       <a href='https://youtu.be/AAmCedDNGgU'><img src='https://my-cool-domain/placeholder.png'/></a>
       
       <a href="http://vimeo.com/29193046">Vimeo Test</a>
       <a href="https://player.vimeo.com/video/29193046">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:

       https://www.youtube.com/watch?v=AAmCedDNGgU

       … 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='https://photos.smugmug.com/Travel/Asia/China/i-xhrhpkj/0/51e59104/1920/MVI_0206-1920.mp4'>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="https://photos.smugmug.com/Travel/Asia/China/i-xhrhpkj/0/51e59104/1920/MVI_0206-1920.mp4"][/video]