Magnific Popup文档翻译(1)

蔺德曜
2023-12-01

原文:http://dimsemenov.com/plugins/magnific-popup/documentation.html


本文将指导你如何使用Magnific Popup, 除此以外,你还可以通过CodePen自行测试. 如果你有任何问题或者建议请提交至GitHub.


需要包含的文件

你可以从GitHub获取到源码,并在它的 dist/ 目录下找到需要的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> 内,JS文件和初始化代码放在 </body>之前。

如果你已经导入了 jquery.js,就不要再次包含它。当然你可以使用

jQuery.noConflict();

另外,你可以选择包含 Zepto.js代替 jQuery。或者根据浏览器来选择加载哪一个。


初始化popup(弹出窗口)

Popup 的初始化代码应该在document(文档)ready之后执行,例如:


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

有三种方法可以调用一个popup:

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(画廊)模式,它只不过减少了单击事件处理函数的数量——每个元素以独立的窗口弹出。如果你要使用gallery模式,添加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”选项

items选项为弹出项定义了一组数据,并且让Magnific Popup忽略目标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
});

Content Types

Magnific Popup 一般支持4种类型:image、iframe、inline和ajax。由于并不存在基于URL的自动探测机制,因此你必须手工指定它。
有两种方法可以定义content type:
1、使用type选项,例如:
$('.image-link').magnificPopup({type:'image'})

2、使用 mfp-TYPE CSS 类,例如:
<a class="mfp-image image-link">Open image</a>, $('.image-link').magnificPopup()

其中,第二种方法会覆盖第一种方法,因此你可以在一次调用定义多种类型的content type。

inline是默认的content type(从v0.8.4以来)。

有几种方法可以定义弹出窗口的源(例如,一张图片、一个HTML文档,一个视频页):

方法一:使用 href 属性:
<a href="image-for-popup.jpg">Open image</a>

方法二:使用data-mfp-src属性(覆盖方法一):
<a href="some-image.jpg" data-mfp-src="image-for-popup.jpg">Open image</a>

方法三:使用 items 选项
$.magnificPopup.open({
  items: {
    src: 'some-image.jpg'
  },
  type: 'image'
});





 类似资料: