How to Turn WordPress Gallery Into Slideshow

The gallery shortcode was introduced when the WordPress was still version 2.5. To put it straight, a post or a page with a gallery in Twenty Eleven theme looks like this:

Kinda plain, right? So, how about a page with a gallery on the same theme look like this?

You want to make this happen, right? Let’s get started on how to turn a plain gallery into an awesome slideshow without using a slideshow plugin. In other words, this will be integrated to a theme. I will use Twenty Eleven theme as an example for the tutorial. If you use the other theme, keep an eye on the codes where it can be placed on the file accordingly.
Target Audience

This article is intended to the people who have knowledge in WordPress theme development, HTML, PHP, CSS, and Javascript using jQuery framework.
Requirements

jQuery Cycle Plugin. Get this script from jquery.malsup.com. Get this file in ZIP format, it contains the examples and the script itself.
Any WordPress Theme. Any WordPress theme will do for the modification. Like I said before, I will use Twenty Eleven theme as an example.

Step 1: Directory Structure Changes

Actually, more on adding files. Under twentyten folder, go to the folder called js. Download the jQuery Cycle Plugin and extract the files. Inside the contents of the extracted file, put the jquery.cycle.all.min.js to twentyten > js folder. Rename jquery.cycle.all.min.js to jquery.cycle.js for easy reference.
Next, still under js folder, create a file called gallery.js. We will add the code later on.

Step 2: File Modifications

Open the functions.php file under twentyeleven folder. Insert the following code at the end of the line (after add_filter function to add classes in <body> tag).

function twentyeleven_enqueue() {
 if (is_singular()) {
  wp_enqueue_script('jquery');
  wp_enqueue_script('jquery-cycle', get_template_directory_uri() . '/js/jquery.cycle.js');
  wp_enqueue_script('post-format-gallery', get_template_directory_uri() . '/js/gallery.js');
 }
}
add_action('the_post', 'twentyeleven_enqueue');

The reason why I should put a condition is for performance reason: prevent unnecessary files if the page is not a single post or a page.
Next, open the gallery.js file under twentyeleven > js folder. Insert the following code.

function tutorial_create_slideshow() {
 
 // Remove the HTML tags generated in the gallery.
 jQuery('.single-format-gallery style').remove();
 jQuery('.gallery br').remove();
 
 // Wrap the gallery.
 jQuery('.gallery').wrap('<div class="gallery-wrap">');
 
 // Add the slideshow controller.
 jQuery('.gallery-wrap').append('<div id="slideshow-controller"><span id="jqc-pages"></span></div>');
 
 // Add the controls.
 jQuery('#slideshow-controller').prepend('<button class="dir-button dir-button-l" id="jqc-prev" href="#">Prev</button>');
 jQuery('#slideshow-controller').append('<button class="dir-button dir-button-r" id="jqc-next" href="#">Next</button>');
 
 jQuery('.gallery').cycle({
  fx                : 'fade',
  speed             : 1000,
  timeout           : 3000,
  cleartypeNoBg     : true,
  activePagerClass  : 'jqc-active',
  pager             : '#jqc-pages',
  prev              : '#jqc-prev',
  next              : '#jqc-next',
  pause             : true,
  pagerAnchorBuilder: function (index,elem) {
   return '<button class="jqc-button jqc-button-pages" id="jqc-button-' + index + '" value="' + index + '"><span>' + (index+1) + '</span></button>';
  }
  });
}
 
jQuery(document).ready(function() {
 jQuery.noConflict();
 tutorial_create_slideshow();
});

And finally, open the style.css, under twentyeleven folder, and add the following code at the end of the line:

#content .gallery-wrap {
 margin: 0 0 1.625em 0;
 width: 100%;
}
#content .gallery {
 margin: 0;
 width: 100%;
}
#content .gallery-item {
 width: 100%;
 height: 300px;
 position: relative;
}
#content .gallery-item .gallery-icon {
 width: 100%;
 height: 300px;
 overflow: hidden;
}
#content .gallery-item .gallery-icon img {
 border: 0 none;
 padding: 0;
 max-width: 100%;
}
#content .gallery-item .gallery-caption {
 position: absolute;
 top: 7px;
 left: 7px;
 padding: 1em;
 background: rgba(255, 255, 255, 0.9) none;
 max-width: 260px;
}

The CSS code is just for a start. Feel free to modify the codes when needed.

Final Step

In order to get the slideshow working, you have to create a gallery inside the page or post. The gallery shortcode should be look like this:

[ gallery size="large" ]

By the way, when you copy the above code, remove the space after left square bracket ([) and before right square bracket(]). I set the image size to large to make the slideshow more presentable. It will be preposterous if you set the size to thumbnail.
And you can see the gallery in action.

source: http://www.paddsolutions.com/turn-wordpress-gallery-into-slideshow/

How to Turn WordPress Gallery Into Slideshow

0 comments:

Post a Comment

Entri Populer