Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Make The WordPress Gallery awesome
.DWPG_selectedImg {
width:100%;
background:#efefef;
text-align: center;
}
.DWPG_selectedImg {
position:relative;
}
.DWPG_thumbs {
margin-top:5px;
padding-bottom:5px;
}
.DWPG_thumb {
opacity:0.9;
height:100px;
width:100px;
}
.DWPG_thumb img {
height:100px;
width:100px;
margin-right:5px;
}
.DWPG_selectedThumb {
opacity:1;
}
.DWPG_selectedImg img {
height:400px;
}
/*
DWPGallery.js
Tranform the default wordpress gallery in to an awesome one
Author: Durgé Seerden
Author URI: http://dsdeur.me
Tutorial URI: http://dimics.com
*/
(function($){
$.DWPGallery = function(el, options){
// To avoid scope issues, use 'base' instead of 'this'
// to reference this class from internal events and functions.
var base = this;
/**
* Creates a new gallery from a wordpress gallery
*/
base.init = function(){
base.options = $.extend({},$.DWPGallery.defaultOptions, options);
base.currentImg = 0;
// Create the new gallery divs
var galleryContainer = $("<div/>").addClass("DWPG_galleryContainer");
var thumbsDiv = $("<div/>").addClass("DWPG_thumbs");
var selectedImgDiv = $("<div/>").addClass("DWPG_selectedImg");
// Append divs to container
galleryContainer.append(selectedImgDiv, thumbsDiv);
// Loop through he gallery items
$(".gallery-item", el).each(function(item){
// Get the full res img link from the anchor
var imgLink = $("a", this).attr("href");
// Prepare and append to thumbs
$("a", this).addClass("DWPG_thumb")
// Bind a click event to the thumb to select the image
.bind("click", function(event){
event.preventDefault();
// Select the clicked image
base.selectImg($(this).index());
return false;
});
thumbsDiv.append($("a", this));
// Create and append the full res img to selectedImgDiv
var fullImg = $('<img src="' + imgLink + '" />').hide();
selectedImgDiv.append(fullImg);
});
// Replace the default gallery with new structure
$(el).replaceWith(galleryContainer);
// Access to jQuery and DOM versions of element
base.$el = $(galleryContainer);
base.el = galleryContainer;
// Add a reverse reference to the DOM object
base.$el.data("DWPGallery", base);
// Select the first img
base.selectImg(0);
};
/**
* Makes an image active
* @param {number} index the index of the img to select
*/
base.selectImg = function(index){
// Default index to 0
if(index === undefined || index === "")
index = 0;
base.currentImg = index;
// Show selected img
$.when($(".DWPG_selectedImg img", base.el).fadeOut(100)).then(function(){
$(".DWPG_selectedImg img", base.el).hide().eq(index).fadeIn(300);
});
// Remove and set class for selected thumb
$(".DWPG_thumb", base.el).removeClass("DWPG_selectedThumb");
$(".DWPG_thumb", base.el).eq(index).addClass("DWPG_selectedThumb");
};
// Run initializer
base.init();
};
$.DWPGallery.defaultOptions = {
};
$.fn.dWPGallery = function(options){
return this.each(function(){
(new $.DWPGallery(this, options));
});
};
}(jQuery));
// Init plugin when page is ready
$(document).ready(function(){
$(".gallery").dWPGallery();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment