【前端】Magnific Popup – 响应式 jQuery Lightbox 插件

田博远

2023-12-01

原文地址：http://www.uedsc.com/magnific-popup.html

一、Magnific Popup可以做什么

1、单个图像lightbox

三个不同的缩放设置简单的弹出窗口。
1、适合水平和垂直，
2、只能水平，
3、没有差距，缩放动画关闭中右上角的图标。

2、灯箱画廊

你可以把任何 HTML 内容中每个库项目和混合的内容类型。在此示例中为基于移动方向的下一个图像启用延迟加载的图像。如果你想要添加的触摸滑动的支持，请检查我的文章杂志上的粉碎。

3、变焦-画廊

如果你想要打开弹出窗口，只有图像完全加载后，您可能会预加载图像通过 JS。或使用按比例缩小而不是缩略图图像。缩放效果仅适用于图像，现在。

4、弹出与视频或地图

在此示例中广告灯箱自动禁用小屏幕大小和链接的默认行为触发。

5、具有 CSS 动画的对话框

动画添加与简单的 CSS 转换，你可以让他们看看但是你希望。

6、弹出窗体

输入的数据是不丢失如果你打开和关闭弹出窗口，或者如果你转到另一个页面，然后按返回浏览器按钮。

7、Ajax 弹出菜单

你有完全控制的弹出式菜单中显示的内容、对齐任何身边通过 CSS、启用或禁用在窗口的右侧滚动。

8、模式弹出

模式弹出禁用关闭弹出窗口的常用方法。

9、错误处理

这是只是基本的错误消息的显示方式示例。当然，您可以更改文本或它们的样式。

二、Magnific Popup特点

1、光和模块化

您可以选择包括唯一的功能您需要使用的在线生成工具或通过使用Grunt.js编译它自己。核心 JS 文件的大小是关于3 KB + 每个模块的重量大约 0.5 KB （压缩）。Sass CSS 预处理器用于更容易剥皮，但你不是有义务去使用它。

2、用 CSS 调整内容的大小

大多数灯箱插件需要你来定义它的大小通过 JS 选项。庄严的弹出式菜单不会 — — 感受到免费使用相对的单位，像 EM 的或调整大小灯箱的 CSS 媒体查询的帮助。无需担心它会如何调整大小和中心更新灯箱里面的内容。

3、快速

庄严的弹出式菜单显示图像之前他们是完全加载充分利用递增负荷。对于进出而不是使用 CSS3 的过渡缓慢 JavaScript 动画。

4、高 DPI （视网膜）显示支持

默认控件是用纯 CSS，没有外部图形。主图像有是一个内置的方式，为不同的像素密度显示提供适当的源。

5、有条件的灯箱

插件有一个选项来自动切换到替代移动友好源上小小的屏幕大小。布拉德 · 弗罗斯特已对这项技术一篇了不起的文章。

6、内存管理

弹出式菜单具有可扩展微的模板引擎，重用现有 DOM 元素（示例），这是特别有用的当你的弹出窗口相同的模式。

三、浏览器支持

在台式机上测试： Chrome，Safari，FF、歌剧、 IE8 +，IE7 （的作品，一些可视布局功能，比如垂直居中，而是缺少）的部分支持。在 Android 2.3 +、 iOS5 +，黑莓 10 +，WP7 +，移动歌剧和铬在 android 系统手机：默认浏览器。

四、Magnific Popup使用方法

在这里你可以找到关于如何使用庄严的弹出式菜单的指南。除了本文档页面，你也可以查看CodePen 的示例。如果你在这个网站找到了任何的错误或你知道如何改进本文档的某些部分，请提交到GitHub上。

1、引入文件

你可以通过下面的代码引入JS和CSS文件或由自己编译它的源代码。

<!-- 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>

我们建议您将css文件放在<head>标签中，将javascript文件放在您网页的底部<body>标签之前。

如果您的网站已经引入了jquery.js插件，则不需要包含第二个文件，或者您使用Zepto.js，而不是jquery插件，或者二选其一，这就要看您对浏览器的支持情况。

2、初始化弹出菜单

弹出式菜单的初始化代码应执行文件准备好了以后，例如：

$(document).ready(function() {
$(‘.image-link’).magnificPopup({type:’image’});
});

有三种方法来初始化一个弹出窗口：

#1、从 HTML 元素

<a class="test-popup-link" href="path-to-image.jpg">Open popup</a>

$('.test-popup-link').magnificPopup({ 
  type: 'image'
    // other options
});

#2、从一组的同一个父元素

第一次相同但使用此方法，如果您正在从一个容器内的元素的列表中创建一个弹出窗口。请注意此方法无法使画廊模式，它只是减少的单击事件处理程序；每个项目将作为一个单一的弹出窗口打开。如果您希望启用库，添加gallery:{enabled:true}选项。

<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>

$('.parent-container').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
  // other options
});

#3、从选项创建

items选项定义的弹出菜单项的数据，使庄严的弹出式菜单，忽略目标 DOM 元素的所有属性。items的值可以是单个对象的数组。

// Example with single object
$('#some-button').magnificPopup({
    items: {
      src: 'path-to-image-1.jpg'
    },
    type: 'image' // this is default type
});

// Example with multiple objects
$('#some-button').magnificPopup({
    items: [
      {
        src: 'path-to-image-1.jpg'
      },
      {
        src: 'http://vimeo.com/123123',
        type: 'iframe' // this overrides default type
      },
      {
        src: $('<div>Dynamically created element</div>'), // Dynamically created element
        type: 'inline'
      },
      {
        src: '<div>HTML string</div>',
        type: 'inline'
      },
      {
        src: '#my-popup', // CSS selector of an element on page that should be used as a popup
        type: 'inline'
      }
    ],
    gallery: {
      enabled: true
    },
    type: 'image' // this is default type
});

本示例在 CodePen 上的一起玩.

内容类型

默认情况下，庄严的弹出式菜单有 4 类型的内容：image、 iframe、inline和ajax。那里是类型的没有任何”自动检测”基于 URL，因此，您应该手动定义它。

可以以两种方式定义的弹出菜单类型：

使用type选项。例如：

$('.image-link').magnificPopup({type:'image'})

使用mfp-TYPECSS 类 （其中TYPE所需的内容类型）。例如：

<a class="mfp-image image-link">Open image</a>
$('.image-link').magnificPopup()

第二个选项总是会覆盖第一，所以你可能会与多个内容类型从一个调用初始化的弹出窗口。

inline是默认内容类型（从 v0.8.4），因此您可以跳过它的定义。

的源的弹出式菜单内容在几种方法可以定义（例如，向图像，一个 HTML 文件，视频的网页的路径的路径的路径）：

方法 #1：从href属性：

<a href=”image-for-popup.jpg”>Open image</a>

方法 #2：从data-mfp-src属性 (覆盖第一种方法）：

<a href=”some-image.jpg” data-mfp-src=”image-for-popup.jpg”>Open image</a>

方法 #3: 从items选项

$.magnificPopup.open({
  items: {
    src: 'some-image.jpg'
  },
  type: 'image'
});

如果你想要修改源解析的方式，你可能会钩成的elementParse回调。例如：

$('.image-link').magnificPopup({
  type:'image',
  callbacks: {
    elementParse: function(item) {
      // Function will fire for each target element
      // "item.el" is a target DOM element (if present)
      // "item.src" is a source that you may modify

      console.log(item); // Do whatever you want with "item" object
    }
  }
});

图像类型

如果您选择此类型的图像的路径必须设置为的主要来源。如果你弹出窗口不会有图像源并不不应该预先加载的图像（和视网膜化等），使用

inline类型

image: {
  markup: '<div class="mfp-figure">'+
            '<div class="mfp-close"></div>'+
            '<div class="mfp-img"></div>'+
            '<div class="mfp-bottom-bar">'+
              '<div class="mfp-title"></div>'+
              '<div class="mfp-counter"></div>'+
            '</div>'+
          '</div>', // Popup HTML markup. `.mfp-img` div will be replaced with img tag, `.mfp-close` by close button

  cursor: 'mfp-zoom-out-cur', // Class that adds zoom cursor, will be added to body. Set to null to disable zoom out cursor. 
  
  titleSrc: 'title', // Attribute of the target element that contains caption for the slide.
  // Or the function that should return the title. For example:
  // titleSrc: function(item) {
  //   return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
  // }

  verticalFit: true, // Fits image in area vertically

  tError: '<a href="%url%">The image</a> could not be loaded.' // Error message
}

请注意庄严的弹出窗口不执行任何基于 Java 的客户端缓存的图像。所以确保你服务器添加过期标头所以图像不会下载每个时间。

Iframe 类型

默认情况下庄严的弹出式菜单支持为每个服务只有一种类型的 URL：

// YouTube
"http://www.youtube.com/watch?v=7HKoqNJtMTQ"

// Vimeo
"http://vimeo.com/123123"

// Google Maps
"https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom"

但你可以扩展它，让它支持绝对的任何 URL 或任何其他服务（查看示例，添加 Dailymotion 的支持）。Iframe 的选项：

iframe: {
  markup: '<div class="mfp-iframe-scaler">'+
            '<div class="mfp-close"></div>'+
            '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
          '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button

  patterns: {
    youtube: {
      index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).

      id: 'v=', // String that splits URL in a two parts, second part should be %id%
      // Or null - full URL will be returned
      // Or a function that should return %id%, for example:
      // id: function(url) { return 'parsed id'; } 

      src: '//www.youtube.com/embed/%id%?autoplay=1' // URL that will be set as a source for iframe. 
    },
    vimeo: {
      index: 'vimeo.com/',
      id: '/',
      src: '//player.vimeo.com/video/%id%?autoplay=1'
    },
    gmaps: {
      index: '//maps.google.',
      src: '%id%&output=embed'
    }

    // you may add here more sources

  },

  srcAction: 'iframe_src', // Templating object key. First part defines CSS selector, second attribute. "iframe_src" means: find "iframe" and set attribute "src".
}

内联类型

若要创建弹出式菜单从内联元素需要：

1）创建一个您想要在弹出窗口中显示并将其添加到某个地方的 HTML 元素。类mfp-hide需要隐藏从页面弹出窗口。

<div id="test-popup" class="white-popup mfp-hide">
  Popup content
</div>

2）此元素的样式。庄严的弹出菜单，默认情况下不会任何将样式应用于它，除了垂直居中（如果alignTop:false）。关闭按钮将自动追加里面（如果closeBtnInside:true).

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

3）添加按钮，将打开弹出式菜单（源必须匹配的元素（在我们的案例#test-popup）的 CSS id。

<!-- Like so: -->
<a href="#test-popup" class="open-popup-link">Show inline popup</a>

<!-- Or like so: -->
<a href="mobile-friendly-page.html" data-mfp-src="#test-popup" class="open-popup-link">Show inline popup</a>

4）初始化脚本。

$('.open-popup-link').magnificPopup({
  type:'inline',
  midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
});

这里有一些其他的方法来初始化弹出式菜单：

// From HTML string
$('button').magnificPopup({
  items: {
      src: '<div class="white-popup">Dynamically created popup</div>',
      type: 'inline'
  }
});

// From an element with ID #popup
$('button').magnificPopup({
  items: {
      src: '#popup',
      type: 'inline'
  }
});

// From jQuery object
$('button').magnificPopup({
  items: {
      src: $('<div class="white-popup">Dynamically created popup</div>'),
      type: 'inline'
  }
});

// Open directly via API
$.magnificPopup.open({
  items: {
    src: '<div class="white-popup">Dynamically created popup</div>', // can be a HTML string, jQuery object, or CSS selector
    type: 'inline'
  }
});

在将帮助您更好地了解它是如何工作的 CodePen 已经创建了两个例子：

简单的内嵌弹出式菜单
先进的弹出标记和画廊的模式

Ajax 类型

若要创建这种类型的弹出窗口的第一次到您想要显示并选择弹出菜单的ajax类型的文件中定义的路径。弹出式菜单本身应方式完全相同作为内联弹出式菜单类型设置样式.

的重要说明！您加载文件的内容已经是一个弹出式窗口，本身，所以必须只有一个根元素.

<a href="path-to-file.html" class="ajax-popup-link">Show inline popup</a>

$('.ajax-popup-link').magnificPopup({
  type: 'ajax'
});

注意到将加载的文件的路径应具有相同的起源（例如是位于相同的域），了解更多.

Ajax 的选项：

ajax: {
  settings: null, // Ajax settings object that will extend default one - http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
  // For example:
  // settings: {cache:false, async:false}

  cursor: 'mfp-ajax-cur', // CSS class that will be added to body during the loading (adds "progress" cursor)
  tError: '<a href="%url%">The content</a> could not be loaded.' //  Error message, can contain %curr% and %total% tags if gallery is enabled
}

它加载，或选择并显示从加载的文件只是特定的元素，还有一个parseAjax回调后修改内容：

callbacks: {
  parseAjax: function(mfpResponse) {
    // mfpResponse.data is a "data" object from ajax "success" callback
    // for simple HTML file, it will be just String
    // You may modify it to change contents of the popup
    // For example, to show just #some-element:
    // mfpResponse.data = $(mfpResponse.data).find('#some-element');
    
    // mfpResponse.data must be a String or a DOM (jQuery) element
    
    console.log('Ajax content loaded:', mfpResponse);
  },
  ajaxContentAdded: function() {
    // Ajax content is loaded and appended to DOM
    console.log(this.content);
  }
}

更多使用方法请参见：http://dimsemenov.com/plugins/magnific-popup/documentation.html

五、如何获取Magnific Popup

帮助文档（E文） ·GitHub地址 ·WordPress插件 · 官方网站 · 下载地址

【前端】Magnific Popup – 响应式 jQuery Lightbox 插件

原文地址：http://www.uedsc.com/magnific-popup.html

一、Magnific Popup可以做什么

1、单个图像lightbox

2、灯箱画廊

3、变焦-画廊

4、弹出与视频或地图

5、具有 CSS 动画的对话框

6、弹出窗体

7、Ajax 弹出菜单

8、模式弹出

9、错误处理

二、Magnific Popup特点

1、光和模块化

2、用 CSS 调整内容的大小

3、快速

4、高 DPI （视网膜）显示支持

5、有条件的灯箱

6、内存管理

三、浏览器支持

四、Magnific Popup使用方法

1、引入文件

2、初始化弹出菜单

#1、从 HTML 元素

#2、从一组的同一个父元素

#3、从选项创建

五、如何获取Magnific Popup

相关阅读

相关文章

相关问答

相关文档

【前端】Magnific Popup – 响应式 jQuery Lightbox 插件

原文地址：http://www.uedsc.com/magnific-popup.html

一、Magnific Popup可以做什么

1、单个图像lightbox

2、灯箱画廊

3、变焦-画廊

4、弹出与视频或地图

5、具有 CSS 动画的对话框

6、弹出窗体

7、Ajax 弹出菜单

8、模式弹出

9、错误处理

二、Magnific Popup特点

1、光和模块化

2、用 CSS 调整内容的大小

3、快速

4、高 DPI （视网膜） 显示支持

5、有条件的灯箱

6、内存管理

三、浏览器支持

四、Magnific Popup使用方法

1、引入文件

2、初始化弹出菜单

#1、从 HTML 元素

#2、从一组的同一个父元素

#3、从选项创建

五、如何获取Magnific Popup

相关阅读

相关文章

相关问答

相关文档

4、高 DPI （视网膜）显示支持