CSS3 Animation Effects With jQuery Plugin – Magnific-Popup.js

LightBox
Demo    Download
Powerful and Multi-Functional jQuery Lightbox Plugin - Magnific Popup
File Size: 11.35 KB
Views Total: 729 views
Last Update:February 21, 2021
Publish Date: September 6, 2020
Official Website: Go to website
License: MIT
Plugin Author: dimsemenov

A Simple Fast, light and responsive Animation lightbox plugin with Magnific Popup. it is a simple but powerful jQuery plugin that aims to create high performance and multi-functional lightboxs for your projects. 

Table of Contents

Features:

Lightweigt and easy to use
Smart and fast
Retina ready
CSS3 transitions supported
Supports for any html elements like image, video, ajax content, etc

How to use it ?

1. Include jQuery library and Magnific Popup Plugin in the header of your web page

<script src="http:jquery/1.9.1/jquery.min.js"></script>
<script src="magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

2. Include magnific-popup.css to style your plugin

<link href="dist/magnific-popup.css" rel="stylesheet" type="text/css">

3. The Html

<div class="md-modal md-effect-1" id="modal-1">
	<div class="md-content">
		<h3>Modal Dialog</h3>
		<div>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> Modal windows will probably tell you something important so don't forget to read what it says.</li>
				<li><strong>Look:</strong> modal windows enjoy a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="md-close">Close me!</button>
		</div>
	</div>
</div>

...

<div class="md-overlay"></div>

4. Call the plugin

 // Inline popups
$('#inline-popups').magnificPopup({
  delegate: 'a',
  removalDelay: 500, //delay removal by X to allow out-animation
  callbacks: {
    beforeOpen: function() {
       this.st.mainClass = this.st.el.attr('data-effect');
    }
  },
  midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});


// Image popups
$('#image-popups').magnificPopup({
  delegate: 'a',
  type: 'image',
  removalDelay: 500, //delay removal by X to allow out-animation
  callbacks: {
    beforeOpen: function() {
      // just a hack that adds mfp-anim class to markup 
       this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
       this.st.mainClass = this.st.el.attr('data-effect');
    }
  },
  closeOnContentClick: true,
  midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});


// Hinge effect popup
$('a.hinge').magnificPopup({
  mainClass: 'mfp-with-fade',
  removalDelay: 1000, //delay removal by X to allow out-animation
  callbacks: {
    beforeClose: function() {
        this.content.addClass('hinge');
    }, 
    close: function() {
        this.content.removeClass('hinge'); 
    }
  },
  midClick: true
});

Done


Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.