ความสามารถให้การแสดงรูปภาพของ Magnific Popup สามารถสร้างได้ทั้งแบบรูปภาพเดียว หรือเป็นแกลเลอรีก็ได้
Including files :
โค้ด: เลือกทั้งหมด
<!-- 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>
โค้ด: เลือกทั้งหมด
$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
});
โค้ด: เลือกทั้งหมด
<a class="test-popup-link" href="path-to-image.jpg">Open popup</a>
$('.test-popup-link').magnificPopup({
type: 'image'
// other options
});
โค้ด: เลือกทั้งหมด
<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
});
โค้ด: เลือกทั้งหมด
// 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
});
โค้ด: เลือกทั้งหมด
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
}
โค้ด: เลือกทั้งหมด
// 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"
โค้ด: เลือกทั้งหมด
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".
}
นอกจากนี้ทาง Magnific Popup ยังมีปลั๊กอินสำหรับ WordPress อีกด้วย
สามารถดาวน์โหลดได้ที่ : http://plugins.jquery.com/magnific-popup/