原文:http://dimsemenov.com/plugins/magnific-popup/documentation.html
本文将指导你如何使用Magnific Popup, 除此以外,你还可以通过CodePen自行测试. 如果你有任何问题或者建议请提交至GitHub.
你可以从GitHub获取到源码,并在它的 dist/ 目录下找到需要的JS 和 CSS文件.
如果你已经导入了 jquery.js,就不要再次包含它。当然你可以使用
jQuery.noConflict();
Popup 的初始化代码应该在document(文档)ready之后执行,例如:
$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
});
Open popup
$('.test-popup-link').magnificPopup({
type: 'image'
// other options
});
$('.parent-container').magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image'
// other options
});
// 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: $('Dynamically created element'), // Dynamically created element
type: 'inline'
},
{
src: 'HTML string',
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
});
$('.image-link').magnificPopup({type:'image'})
Open image, $('.image-link').magnificPopup()
Open image
Open image
方法三:使用 items 选项
$.magnificPopup.open({
items: {
src: 'some-image.jpg'
},
type: 'image'
});