新葡亰496net Web前端 Lightbox-展示完美图片的jQuery插件-Web前端之家

Lightbox-展示完美图片的jQuery插件-Web前端之家



在做产物图片呈现的时候,我们经常会吸取这样的须求:须要点击小图,弹出大图,而且大图还足以一向点击开关实行前后切换。其实那样的成效比非常多插件都得以兑现,前几日珍视是引入一款常用且轻易的,大伙且用收藏吧。

 

那款插件正是:Lightbox。据说出来已经8年左右了,成效强盛,易用。

前两日写的篇章《纯手工业构建美丽的垂直时间轴,使用最简便易行的HTML+CSS+JQUEHavalY完毕玖十多个本子更新记录的美不胜收转身!》受到许多网民的爱护,昨日专程推出姊妹篇《纯手工业创设优质的瀑布流,中国共产党第五次全国代表大会插件叁个都游人如织Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!》,希望大家欢愉!

重中之重特色:开源简洁精致,易用,帮衬响应式,动漫效果也没有错!

 

官方网站地址:

前言

FineUI控件库腾飞至今已经有 5
个年头,近期论坛注册的QQ会员 5000 五个人,进献客户 500
两个人(捐献客商转变率到达10%以上,在境内开源领域信赖那是二个梦境数字!也足以表达FineUI旺盛的精力!)。在这里5 年八年,FineUI总共宣布了 100
多个本子!也积攒了大气的出类拔萃案例。

唯唯长期以来,FineUI的规范案例都是在论坛上以帖子的款型开展体现,未有二个集聚显示的地点。几近日我们就使用近来比较流行的瀑布流来化解FineUI标准案例的展示难点。最后的展现效果如下图所示。

图片 1

 

gitHub地址:

中国共产党第五次全国代表大会插件简单介绍

为了创制FineUI的《标准案例》页面,大家综合使用了Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox五大插件,上面先对那5 个插件进行简易的介绍。

1.
Bootstrap:强大的CSS框架,由Instagram的开支程序员推出,不仅是960搭架子,並且蕴涵众多过多拿来就用的可观样式。从Bootstrap推出第4个版本小编就从头利用,

  1. jQuery:JavaScript框架,产业界事实的正规化。

  2. Masonry:制作瀑布流结构的JavaScript库。

4.
imagesLoad:监测图片是还是不是加载实现的JavaScript库。

5.
Lightbox:以弹框格局集中体现图片的JavaScript库。

 

行使情势:

用Bootstrap打底

首先为种种案例准备1-2张截图、案例名称以致案例作者,并创立轻易的HTML布局如下:

<div id="masonry" class="container-fluid">

    <div class="thumbnail"> 
        <div class="imgs"> 
            <img src="..png" /> 
        </div> 
        <div class="caption"> 
            <div class="title">简单OA管理系统</div> 
            <div class="content"> 

            </div> 
            <div class="author"> 
                by <a target="_blank" href="http://fineui.com/bbs/home.php?mod=space&uid=2426">小小生</a> 
            </div> 
        </div> 
    </div> 

</div>

  

 

为HTML成分定义轻易的CSS样式:

<style> 
    #masonry 
    { 
        padding: 0; 
        min-height: 450px; 
        margin: 0 auto; 
    } 
    #masonry .thumbnail 
    { 
        width: 330px; 
        margin: 20px; 
        padding: 0; 
        border-width: 1px; 
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 
                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 
    } 
    #masonry .thumbnail .imgs 
    { 
        padding: 10px; 
    } 
    #masonry .thumbnail .imgs img 
    { 
        margin-bottom: 5px; 
    } 
    #masonry .thumbnail .caption 
    { 
        background-color: #fff; 
        padding-top: 0; 
        font-size: 13px; 
    } 
    #masonry .thumbnail .caption .title 
    { 
        font-size: 13px; 
        font-weight: bold; 
        margin: 5px 0; 
        text-align: left; 
    } 
    #masonry .thumbnail .caption .author 
    { 
        font-size: 11px; 
        text-align: right; 
    } 

</style>

  

 

此刻的页面看起来如下图所示(源代码在 index_1.html
中,小说最终会提供下载地址)。

图片 2

 

  1. 下载并引用jquery和lightbox插件:

  2. 引入插件所需的css样式:

  3. 为你所急需出示的图纸加多data-lightbox=”roadtrip”属性:

用Masonry+imagesLoaded创设瀑布流

鉴于列表中带有图表,我们要求持有图片加载完结后再调用Masonry的瀑布流结构,进而方式列表中的成分重叠在一道。为上述页面增加如下轻松的JavaScript代码。

<script> 
    $(function() { 

        var masonryNode = $('#masonry'); 
        masonryNode.imagesLoaded(function(){ 
            masonryNode.masonry({ 
                itemSelector: '.thumbnail', 
                isFitWidth: true 
            }); 
        }); 


    }); 
</script>

  

 

 

那儿页面突显效果如下图所示(源代码在 index_2.html
中,小说最后会提供下载地址)。

图片 3

 

标签:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图