Trying out EKKO lightbox

There is little information about this lightbox but the documentation seems good enough. A huge range of options can be found here. I am gonna enqueue the js and CSS files through my plugin.

I placed the js file in the footer to avoid the jquery not defined error.

According to the documentation I need to put this code somewhere on the page,

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
                event.preventDefault();
                $(this).ekkoLightbox();
            });

No problem. And wrap the image inside a tag with the following attribute:

data-toggle="lightbox"

The lightbox makes it so simple to have a different version of images for the pop up image. Simply change the href of the link and BAM on click you’ll get the different version. The good thing is that the image loads after clicking the link so large images only take time on-demand.

I have a problem with the images that are very tall. The lightbox attempts to display the whole image so this tall images would have a very thin width. Adding data-width attribute is supposed to work but so far it hasn’t. Furthermore, data-max-height and data-height aren’t useful either. I expected it to overflow the screen but it just expands as far as the screen.

Now I have two options. Either create another size using add_image_size and regenerate images – seems a little overkill – or try another plugin or script.

I am going to go the first one and regenerate images that I need

add_image_size( 'ekko-image', 600,600,array('center','top')) ;

It works as I want now but not the best solution I wanted. Maybe in the future, I find a plugin or something.

Leave a Reply

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