offizielle Dokumentation
Die Nummerierung bezieht sich auf die offizielle Doku
Wie immer müssen die js-Dateien nach den eigentliche jQuery js Dateien eingebunden werden. Außerdem gibt es noch eine CSS Datei. Siehe offizelle Dokumentation
Füge folgendes Snippet in die übliche document.ready Funktion im ScriptBlock ein.
$('.image-link').magnificPopup({type:'image'});
Füge in HTML einen Link mit Klassenzuweisung ein, der auf ein Bild verweist.
<p><a class="image-link" href="../images/kontakt.gif">Open popup</a>
Man kann statt Bildern auch andere Inhalte verlinken.
Im Prinzip wird hier genau wie im vorigen Beispiel, aus einem HTML Element verlinkt. Diese Methode kann man benutzen, wenn man eine Liste von Links hat. Es reduziert die Anzahl von Click Event Handlern.
$('.parent-container').magnificPopup({ delegate: 'a', // child items selector, by clicking on it popup will open type: 'image' // other options });
Das HTML Markup sieht so aus.
<div class="parent-container"> <a href="image-1.jpg"> Open popup 1</a> <a href="image-2.jpg">Open popup 2</a> <a href="image-3.jpg">Open popup 3</a> </div>
Das gleiche Beispiel kann man mit einem zusätzlichen Attribut in eine Gallery abändern.
$('.parent-container').magnificPopup({delegate: 'a', type: 'image', gallery:{enabled:true}});
$('#some-button').magnificPopup({items:{src: 'path-to-image-1.jpg'}, type: 'image'});
Hier wird der Pfad zum Content des Popups mit der items-Option definiert. Der zweite Parameter type, definiert den Standardtyp.
<a href="#" id="some-button">Open Object</a>
Wie immer kann man diese Funktion in eine Event Handler Funktion einfügen.
Man kann es für ein einzelnes Objekt nutzen, wie im vorigen Beispiel oder, wie in diesem Fall, für ein Array von Objekten.
Die items Option definiert Daten für die Popup-Elemente und erzeugt das Magnific Popup. Hier wird auch ein allgmeines type Attribut definiert siehe unten im Script
type: 'image' // this is default type
Da in diesem Beispiel alle Elemente diesem type entsprechen, braucht man keine weiteren Angaben machen. Im nächsten Beispiel werden unterschiedliche Elemente eingefügt.
$('#some-button').magnificPopup({ items: [ { src: '/onDesign/img/png/merkur.png' }, { src: '/onDesign/img/png/worker.png' }, { src: '/onDesign/img/png/teleman.png' }, { src: '/onDesign/img/png/druck.png' }, { src: '/onDesign/img/png/haendeDruck.png' } ], gallery: { enabled: true }, type: 'image' // das ist der Standard type });
Die Klassenzuweisung auf einen Button oder Link erfolgt wie oben.
<a href="#" id="some-button">Open Galery</a>
Hier wird die 'items' Option genutzt, um verschiedene Dinge anzuzeigen, IFrames, divs, img etc.
Die items Option definiert Daten für die Popup-Elemente und erzeugt das Magnific Popup. Hier wird auch ein allgmeines type Attribut definiert siehe unten im Script type: 'image' // this is default type
In den einzelnen Elementen kann man ein anderes Attribut vergeben, welches das allgmeine Attribut, überschreibt.
{
src: 'index.htm',
type: 'iframe' // this overrides default type
},
Das letzte Element #my-popup
ist Teil des HTML- Inhalts dieser Seite, der hier innerhalb des Popups eingefügt wird. Mit der Klassenzuweisung mfp-hide
kann man diesen Teil beim Aufruf der Seite ausblenden.
<div id="my-popup" class="mittig mfp-hide">
Hier das Script
//array $('#some-button').magnificPopup({ items: [ { src: '/onDesign/img/png/haendeDruck.png' }, { src: 'index.htm', type: 'iframe' // this overrides default type }, { src: $('<div class="mittig">Dynamically created element</div>'), // Dynamisch erzeugt type: 'inline' }, { src: '<div class="mittig">HTML string bla bla </div>', type: 'inline' }, { src: '#my-popup', // CSS Selektor eines Elements in der HTML Seite type: 'inline' } ], gallery: { enabled: true //standard typ }, type: 'image' });
Die Klassenzuweisung auf einen Button oder Link erfolgt wie oben.
<a href="#" id="some-button">Open Galery</a>