前端开发推荐-创建一个精美的jquery图片库效果

先唠叨一句 这个编辑器真难用啊，，，，，

在Web和图形设计的世界，jquery它是使用最广泛的技术。 在他的帮助下，我们可以创建很多伟大的事情。丰富的jQuery插件，在互联网上，使我们能够毫不费力地创建幻灯片，表格，动画和其他各种良好的效果

在本教程中，我将展示如何创建简约 jQuery 图片库。您可以使用它来展示您最新的作品或作为相册使用。您可以通过类别菜单对项目进行排序。

 

 

 

 

DEMO

 

 

HTML代码

首先创建一个UL列表，确保每个LI里面具有唯一的类别名称

 

 

1. <ul class="portfolio-categ filter"> 
2.      <li>categories:</li> 
3.      <li class="all active"><a href="#">All</a></li> 
4.      <li class="cat-item-1"><a href="#" title="Category 1">Category 1</a> 
5.      </li> 
6.      <li class="cat-item-2"><a href="#" title="Category 2">Category 2</a> 
7.      </li> 
8.      <li class="cat-item-3"><a href="#" title="Category 3">Category 3</a> 
9.      </li> 
10.      <li class="cat-item-4"><a href="#" title="Category 4">Category 4</a> 
11.      </li> 
12. </ul> 

现在，创建您想要显示的项目的第二个列表. 结构如下.

 

1. <li class="portfolio-item2" data-id="id-0" data-type="cat-item-4"> 
2.      <div> 
3.      <span class="p_w_picpath-block"> 
4.      <a class="p_w_picpath-zoom" href="p_w_picpaths/big/pic1.jpg" rel="prettyPhoto[ gallery ]" title="Wall-E"><img width="225" height="140" src="p_w_picpaths/thumbs/p1.jpg" alt="Wall-E" title="Wall-E" /> 
5.      </a> 
6.      </span> 
7.      <div class="home-portfolio-text"> 
8.      <h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="Wall-E">Wall-E</a></h2> 
9.      <p class="post-subtitle-portfolio">released: 2008</p> 
10.      </div> 
11.      </div> 
12. </li> 

这里有3件事情你需要注意: data-id – 这里是唯一的, data-type – 指定他的CLASS类来进行分类, rel=”prettyPhoto[ gallery ]“ – 当缩略图被点击的时候张开一张大的图片

CSS 代码

1. .p_w_picpath-block{ display:block;position: relative;}  
2. .p_w_picpath-block img{border: 1px solid #d5d5d5; border-radius: 4px 4px 4px 4px;background:#FFFFFF;padding:10px;}  
3. .p_w_picpath-block img:hover{border: 1px solid #A9CF54;box-shadow:0 0 5px #A9CF54;}  
4. .portfolio-area li{float: left;margin: 0 12px 20px 0;overflow: hidden;width: 245px;padding:5px;}  
5. .home-portfolio-text{margin-top:10px;} 

 

为每次类切换编写jquery代码

 

 

1. // Clone applications to get a second collection  
2.     var $data = $(".portfolio-area").clone();  
3.     //NOTE: Only filter on the main portfolio page, not on the subcategory pages  
4.     $('.portfolio-categ li').click(function(e) {  
5.     $(".filter li").removeClass("active");  
6.     // Use the last category class as the category to filter by. This means that multiple categories are not supported (yet)  
7.     var filterClass=$(this).attr('class').split(' ').slice(-1)[0];  
8.     if (filterClass == 'all') {  
9.     var $filteredData = $data.find('.portfolio-item2');  
10.     } else {  
11.     var $filteredData = $data.find('.portfolio-item2[data-type=' + filterClass + ']');  
12.     }  
13.     $(".portfolio-area").quicksand($filteredData, {  
14.     duration: 600,  
15.     adjustHeight: 'auto' 
16.     }, function () {  
17.        
18.     lightboxPhoto();  
19.     });  
20.     $(this).addClass("active");  
21.     return false;  
22.     }); 

这里是 prettyPhoto 属性图像预览的代码

1. jQuery("a[rel^='prettyPhoto']").prettyPhoto({  
2.     animationSpeed:'fast',  
3.     slideshow:5000,  
4.     theme:'light_rounded',  
5.     show_title:false,  
6.     overlay_gallery: false  
7.     });  
8.     } 

作者：58分享

出处："http://www.cnblogs.com/58top/

欢迎任何形式的转载,但务必说明出处

转载于:https://blog.51cto.com/athena/1062734