专栏首页老马寒门IT灯箱效果插件Magnific Popup详解

灯箱效果插件Magnific Popup详解

Magnific Popup 是一个非常优秀的弹出对话框或者灯箱效果插件。它基于jQuery(zepto)开发,使用非常简单,特点就是:非常好用。

官网地址: http://dimsemenov.com/plugins/magnific-popup/

Github地址:https://github.com/dimsemenov/Magnific-Popup

先看个效果吧:

快速入门demo

先做一个简单的,把一个div弹出来的效果。

第一步: 添加脚本支持

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>

第二步: 添加html标签

<!-- 添加一个a标签,设置href属性指向一个要弹出来的一个div盒子。 -->
<a href="#pop" class="button is-large has-text-primary" id="btn">添加</a>

<!-- 以下就是要弹出来的层,注意:添加mfp-hide先进行隐藏起来。 -->
<div id="pop" class="mfp-hide">
  <lable for="sname">用户名</lable><input type="text" id="sname" name="ss" value="">
  <hr>
  <input type="button" value="关闭" id="btnClose">
</div>

第三步: 给弹出来的层添加点样式

#pop {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

第四步: 初始化弹出来的层和a标签的点击事件。

// 给超级连接添加magnificPopup初始化方法。
$('#btn').magnificPopup({
  type: 'inline',         // 行内的类型,类比图片的模式
  closeBtnInside: true,   // 显示关闭按钮
  closeOnBgClick: false  // 点击遮罩透明背景关闭弹出层
});

magnificPopup方法的选项设置

  • mainClass: String类型,要添加到根元素上的样式类。默认是空字符串。
  • closeOnContentClick: Boolean类型,默认false,点击内容区域关闭弹出层。
  • closeOnBgClick: Boolean类型,默认true,点击背景区域关闭弹出层。
  • closeBtnInside: Boolean类型,默认true,是否有内置的关闭按钮。
  • modal: Boolean类型,默认false,是否是模态对话框。

常用的其他api

  • 关闭图层close方法: $.fn.magnificPopup('close');
  • 打开弹出层open方法:$.fn.magnificPopup('open')
  • 下一个图片next方法: $('.element-with-popup').magnificPopup('next');

其他方法:$.fn.magnificPopup('methodName' /*, param1, param2 ... */)

其他demo

  • 图片demo
<div class="parent-container">
  <a href="path-to-image-1.jpg">Open popup 1</a>
  <a href="path-to-image-2.jpg">Open popup 2</a>
  <a href="path-to-image-3.jpg">Open popup 3</a>
</div>

<script>
$('.parent-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
// other options
});
</script>
  • 图片demo2
<div class="html-code grid-of-images">
      <div class="popup-gallery">
        <a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner"><img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75" /></a>
        <a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"><img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75" /></a>
        <a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg" title="The Uninvited Guest"><img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" width="75" height="75" /></a>
        <a href="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_b.jpg" title="Oh no, not again!"><img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" width="75" height="75" /></a>
        <a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" title="Swan Lake"><img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" width="75" height="75" /></a>
        <a href="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_b.jpg" title="The Shake"><img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" width="75" height="75" /></a>
        <a href="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" title="Who's that, mommy?"><img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" width="75" height="75" /></a>
      </div>
    </div>
    <script type="text/javascript">
      $(document).ready(function() {
        $('.popup-gallery').magnificPopup({
          delegate: 'a',
          type: 'image',
          tLoading: 'Loading image #%curr%...',
          mainClass: 'mfp-img-mobile',
          gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0,1] // Will preload 0 - before current, and 1 after the current image
          },
          image: {
            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
            titleSrc: function(item) {
              return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
            }
          }
        });
      });
    </script>
  </div>

总结

这个插件还是非常好用的,使用简单方便,而且api也都很人性化。压缩后的js才20k,也算很小,lightbox效果也很棒。你值得拥有。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于移动web教程免费发布

    各位老铁大家好,最近经历了太多太多,精力一直不能集中做自己愿意做的事情。 移动Web课程一开始设置收费10块,其实本意是让大家感觉有支出,就会相对珍惜好好学习,...

    老马
  • 06-老马jQuery教程-jQuery高级

    1.jQuery原型对象解密 jQuery里面的大部分API都是在jQuery的原型对象上定义的。jQuery源码中对原型对象做了简写的处理。也就是说:jQue...

    老马
  • 10-移动端开发教程-移动端事件

    在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1. PC端事件在移动端的兼容问题 1.1 cl...

    老马
  • 推荐[搜索引擎架构]的几篇文章

    1.基于Sphinx+MySQL的千万级数据全文检索(搜索引擎)架构设计 http://blog.s135.com/post/360/ 2.百度、新浪、Mixi...

    菩提树下的杨过
  • 评论的革新?

    在最近的Real-Time CrunchUp 2009上,通过自己的产品JS-Kit(已经安装在世界上60万个网站上),Khris Loux(世界上最大的评论服...

    大江小浪
  • 使用Active Directory的常

    活动目录,使用ISA代理上网,问题如下: 1.是否可以实现,使用本地网络的用户,不加入AD,就不能上网. 2.针对移动办公的人员,如何实现域管理. 3.通...

    py3study
  • 【一文看尽200篇干货】2018最新机器学习、NLP、Python教程汇总!

    【新智元导读】本文收集并详细筛选出了一系列机器学习、自然语言处理、Python及数学基础知识的相关资源和教程,数目多达200种!来源既包括斯坦福、MIT等名校,...

    新智元
  • 三张图看遍Linux 性能监控、测试、优化工具

    小小科
  • 浏览器同源政策及其规避方法

    浏览器安全的基石是"同源政策"(same-origin policy)。很多开发者都知道这一点,但了解得不全面。 本文详细介绍"同源政策"的各个方面,以及如何规...

    ruanyf
  • OpenShift修改subdomain域名记录

    在客户的已经准备好上线的OpenShift 3.9集群中提出修改域名需求,因此先在本人的自己测试环境进行了验证,过程如下,并且还有一些坑,并进行了记录;将ocp...

    泽阳

扫码关注云+社区

领取腾讯云代金券