As you may know, WordPress has an excellent Gallery management UI in post editor. It looks great in the back end but in the front end… I reckon that it is our jobs to do something about it.
When we have gotten a descent Gallery manager by default, why not making use of it? If we make plugins or theme we can benefit from what is already available in the genuine WordPress.
It makes a huge sense to use the WordPress Gallery manager in the back end and we prepare our own in the front end. Firstly it comes with WordPress by default. Making that sort of system with descent UI is expensive (a lot of labor intensive work and long term maintenance / support costs involved if you are going to manage all by yourself). Secondly it is better for users because there are less for them to do or think. As many except for certain developers are aware, end user ends up with using whatever they can find. Users would anything immediately available within their reach. But the developers are eager to implement their own UI and system often with their own brand identity. If the UI / UX is descent I would have no complaints. In the opposite case …. never mind.
So I uploaded an example demo plugin at github.
wordpress-lightbox-example by BeFive.Info
An example plugin to demonstrate how to adds lightbox (https://github.com/lokesh/lightbox2/) on linked images and genuine WordPress gallery.
What the plugin does is fairly simple. It enqueues necessary css and javascript files. So you could even copy and paste into functions.php of your theme. (do not forget to change the URIs of the script locations if you integrate the lines of enqueue script into your theme.)
What the javascript does is more important here.
This scripts add lightbox feature on images in the post / page content and WordPress Gallery in the front end.
The program logic is as follows:
- Find .gallery div elements and linked images in the document. (note: it searches all the linked images, which means that it could add lightbox on for example header logo in the navigation menu. To avoid this, narrow the selector scope. See in the comment in the code.
- Loop through each one of elements matched and add approproate attributes so that the lightbox works.
- Call lightbox for the matched element
You should be able to use any other lighttbox plugins. I chose the lokesh’s lightbox plugin because it came on the top of google search. The lokesh’s lightbox is made so well that it works as soon as you add appropriate attributes in right place, while some others needs extra steps and call jQuery plugin on each element you want to add on Lightbox.
The post Today’s Site Improvement:
Add Lightbox on any WordPress images appeared first on Befive.Info.