Gem Magnific-Popup-Rails

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: option items đị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