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 Feature Matrix (#)

Lightbox Included in Photonic? Size Auto-slideshow Deep-linking Social Sharing Touch Thumbnails
Colorbox
  • JS: 10KB
  • CSS: 5KB
×
Fancybox
  • JS: 16KB
  • CSS: 9KB
× × ×
Fancybox2 ×
  • JS: 23KB
  • CSS: 5KB
Image Lightbox
  • JS: 6KB
  • CSS: 5KB
× ×
LightCase
  • JS: 25KB
  • CSS: 16KB
×
Lightgallery
  • JS: 18KB
  • CSS: 20KB
  • Fonts: 20KB
  • + Additional Plugins
PrettyPhoto
  • JS: 23KB
  • CSS: 27KB
Strip ×
  • JS: 39KB
  • CSS: 13KB
× × ×
Swipebox
  • JS: 12KB
  • CSS: 5KB
× ×

Tweaks of various sorts have been made to some of the scripts such as PrettyPhoto (to support jQuery Tooltips), Swipebox (to support jQuery 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.

Work is underway to support several other lightbox scripts such as BlueImp, Featherlight, PhotoSwipe and Foobox.

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 WordPress.org 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:
    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 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>