Sridhar Katakam

Genesis and WordPress Tutorials

Medium-like fluid lightbox in WordPress using Fluidbox

by 12 Comments

Fluidbox is a jQuery script by Terry Mun for "opening images seamlessly in a lightbox on your page without interruption".

In this article I show how Fluidbox can be incorporated in WordPress.

Step 1

Upload fluidbox.css to your child theme's directory/css (create 'css' directory if not existing).

Ex.: wp-content/themes/genesis-sample/css/fluidbox.css

Step 2

Upload jquery.fluidbox.min.js to child theme's directory/js (create 'js' directory if not existing).

Ex.: wp-content/themes/genesis-sample/js/jquery.fluidbox.min.js.

Create a file named fluidbox-init.js in the same location having this code:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi there Sridhar,

    Thanks for this and all the other posts I check out without thanking you for 😉 I uss Foobox on my site but I really like the way this works in your video. Hoping I can get it to work as well as that on my site 🙂

    John

    Reply

  • Hei

    From going through it seems one has to add the fluidbox class to each and every image one plans to use this on.
    That is not very practical. It would be nice if you can also add a method for using Fluidbox for all images on the site.

    Thanks for adding the tutorial! I look forward to the extra tips.
    Perhaps also some code for customizing the popup as well.

    Paal Joachim

    Reply

      • Great! Thank you!

        Even though I am using the latest version I am wondering if anyone still has a problem with the image filling the viewport showing an image bigger then the original size of the image?

        Could you also include an example on using for instance the option viewportFill in the init file?

        Reply

  • What about making another blog post with other lightboxes? As it seems the approach would be fairly similar for these as well. It would be nice to have a almost generic way of adding a lightbox to a WordPress site. Be it colorbox, thickbox etc.

    Reply

  • Thanks Sridhar,

    I changed the line in fluidbox-init.js to:

    $(‘a’).fluidbox();

    Works perfectly for me, but I have a logo image in my header. Why .fluidbox-wrap appears like a container layer in my logo div? Logo link don’t work. I suppose z-index thing?

    Fluidbox in attachment/gallery link will be great, too 🙂

    Reply

  • Hi Sridhar,

    Do you know of any way to have a Pinterest ‘pinning’ system that would work with this? I started playing around with it for my wife’s blog and was wanting to find a way to use it but she wants a Pinterest system that I currently have via a plugin that also provides a lightbox type system with several social media links on the overlay.

    Thanks,

    John

    Reply
    • >