OK then today we're going to take a look at creating a jQuery Plugin for a nice and easy, opacity filled, picture gallery. The aim of this fifteen minute video screencast/tutorial is to help you with basic plugin development and get you used to writing plugins from scratch. Continue Reading...
/**
* Easy Gallery jQuery Plugin
* Author: Drew Douglass
* Version: 0.1
*
*
*/
(function($){
$.fn.easyGallery = function(settings) {
//setup some options
var opts = $.extend({}, $.fn.easyGallery.defaults,settings);
return this.each(function(setting){
var options = $.extend({}, opts, $(this).data());
$(this).hover(function(){
$(this).siblings().stop().animate({
opacity: options.opacity
},options.duration);
}, function(){
$(this).siblings().stop().animate({
opacity: options.originalOpacity
},options.duration);
});
});
}
$.fn.easyGallery.defaults = {
duration: 500,
opacity: 0.5,
originalOpacity: 1
}
})(jQuery);
Thank to Jarel Remick for providing the free demo images.
Subscribe to our RSS Feed and E-Mail for the latest updates on all of our content.
Firefox is one of the most popular browsers in the world. The secret behind this popularity is thousands of small apps available with firefox which is also free.
With all the modern browsers starting to support CSS3 (including Mozilla Firefox 4, Apple Safari 4, Internet Explorer 9), it’s time to take a real look at CSS3 and see what it can do, and what it’s capable of doing. CSS3 has a lot of new properties to use, including gradients, border images, transitions, animations, border radius, @font-face, shadows, and more.
Since HTML5 has been in development, there has been a lot of speculation that the introduction of mixed with JavaScript means flash will have no place on the internet. I’ve taken some time to have a look at what developers have created using a combination of the JavaScript and , and it is starting to look rather impressive.
Today we are showcasing “Best of the Web”. We have scoured the internet in search of other design driven blogs and websites to showcase what they have to offer for the month of June, 2010. There is plenty of great stuff out there such as tutorials, freebies, resources and lots of inspirational pieces. I am confident that your designs will benefit from these hot new finds.
Today’s web treat is a free combo pack of large, high resolution (2400px * 1600px) Hot Pink Industrial Grunge Textures in .jpg format.
As we mentioned before, logos are a very important part of building your brand’s identity. “Branding” yourself, is the best way to represent who you are and what you are all about. If designed properly, logos can have an enormous impact on your company’s success.
For the moment we don´t approve any guest writer applications, please check back later or subscribe to our feed for notice.
Stay updated with:
5 Comments
Great tutorial! Very very nice…
For some reason this crashes IE8 big time..
good tutorial. thanks
[...] Drew Douglass – How To Create An ‘Easy Gallery’ jQuery Plugin [...]
Very good tutoial. Many thanks.