Created
February 15, 2017 17:18
-
-
Save merli129/8d0ee0d66c7c3ba3152c3af7ab899bbd to your computer and use it in GitHub Desktop.
Magnific Popup Usage
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h3>Magnific Popup CSS3-based animation effects</h3> | |
| <div class="links"> | |
| <h4>Text-based:</h4> | |
| <ul id="inline-popups"> | |
| <li><a href="#test-popup" data-effect="mfp-zoom-in">Zoom</a></li> | |
| <li><a href="#test-popup" data-effect="mfp-newspaper">Newspaper</a></li> | |
| <li><a href="#test-popup" data-effect="mfp-move-horizontal">Horizontal move</a></li> | |
| <li><a href="#test-popup" data-effect="mfp-move-from-top">Move from top</a></li> | |
| <li><a href="#test-popup" data-effect="mfp-3d-unfold">3d unfold</a></li> | |
| <li><a href="#test-popup" data-effect="mfp-zoom-out">Zoom-out</a></li> | |
| </ul> | |
| <a href="#test-popup" class="hinge">Popup with "hinge" close effect</a> (based on animate.css) | |
| <h4>Image-based:</h4> | |
| <ul id="image-popups"> | |
| <li><a href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Prasat_Sikhoraphum_-_Sikhoraphum_edit1.jpg/800px-Prasat_Sikhoraphum_-_Sikhoraphum_edit1.jpg" data-effect="mfp-zoom-in">Zoom</a></li> | |
| <li><a href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Prasat_Sikhoraphum_-_Sikhoraphum_edit1.jpg/800px-Prasat_Sikhoraphum_-_Sikhoraphum_edit1.jpg" data-effect="mfp-newspaper">Newspaper</a></li> | |
| <li><a href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Prasat_Sikhoraphum_-_Sikhoraphum_edit1.jpg/800px-Prasat_Sikhoraphum_-_Sikhoraphum_edit1.jpg" data-effect="mfp-move-horizontal">Horizontal move</a></li> | |
| <li><a href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Prasat_Sikhoraphum_-_Sikhoraphum_edit1.jpg/800px-Prasat_Sikhoraphum_-_Sikhoraphum_edit1.jpg" data-effect="mfp-move-from-top">Move from top</a></li> | |
| <li><a href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Prasat_Sikhoraphum_-_Sikhoraphum_edit1.jpg/800px-Prasat_Sikhoraphum_-_Sikhoraphum_edit1.jpg" data-effect="mfp-3d-unfold">3d unfold</a></li> | |
| <li><a href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Prasat_Sikhoraphum_-_Sikhoraphum_edit1.jpg/800px-Prasat_Sikhoraphum_-_Sikhoraphum_edit1.jpg" data-effect="mfp-zoom-out">Zoom-out</a></li> | |
| </ul> | |
| </div> | |
| <!-- Popup itself --> | |
| <div id="test-popup" class="white-popup mfp-with-anim mfp-hide">You may put any HTML here. This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</div> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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 | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment