jQuery和css3图片画廊Lightbox插件
简要教程
这是一款使用 jQuery 和 CSS3 制作的图片画廊Lightbox插件。该插件中使用CSS3来为图片制作阴影和旋转效果,并使用jQuery来在点击图片的时候制作淡入淡出的图片放大效果。 HTML结构HTML结构采用section作为wrapper。图片部分分为两部分:<div class="span-6 column rotated">对放置的是缩略图,<div id="pic-n">是对应的大图。它们通过第一个div中a元素的href和第二个div中的id值来对应。 <sectionid="content"class="gallery-container"> <divclass="span-18 column rounded"> <divclass="span-6 column rotated"> <aid="image1"class="cms-editable polaroid"href="#pic-1"rel="lightbox"title="first image"> <imgsrc="gallery/1_s.jpg"alt="image"/> </a> </div> ... <divid="pic-1"> <imgsrc="gallery/1.jpg"alt="image"/> </div> ... </div> </section> CSS样式通过CSS3来为图片添加阴影和旋转角度。 a.polaroid { -moz-transition:all0.2s ease-in-out; -webkit-transition:all0.2s ease-in-out; display:block;background:#fff; padding:10px;margin:5px; -moz-box-shadow:#ccc5px5px20px; -webkit-box-shadow:#ccc5px5px20px; margin-bottom:1em; } a.polaroid img {width:200px; } a.polaroid:hover { -moz-box-shadow:#6665px5px20px; -webkit-box-shadow:#6665px5px20px; } JAVASCRIPT插件中使用了fancyzoom.js,它能够将元素放到,并带有非常酷的淡入淡出效果。使用时首先要引入jQuery和fancyzoom.js文件:
<scriptsrc="http://libs.useso.com/js/jquery/1.4.2/jquery.min.js"type="text/javascript"></script> <scripttype='text/javascript'src='js/fancyzoom.js'></script> 然后就可以使用下面的方法来调用插件:
$(function() { $("a.polaroid").each(function() { $(this).css({ "-webkit-transform":'rotate('+ (Math.floor(Math.random()*10)-5) +'deg)', "-moz-transform":'rotate('+ (Math.floor(Math.random()*10)-5) +'deg)' }) .hover(function() { $(this).css({ "-webkit-transform":'rotate('+ (Math.floor(Math.random()*10)-5) +'deg) scale(1.05)', "-moz-transform":'rotate('+ (Math.floor(Math.random()*10)-5) +'deg) scale(1.05)' }) },function() { $(this).css({ "-webkit-transform":'rotate('+ (Math.floor(Math.random()*10)-5) +'deg) scale(1)', "-moz-transform":'rotate('+ (Math.floor(Math.random()*10)-5) +'deg) scale(1)' }) }); }); $('a[rel=lightbox]').fancyZoom(); }); |