注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

响应式jQuery图片展示插件 Portfolio

媒体 fishcity 2416浏览

jQuery图片展示Portfolio

portfolio是一款响应式的jquery图片展示插件,portfolio可以帮助您平滑动感地组织排版网页中的图片、文件。portfolio非常容易上手,并应该于项目中,portfolio插件的目的就在于让开发的过程变得更简单,更轻松。jQuery Portfolio插件有点类似google图片搜索结果点击后展示预览效果。

引入核心库文件

<link rel="stylesheet" href="portfolio.jquery.css">
<script src="http://ajax.useso.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="portfolio.jquery.js"></script>

写入html,更具体的使用方法请看实例

   <!--图片和标题显示-->
   <ul class="thumbs">
            <li><a href="#thumb1" class="thumbnail" style="background-image: url('images/thumb1.jpg')">
                <h4>Web development</h4><span class="description">Get the latest technologies</span></a>
            </li>
            <li>
                <a href="#thumb2" class="thumbnail" style="background-image: url('images/thumb2.jpg')"><h4>SEO</h4><span class="description">Fast and reliable performance</span></a>
            </li>
            ... <!--表示可以添加更多li标签-->
    </ul>
    
  <!--点击后显示对应的内容 -->
    <div class="portfolio-content">
            <div id="thumb1">
                <div class="media"><iframe src="//player.vimeo.com/video/69666609?byline=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
                <h1>Web development</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis nisi sit amet metus venenatis, ut congue turpis aliquet. Pellentesque eget elit sollicitudin, feugiat felis in, ornare diam. Morbi blandit sapien nibh, eu pulvinar tortor luctus nec. Aenean lobortis lacus cursus gravida adipiscing. Praesent in odio porta, placerat felis id, viverra est. Nam magna quam, tincidunt eget augue in, aliquet tristique ipsum.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>

            <div id="thumb2">
                <div class="media"><img src="images/media.jpg"/></div>
                <h1>SEO</h1>
                <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Integer a posuere tortor. Praesent malesuada mauris massa, non blandit neque tempus nec. Quisque fermentum nunc non hendrerit tempus.</p>
                <a href="#" class="btn btn-primary">Learn More</a>
            </div>
            ....<!--表示可以添加更多div标签-->
         </div>

 写入JS,初始化插件

     $(document).ready(function() {
                $('.thumbs').portfolio({
                    cols: 4,   //分成多少列显数缩略图,默认为3列
                    transition: 'slideDown'  //切换的效果
                });
            });

转载请注明:jQ酷 » 响应式jQuery图片展示插件 Portfolio

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。