Light and responsive lightbox script with focus on performance.

Overview

Magnific Popup Repository

Build Status Flattr

Fast, light and responsive lightbox plugin, for jQuery and Zepto.js.

Optionally, install via Bower bower install magnific-popup or npm: npm install magnific-popup. Ruby gem: gem install magnific-popup-rails.

Extensions

If you created an extension for some CMS, email me and I'll add it to this list.

Location of stuff

  • Generated popup JS and CSS files are in folder dist/. (Online build tool is on documentation page).
  • Source files are in folder src/. They include Sass CSS file and js parts (edit them if you wish to submit commit).
  • Website (examples & documentation) is in folder website/.
  • Documentation page itself is in website/documentation.md (contributions to it are very welcome).

Using Magnific Popup?

If you used Magnific Popup in some interesting way, or on site of popular brand, I'd be very grateful if you email me a link to it.

Build

To compile Magnific Popup by yourself, first of make sure that you have Node.js, Grunt.js, Ruby and Jekyll installed, then:

  1. Copy repository

    git clone https://github.com/dimsemenov/Magnific-Popup.git

  2. Go inside Magnific Popup folder that you fetched and install Node dependencies

    cd Magnific-Popup && npm install

  3. Now simply run grunt to generate JS and CSS in folder dist and site in folder _site/.

    grunt

Optionally:

  • Run grunt watch to automatically rebuild script when you change files in src/ or in website/.
  • If you don't have and don't want to install Jekyll, run grunt nosite to just build JS and CSS files related to popup in dist/.

Changelog

License

Script is MIT licensed and free and will always be kept this way. But has a small restriction from me - please do not create public WordPress plugin based on it(or at least contact me before creating it), because I will make it and it'll be open source too (want to get notified?).

Created by @dimsemenov & contributors.

Bitdeli Badge

Bugs & contributing

Please report bugs via GitHub and ask general questions through Stack Overflow. Feel free to submit commit pull-request, even the tiniest contributions to the script or to the documentation are very welcome.

Comments
  • Jumping background

    Jumping background

    Because the scrollbar disappears in the background, when using the lightbox, all content jumps around in the back. Would it be possible to make some kind of smart reversion, so all content stays in place? It looks a little bit "broken"

    opened by universaldenmark 33
  • Animation on Gallery

    Animation on Gallery

    I have a gallery setup with different links pointing to AJAX content. Is there a way to animate so that when you click the next or previous buttons it fades the windows in and out instead of just blinking to the other window.

    Thanks

    opened by alexranc 23
  • contentParse is not implemented?

    contentParse is not implemented?

    I see in the documentation that there is a contentParse callback, but I don't see it implemented anywhere, and it doesn't work in my project. Does anyone have the same problem? Or am I understanding the documentation wrong?

    opened by tnguyen14 17
  • feature request: srcset=

    feature request: srcset=""-Option

    Hello!

    It would be great to give Magnific Popup a srcset-value for the img-tag, like in this example:

    <a href="image-for-popup.jpg" data-mfp-srcset="image-1x.png 1x, image-2x.png 2x">Open image</a>
    

    The value should be added to mfp's img-tag.

    opened by alxndr-w 16
  • Less dependent on window object: first step for CommonJS/AMD compatibility

    Less dependent on window object: first step for CommonJS/AMD compatibility

    It would be great if magnific-popup would support CommonJS/AMD to work with Browserify/RequireJS.

    This is a first step to it, because with this PR it no longer requires environments where jQuery is attached to the window object.

    opened by TomOne 14
  • Multiple Galleries

    Multiple Galleries

    **Hi I have seen a number of questions on this but no example that I can get to work at my end..

    I have several thumbs on one page, each open a separate set of images, but when the set of images is finished, the gallery picks the images from the next gallery instead of the starting at the beginning again.

    Previously I have simple had to assign a different ID to each of the sets, but in this case I cannot seem to find a solution. Script and HTML included below, ANY suggestion is greatly appreciated!!**

    <head>
    <script>
    	$(document).ready(function() {
    	$('.popup-gallery').magnificPopup({
    		delegate: 'a',
    		type: 'image',
    		tLoading: 'Loading image #%curr%...',
    		mainClass: 'mfp-img-mobile',
    		gallery: {
    			enabled: true,
    			navigateByImgClick: true,
    			preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    		}, 
    		image: {
    			tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
    			titleSrc: function(item) {
    				return item.el.attr('title') + '<small>: Honey & Bear Bar</small>';
    			}
    		}
    	});
    });
    </script>
    </head>
    
    opened by vikingbeards 13
  • Gallery images skipped in iOS

    Gallery images skipped in iOS

    Hi,

    we've been noticing a weird behavior on iOS. If I have, say, 8 images in a gallery, they load correctly on desktop, and clicking on the navigation arrows indeed makes the gallery go to the next or prev image.

    On iOS though, clicking on the "next" arrow, makes the gallery skip from the 1st image to the 3rd; clicking on the image (navigateByImgClick: true) works correctly, so does the API method .next().

    opened by thehappybit 13
  • Safari 7.1 en Safari 8 seem to break on magnificPopup

    Safari 7.1 en Safari 8 seem to break on magnificPopup

    As soon as a magnificPopup() is called on an element in the latest safari versions, a syntax error is thrown. This happens on: OSX Yosemite - Safari 8 and OSX Mavericks 10.9.5 - Safari 7.1 both have this problem.

    Error is: Syntax error: - Invalid character '\u0215'

    screen shot 2014-09-27 at 12 31 35

    opened by whvandervelde 12
  • Disable Gallery Looping

    Disable Gallery Looping

    I would like prevent galleries from looping the last image back to the first. Instead, I'd like the gallery to close after the last image.

    Is there a way to do this? I found nothing about looping enable/disable in the documentation.

    Thanks, Matt

    opened by mjcampagna 12
  • Open/close popup from javascript (without link)

    Open/close popup from javascript (without link)

    I'm working on implementing a login popup window using this framework and stuck with the issue of how to programmably open and close some specified popup without having a corresponding link? Your documentation is great, but unfortunately I haven't found anything in this regard. Could you please provide some handy API just to open and close specific popup? Thank you in advance for your answer!

    opened by andronix83 12
  • Plugin doesn't work within Angular ng-repeat directive

    Plugin doesn't work within Angular ng-repeat directive

     //Magnific-popup
    

    $('.single-popup').magnificPopup({ type: 'image', removalDelay: 300, mainClass: 'mfp-with-fade', closeOnContentClick: true });

    An example from the site copied/pasted works fine, however anything with a databinded href value that is pathed via '../' does not work. Instead it routes my site to the home page. There are no additional functions on the images not working.

    The code

    magnificpopup href issue

    opened by bradmartin 11
  • XSS vulnerability

    XSS vulnerability

    Magnific Popup uses a parameter called preloader, which by default is set to true.

    Using a specifically crafted payload (in src URL) two things happen:

    Initially, the text variable in the updateStatus function is set to “Loading…”

    magnific_popup_vulnerability_debug1

    Then it takes the value passed to it by the default error handling function (which contains the URL).

    mfp.updateStatus('error', imgSt.tError.replace('%url%', item.src) );

    magnific_popup_vulnerability_debug2

    The problem here is that the .html() function does not escape HTML and could be used to inject code.

    The vulnerability, if exploitable, can even lead to "stored XSS".

    opened by emizzz 0
  • Update documentation.md

    Update documentation.md

    Explain the class "mfp-img-mobile" and the common way many people invoke it in example code. I cannot find where that class is documented otherwise, but it's hugely useful (maybe it should be a default actually).

    opened by kc0bfv 0
  • how to disable it on some  links?

    how to disable it on some links?

    I want to disable Magnific-Popup on some links and I don't even know why it is working on these links they don't contain any images already and the links are not image paths! take a look:

     <a href="https://abod1960.artstation.com/projects/8eK53q" target="_blank">
                  <div class="info">
                    <h3>See The Castle</h3>
                    <div class="cat"></div>
                    <div class="icons_container">
                      <span class="small_icons">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512" fill="color"
                          stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round"
                          class="feather feather-corner-up-right about__button-icon" id="bicon">
                          <path
                            d="M26,365.896l38.925,67.261c7.695,15.208,23.354,25.617,41.55,25.617h258.357l-53.591-92.878H26z     M478.44,341.094L327.989,77.938c-7.785-14.664-23.265-24.713-41.099-24.713h-80.023l232.919,405.186l36.843-63.818    C478.35,391.697,495.64,367.706,478.44,341.094z M273.131,299.903L168.576,118.856L64.02,299.903H273.131z">
                          </path>
                        </svg>
                      </span>
                    </div>
                  </div>
                </a>
    

    then this is the result: image

    and if I click the link "the image" it will take me to the link I added already {https://abod1960.artstation.com/projects/8eK53q} not for any images, so I'm wondering why it is activating itself even tho there are no img paths or links?

    opened by Abod1960 0
  • Audit usage Error

    Audit usage Error

    Hello in my browser started to show this error for: jquery.magnific-popup.min.js i use 1.1.0 version A page or script is accessing at least one of navigator.userAgent, navigator.appVersion, and navigator.platform. Starting in Chrome 101, the amount of information available in the User Agent string will be reduced. To fix this issue, replace the usage of navigator.userAgent, navigator.appVersion, and navigator.platform with feature detection, progressive enhancement, or migrate to navigator.userAgentData.

    Any ideas how to fix this error?

    opened by Th3AnG3L 0
  • Fix dart sass division

    Fix dart sass division "/" syntax error, use calc() instead

    Hi! 👋

    Firstly, thanks for your work on this project! 🙂

    Today I used patch-package to patch [email protected] for the project I'm working on.

    Here is the diff that solved my problem:

    diff --git a/node_modules/magnific-popup/src/css/_settings.scss b/node_modules/magnific-popup/src/css/_settings.scss
    index 75eadbc..88a930b 100644
    --- a/node_modules/magnific-popup/src/css/_settings.scss
    +++ b/node_modules/magnific-popup/src/css/_settings.scss
    @@ -27,7 +27,7 @@ $mfp-include-iframe-type:             true !default;                       // En
     $mfp-iframe-padding-top:              40px !default;                       // Iframe padding top
     $mfp-iframe-background:               #000 !default;                       // Background color of iframes
     $mfp-iframe-max-width:                900px !default;                      // Maximum width of iframes
    -$mfp-iframe-ratio:                    9/16 !default;                       // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)
    +$mfp-iframe-ratio:                    calc( 9 / 16 ) !default;                       // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)
     
     // Image-type options
     $mfp-include-image-type:              true !default;                       // Enable Image-type popups
    

    This issue body was partially generated by patch-package.

    opened by 9ete 0
  • allow mulitple instances of %id% in iframe src

    allow mulitple instances of %id% in iframe src

    Passing in the same video id as a playlist parameter allows the video to loop. To do this we need multiple replacements of the %id%.

    This PR simply changes this to a global string match so all instances of the %id% template is replaced.

    eg. https://www.youtube.com/embed/q3uXXh1sHcI?autoplay=1&loop=1&playlist=q3uXXh1sHcI

    opened by vmanera 0
Releases(1.1.0)
  • 1.1.0(Feb 20, 2016)

    • Dropped built-in fast-click support in favor of modern touch-action property. If you still need it in browsers that have 300ms delay, use FastClick by FT Labs.
    • Dropped basic IE7 support (if you still need to support old IE, keep using the previous version).
    • Sanitized attributes with jQuery when replacing img element (#770 via @makkaq).
    • Added 'style' property to package.json (#816 via @jonscottclark).
    • Removed vendor prefixes for box-sizing and box-shadow (via @chicagoing).
    Source code(tar.gz)
    Source code(zip)
  • 1.0.1(Dec 30, 2015)

    • New option autoFocusLast to on/off autofocusing after popup close (via @resetko).
    • Shift- and alt-click allows default browser behaviour if option midClick:true (via @Noitidart).
    • Changed &times; to &#215; for XHTML compability (via @edelbluth).
    Source code(tar.gz)
    Source code(zip)
  • 1.0.0(Dec 12, 2014)

    • Added Require.js/AMD/CommonJS support (thanks to @mpdude).
    • Popup now uses alt attribute from thumbnail that opens it (if present).
    • Prevent word wrap in "1 of X" counter (thanks to @peschee).
    • Minor fixes and improvements in site & documentation, see commit history for more info.
    Source code(tar.gz)
    Source code(zip)
  • 0.9.9(Nov 15, 2013)

    • Popup instance object is now available even before the first $.fn.magnificPopup call.
    • Methods _onFocusIn and _setFocus are now public, to allow overriding.
    Source code(tar.gz)
    Source code(zip)
  • 0.9.8(Oct 26, 2013)

    • Added figure and figcaption elements to image markup (#233, thanks to @pjackson28).
    • To avoid "jump" of content background, gap from right side (that "replaces" the scrollbar) is added with help of margin, instead of padding, (closes #125, thanks to @chodorowicz).
    • Function that checks if the clicked element should close popup or not is now public (so it can be overridden with your own logic).
    • Working on a new module: the exact copy of native fullscreen Android/iOS gallery, with touch/zoom/pan e.t.c., will publish branch soon (©Blizzard).
    Source code(tar.gz)
    Source code(zip)
  • 0.9.7(Oct 10, 2013)

    • CSS: removed outline on buttons (thanks to @OriginalEXE).
    • Allow multiple string tokens to be passed in gallery variables like %curr% of %total% and %title% (#234, thanks to Petr Marek).
    • A few small changes to Grunt build, grunt-contrib-sass > grunt-sass. (thanks to @nschonni).
    Source code(tar.gz)
    Source code(zip)
  • 0.9.6(Sep 29, 2013)

    • Fixed bug: options object that you pass to popup gets modified after the initialization (#217, #203).
    • Fixed bug: zoom module creates global variable (#226).
    • Fixed bug: gallery from AJAX popups stacks content if it's switched before loading has finished.
    • Indented and combined SCSS classes (thanks to @nschonni).
    • $.magnificPopup.close() now doesn't throw an exception if there's no instance (#221, thanks to @mjlescano).
    Source code(tar.gz)
    Source code(zip)
jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

fancyBox jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable. See the project page for doc

Jānis Skarnelis 7.2k Jan 2, 2023
A light-weight, customizable lightbox plugin for jQuery

About Colorbox: A customizable lightbox plugin for jQuery. See the project page for documentation and a demonstration, and the FAQ for solutions and e

Jack Moore 4.8k Dec 29, 2022
:zap: Simple and easy to use lightbox script written in pure JavaScript

baguetteBox.js Simple and easy to use lightbox script written in pure JavaScript. Demo page Table of contents Features Installation Importing Usage Cu

Marek Grzybek 2.3k Jan 3, 2023
THE original Lightbox script (v2).

Lightbox2 The original lightbox script. Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup a

Lokesh Dhakar 5.8k Jan 3, 2023
A customizable, modular, responsive, lightbox gallery plugin.

lightGallery A customizable, modular, responsive, lightbox gallery plugin for jQuery. Demo JQuery lightGallery demo. Codepen demo Main features Fully

Sachin N 5.6k Jan 4, 2023
Touch-friendly image lightbox for mobile and desktop

Touch-friendly image lightbox for mobile and desktop

Andre Rinas 938 Jan 5, 2023
A touchable jQuery lightbox

Swipebox A touchable jQuery lightbox. View project page What is Swipebox ? Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet. Feat

null 2k Dec 6, 2022
Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.

Note: Since this plugin was created to solve a lot of the issues with BS2, it still uses the BS2 markup syntax. Currently I believe the default BS3 mo

Jordan Schroter 5k Dec 28, 2022
Elegant, responsive, flexible and lightweight modal plugin with jQuery.

iziModal Elegant, responsive, flexible and lightweight modal plugin with jQuery. izimodal.marcelodolza.com Fast Responsive Animated Lightweight Custom

Marcelo Dolza 2.1k Dec 30, 2022
A Lightweight Responsive jQuery Tooltip Plugin

tipso A Lightweight Responsive jQuery Tooltip Plugin There is also a Wordpress version of this plugin. Get it here Getting started Include jQuery <scr

Bojan Petkovski 325 Dec 21, 2022
A modern dialog library which is highly configurable and easy to style. #hubspot-open-source

vex Demo Documentation vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way. You'll love vex because

HubSpot 6.9k Jan 5, 2023
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.

jBox jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more. Demo: https://stephanwagner.

Stephan Wagner 1.4k Dec 15, 2022
A modern dialog library which is highly configurable and easy to style. #hubspot-open-source

vex Demo Documentation vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way. You'll love vex because

HubSpot 6.9k Apr 1, 2021
Simple to use modal / alert / dialog / popup. Created with vanilla JS. No javascript knowledge required! Works on every browser and device! IE9

EinsModal The last modal / alert / dialog you will ever need! Full Documentation: https://www.einscms.com/modal EinsModal is the best solution to inte

EinsCMS 30 Oct 20, 2022
A simple vanilla and lightweight modal which is easy to expand

A simple vanilla and lightweight modal which is easy to expand

null 1 Jul 3, 2022
Bootstrap-Lightbox - Simple & lightweight lightbox for Bootstrap 5

Bootstrap-Lightbox Simple & lightweight lightbox for Bootstrap 5 Basic Usage Adding data-modal="bs-lightbox" in your A href tag. <a data-modal="bs-lig

null 1 Oct 11, 2022
jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

fancyBox jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable. See the project page for doc

Jānis Skarnelis 7.2k Jan 2, 2023
why make apps to increase focus -- when you can make apps to reduce focus

impossifocus ?? What is this? ImpossiFocus will measure focus by reading your brainwaves -- and if you're in the zone, it'll ensure that changes with

Aleem Rehmtulla 10 Nov 30, 2022
A light-weight, customizable lightbox plugin for jQuery

About Colorbox: A customizable lightbox plugin for jQuery. See the project page for documentation and a demonstration, and the FAQ for solutions and e

Jack Moore 4.8k Dec 29, 2022
A light-weight, no-dependency, vanilla JavaScript engine to drive the user's focus across the page

Driver.js Powerful, highly customizable vanilla JavaScript engine to drive the user's focus across the page No external dependencies, supports all maj

Kamran Ahmed 14.3k Jan 4, 2023