Blueimp Gallery: Implementing a clean photo gallery

  • By: Thomas Wilson
  • Published in Photography
  • On October 3, 2014

While developing this site I struggled through several different ways to display my photo galleries in a way that was user friendly on various platforms, whether it be a full desktop experience down to a mobile phone. While I am still tweaking the mobile responsiveness of my site, I settled on the Blueimp Gallery.

Blueimp Gallery

Blueimp gallery is a jQuery plugin with a stable CDN for easily grabbing the necessary js and css files required to implement it.  I incorporated it into this WordPress site by adding only a few lines to my functions.php file.  The first thing that needs to be done is initialize the js and css.  If you wrote a function to load your js and css you can add these lines before your theme js and css.

 

CSS

wp_enqueue_style( 'gallery', '//blueimp.github.io/Gallery/css/blueimp-gallery.min.css' );

Followed by your custom css:
wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css' );

JS

wp_enqueue_script( 'gallery_js', '//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js', array('jquery'), '', true);

Followed by your custom js:
wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery'), '', true);

Don’t forget to use the dependency flag in wp_enqueue_script so that wordpress knows jQuery is required for this plugin.

Next we need to add some lines to our theme js to initialize our photo gallery carousel.  I also wrote a content filter to use as a hook to automatically load the carousel whenever I insert images into a

from the WordPress media gallery.

blueimp.Gallery(
document.getElementById('gallery').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true,
hidePageScrollbars: false,
toggleControlsOnReturn: false,
toggleSlideshowOnSpace: false,
enableKeyboardNavigation: true,
closeOnEscape: false,
closeOnSlideClick: false,
closeOnSwipeUpOrDown: false,
disableScroll: false,
startSlideshow: true
}
);

There are a couple of important flags to note here in the js.  The first is the container.  When we write our content filter to add in the necessary HTML for the gallery this needs to match the ID of the parent div of the carousel.  Carousel also need to be marked as true.  Blueimp allows for different styles of image galleries, such as a lightbox, but I will just be covering the carousel.  All of the rest are pretty self explanatory.  I set the enableKeyboardNavigation to true so that users can advance the slideshow using the arrow keys.  I also set the startSlideshow to true so the slide show will scroll automatically on page load.  Feel free to customize to your own taste.

Now it’s time for the final touch.  This content filter goes into your WordPress theme’s functions.php file.  This will allow you to create the image gallery simply by creating a new post, inserting a <div id="gallery"></div> and nesting your images inside that div.  Two important things to note.  The img tags must be nested within a tags that include a link to the image file.  The jQuery plugin uses the a tags to dynamically grab the images for the carousel.

Content Filter

function img_class_filter($content) {
if ( strstr( $content, 'id="gallery"' ) ) {
$content = str_replace('data-gallery href=', 'data-gallery data-gallery href=', $content);
$content = "

" . $content;
}
return $content;
}

After that we need to add the filter that loads the function.

if ( !is_admin() ) {
add_filter('the_content', 'img_class_filter');
}

This function only loads the filter on the frontend side so that the content doesn’t get double filtered when we are entering it into the admin.  And that’s it.

Leave a Reply

About The Author

gravatar

Thomas Wilson

Faith drives me, I am merely a leaf blowing in the wind of God's breath. I am an amalgamation of creativity and technological expertise. It is my desire to create things that not only look beautiful but that function well. I work as a web developer for Our Daily Bread Ministries in Grand Rapids Michigan. I enjoy freelancing and would love to help you on your next digital project! I can help with everything from photography, video production, writing, and web design. Just contact me and we can discuss pricing and other details!

Testimonial
“Getting engaged or married in West Michigan? Consider AmorPhotograph for your photography needs!”
— Thomas Wilson
%d bloggers like this: