Make The WordPress Gallery awesome

DWPGallery.css

.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

/*
	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();
});