Last active
August 29, 2015 14:02
-
-
Save dsdeur/08fc3a95416d0cbf1f52 to your computer and use it in GitHub Desktop.
Make The WordPress Gallery awesome
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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