JQuery 頁籤式動態分類圖片導覽效果 (帶響應式設計範例)

頁籤式動態分類圖片導覽效果 , 透過jquery的視覺動態設計可以變成效果非常強烈的展示方式 , 圖片HOVER經過的時候可以顯示指定TITLE樣式以及簡單介紹 , 實用性非常高 ! 本案例帶有響應式設計 , 可以透過縮放瀏覽器視窗大小看到頁面響應式效果：

          DEMO

簡易使用教學

本效果實際應用非常簡單，分成兩個設定步驟：
步驟一、設定頁籤的分類列表 , data-option-value可自訂頁籤分類 , 全部分類則是參考第一條LI的類別寫法即可：
參考範例

1. <section id="options">
   
2.                                 <ul id="home-filters" class="option-set clearfix" data-option-key="filter">
   
3.                                         <li><a href="#filter" data-option-value="*" class="selected active">All</a></li>
   
4.                                         <li><a href="#filter" data-option-value=".marketing">Marketing</a></li>
   
5.                                         <li><a href="#filter" data-option-value=".photography">Photography</a></li>
   
6.                                         <li><a href="#filter" data-option-value=".branding">Branding</a></li>
   
7.                                         <li><a href="#filter" data-option-value=".print">Print</a></li>
   
8.                                         <li><a href="#filter" data-option-value=".webdesign">Web Design</a></li>
   
9.                                 </ul>                       
   
10.                         </section>       

複製代碼

步驟二、帶入圖片列表 , 透過data-category="分類" 指定剛剛步驟一所設定的分類項目 , 另外本效果案例對於圖片處理有三種比例效果,可分別設定套用類別：
第一種是大圖式(550*450px) - class="print photography item-wide"
第二種是一般小圖(265*215px) - class="branding print item-small"
第三種是長條形(265*450px) -  class="marketing webdesign item-high"

參考範例

1. <ul class="portfolio grid ">
   
2.                                         <li data-category="marketing" class="print photography item-wide">
   
3.                                                 <a href="images/portfolio/image5-small.jpg" rel="prettyPhoto">
   
4.                                                         <div class="grid-item-on-hover">
   
5.                                                                 <div class="grid-text">
   
6.                                                                         <h1>PICTURE TITLE [SR]</h1>
   
7.                                                                 </div>
   
8.                                                                 <span>photography, printing identity</span>
   
9.                                                                
   
10.                                                         </div>
    
11.                                                         <img src="images/portfolio/image5-small.jpg" alt=" " />
    
12.                                                 </a>
    
13.                                         </li></ul>

複製代碼

透過指定三種不同類型的圖片比例 , 會如同瀑布流效果一樣自動排列版面 , 效果非常好 , 適合運用在各種應用上 (文章列表、商品、相簿列表..等等)



jquery頁籤分類圖片效果案例.rar (5.98 MB, 下載次數: 10, 售價: 15 S幣)

2013-6-12 17:07 上傳

點擊文件名下載附件
閱讀權限: 10
售價: 15 S幣  [記錄]