สร้าง Magnific Popup ด้วย jQuery

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Ik Kat
PHP Super Member
PHP Super Member
โพสต์: 291
ลงทะเบียนเมื่อ: 26/06/2017 2:32 pm

สร้าง Magnific Popup ด้วย jQuery

โพสต์โดย Ik Kat » 29/06/2017 1:27 pm

Magnific Popup เป็นปลั๊กอินหนึงของ jQuery ซึ่งสามารถใช้งานได้ทั้งรูปภาพ และ iframe เช่น YouTube video, Vimeo รวมไปถึง Google Maps อีกด้วย
ความสามารถให้การแสดงรูปภาพของ Magnific Popup สามารถสร้างได้ทั้งแบบรูปภาพเดียว หรือเป็นแกลเลอรีก็ได้

MT19 29-6-60(10).png
Magnific Popup
MT19 29-6-60(10).png (157.85 KiB) เปิดดู 14 ครั้ง

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>


Initializing popup :

โค้ด: เลือกทั้งหมด

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


1. From an HTML element :

โค้ด: เลือกทั้งหมด

<a class="test-popup-link" href="path-to-image.jpg">Open popup</a>
$('.test-popup-link').magnificPopup({
  type: 'image'
  // other options
});


2. From a group of elements with one parent :

โค้ด: เลือกทั้งหมด

<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. From the ‘items’ option :

โค้ด: เลือกทั้งหมด

// 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
});


MT19 29-6-60(11).png
แสดงภาพเดียว
MT19 29-6-60(11).png (531.2 KiB) เปิดดู 14 ครั้ง

MT19 29-6-60(12).png
แสดงเป็นแกลอรี่
MT19 29-6-60(12).png (238.5 KiB) เปิดดู 14 ครั้ง

Image 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
}


MT19 29-6-60(13).png
YouTube
MT19 29-6-60(13).png (326.32 KiB) เปิดดู 14 ครั้ง

MT19 29-6-60(14).png
Vimeo
MT19 29-6-60(14).png (92.82 KiB) เปิดดู 14 ครั้ง

MT19 29-6-60(15).png
Google Map
MT19 29-6-60(15).png (203.47 KiB) เปิดดู 14 ครั้ง

Iframe Type :

โค้ด: เลือกทั้งหมด

// 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".
}

ตัวอย่างเพิ่มเติม : http://dimsemenov.com/plugins/magnific-popup/documentation.html

นอกจากนี้ทาง Magnific Popup ยังมีปลั๊กอินสำหรับ WordPress อีกด้วย
สามารถดาวน์โหลดได้ที่ : http://plugins.jquery.com/magnific-popup/

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 4 และ บุคคลทั่วไป 0 ท่าน