So we all know that WordPress has created a new nice system for managing and displaying galleries eliminating need for third party plugins.
So how can we use it – let’s try to use nice Galleriffic jQuery plugin as an output. Our ambition here is minimally tweaking code and implementing everything in Javascript and css.
WordPress 3.5 gallery has currently several limitations. It’s main html generating function is not properly hookable and it uses <dt> and <dl> tags for organizing thumbnails.
But there is a solution and here is a quick howto
1. Download Galleriffic
http://www.twospy.com/galleriffic/. To get quick startup, download the one with examples, so you can make use of existing styles and graphics.
Note: you still should build your own css later.
2. Unpack it to your theme directory
In current example a galleriffic-2/ directory is created in theme directory root
3. Add following css to your style.css
div.content {
/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
display: none;
float: right;
width: 550px;
}
div.content a, div.navigation a {
text-decoration: none;
color: #777;
}
div.content a:focus, div.content a:hover, div.content a:active {
text-decoration: underline;
}
div.controls {
margin-top: 5px;
height: 23px;
}
div.controls a {
padding: 5px;
}
div.ss-controls {
float: left;
}
div.nav-controls {
float: right;
}
div.slideshow-container {
position: relative;
clear: both;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
position: absolute;
top: 0;
left: 0;
background-image: url('loader.gif');
background-repeat: no-repeat;
background-position: center;
width: 550px;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div#slideshow {
position:relative;
height:500px;
}
div#slideshow span.image-wrapper {
display: block;
position: absolute;
top: 0;
left: 0;
}
div.slideshow a.advance-link {
display: block;
width: 550px;
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
text-align: center;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
text-decoration: none;
}
div.slideshow img {
vertical-align: middle;
border: 1px solid #ccc;
}
div.download {
float: right;
}
div.caption-container {
position: relative;
clear: left;
height: 75px;
}
span.image-caption {
display: block;
position: absolute;
width: 550px;
top: 0;
left: 0;
}
div.caption {
padding: 12px;
}
div.image-title {
font-weight: bold;
font-size: 1.4em;
}
div.image-desc {
line-height: 1.3em;
padding-top: 12px;
}
div.navigation {
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbs {
clear: both;
margin: 0;
padding: 0;
}
ul.thumbs li {
float: left;
padding: 0;
margin: 5px 10px 5px 0;
list-style: none;
}
a.thumb {
padding: 2px;
display: block;
border: 1px solid #ccc;
}
ul.thumbs li.selected a.thumb {
background: #000;
}
a.thumb:focus {
outline: none;
}
ul.thumbs img {
border: none;
display: block;
}
div.pagination {
clear: both;
}
div.navigation div.top {
margin-bottom: 12px;
height: 11px;
}
div.navigation div.bottom {
margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
display: block;
float: left;
margin-right: 2px;
padding: 4px 7px 2px 7px;
border: 1px solid #ccc;
}
div.pagination a:hover {
background-color: #eee;
text-decoration: none;
}
div.pagination span.current {
font-weight: bold;
background-color: #000;
border-color: #000;
color: #fff;
}
div.pagination span.ellipsis {
border: none;
padding: 5px 0 3px 2px;
}
Note: the styles above are based on official galleriffic example 2 and are required to make things look proper.
4. Create Javascript code
Now this is a tricky part, the Javascript is going to modify the DOM of the html generated by WordPress galleries and start Galleriffic.
Add following code to js/layout-control.php (or your prefered Javascript file)
(function($) {
$.fn.changeElementType = function(newType) {
var attrs = {};
$.each(this[0].attributes, function(idx, attr) {
attrs[attr.nodeName] = attr.nodeValue;
});
this.replaceWith(function() {
return $("<" + newType + "/>", attrs).append($(this).contents());
});
};
})(jQuery);
jQuery(document).ready(function($) {
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
$('#gallery-1').html("<ul class=\"thumbs noscript\">"+$('#gallery-1').html()+"</ul>");
$('#gallery-1').before('<div id="controls"></div><div id="loading"></div><div id="slideshow"></div><div id="caption"></div>');
$('.gallery dl').changeElementType("li");
$('.gallery br').remove();
$('.gallery dt').changeElementType("div");
$('.gallery li a').addClass("thumb");
jQuery(document).ready(function($) {
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Galleriffic Gallery
var gallery = $('#gallery-1').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: true,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
function pageload(hash) {
if(hash) {
$.galleriffic.gotoImage(hash);
} else {
gallery.gotoIndex(0);
}
}
$("a[rel='history']").live('click', function(e) {
if (e.button != 0) return true;
var hash = this.href;
hash = hash.replace(/^.*#/, '');
$.historyLoad(hash);
return false;
});
});
});
5. And now – pull it all together abd add to your functions.php file:
<?php
wp_register_script('galleriffic',get_stylesheet_directory_uri() . '/galleriffic-2.0/js/jquery.galleriffic.js',false, '2.0.0');
wp_register_script('jquery.opacityrollover',get_stylesheet_directory_uri() . '/galleriffic-2.0/js/jquery.opacityrollover.js',false, '2.0.0');
wp_register_script('layout-control', get_stylesheet_directory_uri() . '/js/layout-control.js',false,'2.0','all');
wp_enqueue_script('galleriffic');
wp_enqueue_script('jquery.opacityrollover');
wp_enqueue_script('layout-control');
wp_enqueue_style('galleriffic-style', get_stylesheet_directory_uri() . '/galleriffic-2.0/css/basic.css',false,'2.0','all');
?>
6. Job done! All your WordPress galleries should be using Galleriffic now!
7. Make proper stylesheets and integrate it nicely into theme also;)
