前端開發推薦-創建一個精美的jquery圖片庫效果

在Web和圖形設計的世界，jquery它是使用最廣泛的技術。 在他的幫助下，我們可以創建很多偉大的事情。豐富的jQuery插件，在互聯網上，使我們能夠毫不費力地創建幻燈片，表格，動畫和其他各種良好的效果

在本教程中，我將展示如何創建簡約 jQuery 圖片庫。您可以使用它來展示您最新的作品或作為相冊使用。您可以通過類別菜單對項目進行排序

 

DEMO

 

HTML 代碼

 首先創建一個UL列表，確保每個LI里面具有唯一的類別名稱

    <ul class="portfolio-categ filter">
    <li>categories:</li>
    <li class="all active"><a href="#">All</a></li>
    <li class="cat-item-1"><a href="#" title="Category 1">Category 1</a>
    </li>
    <li class="cat-item-2"><a href="#" title="Category 2">Category 2</a>
    </li>
    <li class="cat-item-3"><a href="#" title="Category 3">Category 3</a>
    </li>
    <li class="cat-item-4"><a href="#" title="Category 4">Category 4</a>
    </li>
    </ul>

現在，創建您想要顯示的項目的第二個列表. 結構如下.

    <li class="portfolio-item2" data-id="id-0" data-type="cat-item-4">
    <div>
    <span class="image-block">
    <a class="image-zoom" href="images/big/pic1.jpg" rel="prettyPhoto[ gallery ]" title="Wall-E"><img width="225" height="140" src="images/thumbs/p1.jpg" alt="Wall-E" title="Wall-E" />
    </a>
    </span>
    <div class="home-portfolio-text">
    <h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="Wall-E">Wall-E</a></h2>
    <p class="post-subtitle-portfolio">released: 2008</p>
    </div>
    </div>
    </li> 

這里有3件事情你需要注意: data-id – 這里是唯一的, data-type – 指定他的CLASS類來進行分類, rel=”prettyPhoto[ gallery ]“ – 當縮略圖被點擊的時候張開一張大的圖片.

CSS 代碼

項目的 CSS 代碼是非常簡單:

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

為每次類切換編寫jquery代碼

    // Clone applications to get a second collection
    var $data = $(".portfolio-area").clone();
    //NOTE: Only filter on the main portfolio page, not on the subcategory pages
    $('.portfolio-categ li').click(function(e) {
    $(".filter li").removeClass("active");
    // Use the last category class as the category to filter by. This means that multiple categories are not supported (yet)
    var filterClass=$(this).attr('class').split(' ').slice(-1)[0];
    if (filterClass == 'all') {
    var $filteredData = $data.find('.portfolio-item2');
    } else {
    var $filteredData = $data.find('.portfolio-item2[data-type=' + filterClass + ']');
    }
    $(".portfolio-area").quicksand($filteredData, {
    duration: 600,
    adjustHeight: 'auto'
    }, function () {
     
    lightboxPhoto();
    });
    $(this).addClass("active");
    return false;
    });

這里是 prettyPhoto 屬性圖像預覽的代碼

    jQuery("a[rel^='prettyPhoto']").prettyPhoto({
    animationSpeed:'fast',
    slideshow:5000,
    theme:'light_rounded',
    show_title:false,
    overlay_gallery: false
    });
    }

DEMO

 本文鏈接：前端開發推薦-創建一個精美的jquery圖片庫效果