Best Recommendable Jquery Gallery Plugin – Galleria

Recently my client asked to implement gallery in a project which has following functionalities

1. Beside gallery slideshow, if clicked on gallery main image it should pop out a bigger images gallery as well.
2. It should also display title and description of the image.
3. Should be responsive as well.
4. Can work in overlay as well.

And the best option that I could find for this and will always use in future was Galleria plugin(http://galleria.io/) which gives one totally free awesome theme too to use.

Its implementation is very simple, just download the plugin and see the usage in classic theme folder.

Issues Faced While Implementing

Open Bigger Image When Clicked On Gallery Main Image

With classic theme code sample file for implementation, you won’t find the code for implementing this functionality.

The simple code for running galleria plugin is to use following line

But in order to implement the functionality for opening bigger image when clicked on gallery main image, I had to add following option

Didn’t Work For Second Time On Overlay

I faced only couple issues while implementing. I had to open gallery in overlay/popup therefore gallery plugin was working only first time when opened in overlay and whenever it was opening for the second time, gallery wasn’t working as required. The correction was simple and I moved the line from inside the overlay file to header part of the main template file and it worked like a charm.

Bigger Thumbnails

Thumbnails were very small and client asked for bigger one instead, so the best solution I found out was to update galleria.classic.css according to following rules defined in comments of following code.

And thas all I had to do and implemented the very charming working photogallery.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">