jQuery和css3图片照片墙插件

当前位置:主页 > jQuery库 > 图片效果 > jQuery和css3图片照片墙插件
jQuery和css3图片照片墙插件
分享:

    插件介绍

    这是一款使用jQuery和css3制作的图片照片墙插件。该图片墙插件中,所有图片以不同大小的缩略图随机分布,点击缩略图后出现图片描述和另一张缩略图,再点击缩略图可以全屏放大图片。

    浏览器兼容性

    浏览器兼容性
    时间:11-28
    阅读:

简要教程

这是一款使用jQuery和css3制作的图片照片墙插件。插件中首先将所有的图片以不同的大小随机分布排列的屏幕上,点击缩略图后会出现第一级的ribbon,ribbon上也有缩略图和图片的描述信息,当再次点击ribbon上的缩略图,插件将通过ajax调用大图并显示出来。

为了随机分布图片,该图片墙插件中使用了CSS3子类选择器和jQuery Masonry plugin.

HTML

html结构十分简单:

<div class="iw_wrapper">
    <ul class="iw_thumbs" id="iw_thumbs">
        <li>
            <img src="images/thumbs/1.jpg" data-img="images/full/1.jpg" alt="Thumb1"/>
            <div>
                <h2>Description Heading</h2>
                <p>Some description text...</p>
            </div>
        </li>
        <li>...</li>
        ...
    </ul>
</div>
<div id="iw_ribbon" class="iw_ribbon">
    <span class="iw_close"></span>
    <span class="iw_zoom">Click thumb to zoom</span>
</div>
                

data-img属性用于存放大图的url,它将被动态插入到ribbon中。

jQuery和css代码请参考下载文件。