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