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/
