ImageLightbox.js WordPress Plugin

A few days ago I found Osvaldas Valutis’ awesome ImageLightbox.js on WebAppers.com and I just knew I had to have it on my recently “refurnished” little blog. I didn’t really had to make it into a plugin for WordPress, but oh well, I got carried away!

You can get it on the wordpress.org plugin section: wp-imagelightbox

It has no options at the moment, as I didn’t really need any. Will probably be adding them if the plugin proves popular enough to bother.

You can see it in action here on this blog (the actual plugin), or you can see the example of how ImageLightbox.js works on Osvaldas’ website.

Features:

  • No extra images loading from server! Everything is done with CSS animations
  • Next/Prev images by clicking the left or right side of the image
  • Keyboard navigation (left/right arrow)
  • Intuitive! Clicking outside of the image frame closes the lightbox. Also has a big close button in the corner
  • Support for left/right swiping navigation on touchscreens
  • Responsive! Works perfectly on mobile browers (phones, tablets) without any modification
  • LIGHT! 15kb in total!
  • M Hosch

    Thank you, ImageLightbox.js is indeed amazing … unfortunately for me the plugin doesn’t work, do i miss something. in the installation instructions it says “download & activate”. but nothing happens – neither on single images nor on galleries …

    thank you for your help,
    M

    • Could I see a page where this doesn’t work? I’m curious about the markup.

      • M Hosch

        hello,

        the page isn’t online yet – it is a WP 3.8.1 without any plugins but yours and i want to open links from a std. gallery, I don’t know if i can copy html code in here, lets see …

        in the theme i created some custom post types and the gallery is on one of them, but just for testing it didn’t work with a gallery in a usual post or page neither – the css in the header and the js in the footer get loaded on both pages though …

        thanks,
        M

        • M Hosch

          well, seems that copying html-code didn’t work,

          here it is …
          http://pastebin.com/d82D3vub

          • M Hosch

            alright, i found the error … seems like your plugin doesn’t load jquery on its own. a simple

            wp_enqueue_script(“jquery”);
            in the functions.php of the theme did the trick.
            nevertheless i think you should include it in future releases of the plugin.

            well, thanks for the plugin – works like a charm now 🙂

            M

          • Oh. Right. I didn’t really account for someone not having any other plugin than this. Thanks for the testing. I commited the changes (r3). It should be working now without any other plugin 🙂

  • fluxus

    Hello,

    thanks for the plugin.

    I had some problems to activate the plugin.
    After an hour of searching I found out, that the imagelightbox.min.js script was not loadet with the »wp_enqueue_script«.

    Reason for that was an missing wp_footer()-tag in my theme.
    I know – my mistake. Know I know, that the wp_footer()-tag is important.

  • LightPress

    The imagelightbox by osvaldas is my absolute favourite lightbox it looks so good on an iPhone. But i had a problem; sometimes the fotos were not centered in the lightbox, but on the left side. The problem disapeared when I loaded another jquery; instead of jquery-1.11.0.js I had to use jquery-1.10.1.js, problem solved. But now I found wp-imagelightbox (thanks for this WordPress Version: r3) and the exact same problem is there. Latest WordPress is using jQuery v1.11.0.js. So who do I call, Osvaldas, WordPress or you? Thanks for any advice

    • I’d say it’s a specific issue with Imagelightbox.js and that jQuery version.

      • LightPress

        It is WordPress v3.9 and I don’t think that I should tamper with the WordPress code, in the wp-includes/js/jquery/jquery.js

        There is no problem with the latest browsers Chrome, Firefox and iPhone, but only with IE9.

  • Ben Anggoro

    Hi Znuff, thanks for the post.
    I found the click-through doesn’t work on firefox, as well as if we’re clicking outside of the image nothing happened (suppose to be closed, works fine on chrome). I’ve looked over but I found nothing on this. It works fine with the dots though. It’s just looking great i dont feel like going back to fancybox and all that. Any idea why?
    Thanks

    • I just tested it now on Firefox and it seems to be working fine.

      Could you also try on Osvaldas’ website and see if his works fine? Maybe you have a Firefox addon that interferes with it? (I have a “clean” firefox profile without addons)

      • Oh ok then probably it’s just my Firefox. I have tried on Osvaldas’ website as well and same problem when im on firefox… I’ll have a look on it and see how it goes.
        Thanks! 🙂

  • Massa @ fruityoaty.com

    Awesome plugin! Unfortunately, it breaks HTML5 validation on my site (used to be 100% no errors on every page which I worked hard on).

    Basically, what happens on my site is this:
    Original, before plugin:
    After plugin:
    Problem: Forward slash appears before ‘data-imagelightbox’

    Expected result:

    I’m guessing it has something to do with this preg_replace code in wp-imagelightbox.php file:
    $pattern = “//i”;
    $replacement = ‘
    ‘;

    Unfortunately, I don’t know how to code well enough to fix it by myself. I found this other fantastic WordPress implementation of ImageLightbox.js in WordPress Plugins repository: https://wordpress.org/plugins/imagelightbox/
    It works great too and passes 100% HTML5 validation.

    I would rather use your plugin as it has better interface appearance/CSS.

    Please advise on how to fix. Thank you in advance. 🙂

    • Massa @ fruityoaty.com

      Weird… comments form stripped the forward slash
      In above “After plugin” text… plugin puts forwards slash in front of
      / data-imagelightbox=”f”>

      ( forward slash before data-imagelightbox=”f” )

      Not sure if the comments form will remove the forward slash again in this addendum reply.

      • Massa @ fruityoaty.com

        It’s OK… finally figured out how to make it 100% HTML5 validate on my site. Now, no errors.
        Modified these 2 lines in wp-imagelightbox.php :
        $pattern = “//i”;
        $replacement = ‘
        ‘;

        • Hey, sorry for not seeing your messages earlier, but I’m glad you figured out how to make it work.

          Unfortunately I can’t replicate your usage case. I don’t see a forward-slash appended in my output. I could only think that maybe another plugin on your blog is adding some weird markup which my regex doesn’t work with.

          I’ll have to investigate when I have time.

  • Daniel

    Hey! Awesome plugin!

    Do you know any way to destroy the imageLightbox instance and then initialize it again?
    I want to implement it on an infinite scroll website and I want to add the new images in the same gallery.

    Thanks!

    • You could simply just re-run the init function after you’re adding elements to the DOM:

      
      
        var d = 'a[data-imagelightbox="f"]';
        var v = jQuery(d).imageLightbox({
          onStart: function() {
            a(v, d);
            n();
            i(v)
          },
          onEnd: function() {
            l();
            r();
            u();
            s();
            t()
          },
          onLoadStart: function() {
            u();
            e()
          },
          onLoadEnd: function() {
            f(d);
            t();
            o()
          }
        })
      
      
      • Daniel

        Hey! Znuff I tried that, but that would just create another instance. I finally figured it out. You can reset all the instances of the lightbox by unbinding the ‘click’ event with jQuery’s .off(). Then, you can just re-initialize the lightbox:

        var selector = ‘a[data-imagelightbox=”f”]’;
        $(document).off(‘click’,selector);
        var instance = $(selector).imageLightbox({ … });

        Hope this will help others too! 🙂
        Cheers!

  • dan

    I tried to test ImageLightbox.js plugin and do not appears zoom button in the upper right and left-right arrows.
    Any idea what should be changed to appear buttons missing.

    • Hi.

      That version (well, this version that is running right here) is not yet published on the wordpress.org repository. I didn’t exactly have time to polish it more.

      I will try to make some time, soon.