jQuery Image Wall


Gallery 1


Gallery 2


Gallery 3


Gallery 4




jquery.imagewall.js

/*
 * jQuery Image Wall 0.3
 * By Damon Williams
 *
 * Copyright (c) 2009 Damon Williams
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.gnu.org/licenses/gpl-2.0.txt) licenses.
*/

(function($){
	
	$.fn.imageWall = function(options) {
		
		var defaults = {
			showNumbers: true,
			showCaptions: true
		};
		var options = $.extend(defaults, options);
		
		return this.each(function() {
			
			if (options.showNumbers) {
				$(this).each(function() {
					$(this).find("li").each(function(i) {
						var number = "<div class=\"iwall-number\">"+(i+1)+"</div>";
						$(this).prepend(number);
					});
				});
			}
		
			$(this).find("li").hover( function(e) { // over
				var title = "<div class=\"iwall-title\">>"+$(this).find("a img").attr("alt")+"</div>";
				var caption = (options.showCaptions) ? "<div class=\"iwall-caption\">"+$(this).find("a img").attr("title")+"</div>" : "";
				var slide = "<div class=\"iwall-bar\">"+title+""+caption+"</div>";
				$(this).append(slide);
				$(this).find(".iwall-bar:last").slideToggle("fast");
				}, function() { //out
					$(this).find(".iwall-bar:last").slideToggle("fast");
			});
			
		});
		
	};
	
})(jQuery);


html

<ul id="gallery-3" class="imageWall">
	<li><a href="media/images/scarlett.jpg"><img src="media/images/scarlett_thm.jpg" width="160" height="120" alt="Scarlett Johansson" title="Click to view this image" border="0" /></a></li>
	<li><a href="media/images/elisha.jpg"><img src="media/images/elisha_thm.jpg" width="160" height="120" alt="Elisha Cuthbert" title="Click to view this image" border="0" /></a></li>
	<li><a href="media/images/natalie.jpg"><img src="media/images/natalie_thm.jpg" width="160" height="120" alt="Natalie Portman" title="Click to view this image" border="0" /></a></li>
	<li><a href="media/images/carmen.jpg"><img src="media/images/carmen_thm.jpg" width="160" height="120" alt="Carmen Electra" title="Click to view this image" border="0" /></a></li>
</ul>


js function call

$(document).ready(function() {
	
	$("#gallery-1").imageWall({
		showNumbers: true,
		showCaptions: true
	});
	
	$("#gallery-2").imageWall({
		showNumbers: true,
		showCaptions: false
	});
	
	$("#gallery-3").imageWall({
		showNumbers: false,
		showCaptions: true
	});
	
	$("#gallery-4").imageWall({
		showNumbers: false,
		showCaptions: false
	});
	
});