Gem Magnific-Popup-Rails
This post hasn't been updated for 7 years
I. Giới thiệu
Magnific Popup là plugin lightbox và dialog mã nguồn mở cung cấp trải nghiệm tốt nhất cho người dùng trên bất kỳ thiết bị nào( sử dụng Jquery hoặc Zepto.js) Magnific Popup chỉ áp dụng cho Rails 3.1 trở lên.
II. Cài đặt
- Thêm vào Gemfile:
gem 'magnific-popup-rails', '~> 1.1.0'
- Chạy
bundle
. - Thêm vào application.css:
*= require magnific-popup
- Thêm vào application.js:
//= require magnific-popup
III. Sử dụng
Initializing popup:
- Sử dụng cho 1 element html:
<a class="test-popup-link" href="path-to-image.jpg">Open popup</a>
$('.test-popup-link').magnificPopup({
type: 'image'
// other options
});
- Sử dụng cho 1 tập html cha-con: Mỗi item sẽ được mở riêng rẽ, nếu bạn muốn mở theo kiểu gallery, thêm option sau:
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
});
- Sử dụng option
items
: optionitems
định nghĩa data cho popup, giá trị cho items có thể là 1 object hoặc 1 array các object.
// 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 có 4 loại cho content của nó:
- image: show hình ảnh hoặc tệp các hình ảnh
- iframe: show video, map..., mặc định Magnific Popup support Youtube, Vimeo, Google Maps
- inline: show nội dung của 1 đoạn html với class mfp-hide
để hidden popup.
- ajax: load nội dung của 1 file.
Không có type được cài đặt auto nên bạn phải định nghĩa nó khi mở popup.
Có 2 cách để định nghĩa type cho popup:
- Sử dụng rype option:$('.image-link').magnificPopup({type:'image'}).
- Sử dụng css classmfp-
+ type: <a class="mfp-image image-link">Open image</a>, $('.image-link').magnificPopup().
Source cho nội dung của popup(link tới ảnh, video, bản đồ hay tệp html) có thể được định nghĩa bởi 3 cách sau:
- Từ attribute href: <a href="image-for-popup.jpg">Open image</a>
- Từ attribute data-mfp-src
: <a data-mfp-src="image-for-popup.jpg">Open image</a>
- Từ option items:
$.magnificPopup.open({ items: { src: 'some-image.jpg' }, type: 'image' });
Ngoài ra, còn rất nhiều option và ứng dụng thú vị khi sử dụng Magnific Popup, bạn có thể tham khảo tại các link bên dưới:
http://dimsemenov.com/plugins/magnific-popup/
http://dimsemenov.com/plugins/magnific-popup/documentation.html
All Rights Reserved