Medium-like fluid lightbox in WordPress using Fluidbox

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:

1 2 3
jQuery(function( $ ){
$('a.fluidbox').fluidbox();
});
view raw fluidbox-init.js hosted with ❤ by GitHub

Step 3

Add the following in child theme’s functions.php:

1 2 3 4 5 6 7 8 9 10 11 12
<?php
//* Do NOT include the opening php tag
 
//* Enqueue Fluidbox
add_action( 'wp_enqueue_scripts', 'enqueue_fluidbox' );
function enqueue_fluidbox() {
 
wp_enqueue_style( 'fluidbox-css', get_bloginfo( 'stylesheet_directory' ) . '/css/fluidbox.css', array(), CHILD_THEME_VERSION );
wp_enqueue_script( 'fluidbox', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.fluidbox.min.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'fluidbox-init', get_stylesheet_directory_uri() . '/js/fluidbox-init.js', array( 'fluidbox' ), '1.0.0', true );
 
}
view raw functions.php hosted with ❤ by GitHub

Step 4

We have set Fluidbox to look for and work on any images that are linked to anchor element having a class of fluidbox. You can add more selectors (comma separated) in fluidbox-init.js if you wish.

Sample HTML in a Page/Post/widget:

1
<a href="http://genesis.dev/wp-content/uploads/2014/04/88H.jpg" class="fluidbox"><img src="http://genesis.dev/wp-content/uploads/2014/04/88H-300x107.jpg" alt="88H" width="300" height="107" class="aligncenter size-medium wp-image-1540" /></a>
view raw sample.html hosted with ❤ by GitHub

That’s it!

Need help implementing this tutorial? Click on the image below to contact me.

Genesis Customizations Service by Sridhar Katakam

Stay up to date

Get tips on Genesis, WordPress, Web design & more

Join 411 other subscribers

Donate

Found this article helpful?

Comments

  1. says

    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

  2. says

    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

      • says

        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?

  3. says

    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.

  4. Javier Sanz says

    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 :)

  5. says

    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

Need help implementing this tutorial? Click on the image below to contact me.

Genesis Customizations Service by Sridhar Katakam

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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>