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.
Upload fluidbox.css to your child theme's directory/css (create 'css' directory if not existing).
Upload jquery.fluidbox.min.js to child theme's directory/js (create 'js' directory if not existing).
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 🙂
You are welcome.
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.
Try changing the line in fluidbox-init.js to
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?
Thanks Sridhar for this tip. Can you tell me how I can add the lightbox effect on only some images on my site? Only want images with a specific CSS class.
That is how it is currently set to work. Works only for those anchor tags that have a class of “fluidbox”.
Perfect! Didn´t se that, will try to implement it on my site now.
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.
I changed the line in fluidbox-init.js to:
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 🙂
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 for your post, is it possible to add fluid box to a menù item? Many thanks