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