前端开发推荐-创建一个精美的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图片库效果