Magnific Pop Up / jQuery

offizielle Dokumentation
Die Nummerierung bezieht sich auf die offizielle Doku

1. Magnific pop up: HTML Element
2. Gruppe von Elementen mit einem parent
   1. Magnific pop up: Gruppe von Elementen
   2. Magnific pop up: Gruppe von Elementen mit Gallery
3. from items option
   1. Magnific pop up: Item einzeln
   2. Magnific pop up: Item Gallery
   3. Magnific pop up: Verschiedene Objekte in einer Galerie
4. Magnific pop up
5. Magnific pop up

zurück

Einbinden

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

Initialisierung aus einem HTML Element

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>

so sieht's aus

Man kann statt Bildern auch andere Inhalte verlinken.

Aus einer Gruppe von Elementen mit einem parent

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>

so sieht's aus

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

so sieht's aus

Initialisierung mit der 'items' Option

$('#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>

so sieht's aus

Wie immer kann man diese Funktion in eine Event Handler Funktion einfügen.

so sieht's aus

Initialisierung mit 'items' und 'gallery' Option

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>

so sieht's aus

Galerie mit verschiedenen Typen

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>

so sieht's aus