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 – Swipebox, PrettyPhoto, Colorbox and Fancybox. In an upcoming release the support is going to be extended to ImageLightbox, Lightcase, BlueImp, Featherlight and Foobox.

But what if you are using a non-GPL premium theme or plugin, or even another plugin that doesn’t use any of these lightboxes? 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 Fancybox2, 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 http://wordpress.org that already includes Fancybox2, you are good to go. However, if you simply want to use the script by downloading it because you don’t like the bundled lightboxes, follow these steps:

  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!