Wenn dieses Tutorial ist nicht genau was Sie suchen und Sie noch Fragen oder Vorschläge haben – lassen Sie uns wissen. Helfen Sie uns bitte um besser zu dienen!

Ihr Name

Emailadresse

Ihre Nachricht (benötigt)

captcha

Ausgewählte Vorlagen

JS Animated. Wie wendet man Plugin lightbox jQuery “Magnific Popup”an

Das jeweilige Tutorial zeigt, wie wendet man Plugin lightbox jQuery Magnific Popup in der Vorlage JS Animated an.

JS Animated. Wie wendet man Plugin lightbox jQuery “Magnific Popup”an

Magnific Popup – ist das schnelles, einfaches, passendes für mobile Geräte, adaptives Plugin für lightbox und dialogunterstütztes modales Bildfenster,das auf Bibliothek jQuerygebildet ist. Die Demo-Version kann man auf der Webseite CodePensehen. Um ein Plugin auf die Seite hinzuzufügen:

  1. Laden Sie die Datei Magnific-Popup-master.zip auf dem Link https://github.com/dimsemenov/Magnific-Popup  auf den Computer herunter und ziehen Sie es aus dem Archiv aus.

    js_animated_jquery_magnific_popup_lightbox_plugin_implementing_1
  2. Kopieren Sie den Ordner dist und setzen Sie in den Ordner site der Vorlage ein.

    js_animated_jquery_magnific_popup_lightbox_plugin_implementing_2
  3. Öffnen Sie die Datei .html mit dem Bild, auf welche man Plugin anzuwenden braucht und mittels DreamWeaver fügen Sie in die Bibliothek und Tabelle der Stile ins Tag <head> hinzu:
    <!-- Magnific Popup core CSS file -->
      <link rel="stylesheet" href="./dist/magnific-popup.css">
    
    <!-- Magnific Popup core CSS file --> 
      <link rel="stylesheet" href="./dist/magnific-popup.css"> 
    
    <!-- Magnific Popup core JS file --> 
      <script src="./dist/jquery.magnific-popup.js"></script>
    
    js_animated_jquery_magnific_popup_lightbox_plugin_implementing_3
  4. Drücken Sie die Zeile mit dem Bild, zum Beispiel:
  5. <img src="images/image_small.jpg" alt="" />
    
  6. Redigieren Sie auf folgende Weise
  7. <a class="image-popup-vertical-fit" href="images/image_big.jpg" title="Title">
        <img src="images/image_small.jpg">
    </a>
    
    js_animated_jquery_magnific_popup_lightbox_plugin_implementing_4
  8. Im Ordner images sollen sich Dateien image_big.jpg und image_small.jpg entsprechend befinden.
  9. js_animated_jquery_magnific_popup_lightbox_plugin_implementing_5
  10. Um aufschwimmendes Bildfenster zu initialisieren, fügen Sie die jeweilige Kennummer in die Datei .html nach dem schließenden Tag </head> oder in Footer (vor dem schließenden Tag </body>hinzu:
  11. <script>
    $(document).ready(function() {
     
        $('.image-popup-vertical-fit').magnificPopup({
            type: 'image',
            closeOnContentClick: true,
            mainClass: 'mfp-img-mobile',
            image: {
                verticalFit: true
            }
             
        });
     
    });
    </script>
    
    js_animated_jquery_magnific_popup_lightbox_plugin_implementing_6
  12. Speichern Sie die Veränderungen und öffnen Sie die Seite im Browser: das Bild soll lightbox mit einer Überschrift erscheinen. Um Plugin zu aktivieren, die Webseite soll sich auf entferntem/lokalem Server befinden.
js_animated_jquery_magnific_popup_lightbox_plugin_implementing_7

Mehr ausführliche Information kann man in der offiziellen Anleitung finden: http://dimsemenov.com/plugins/magnific-popup/documentation.html#initializing_popup

Sie können auch zum Vorwand ein ausführliches Tutorialvideo nehmen:

JS Animated. Wie wendet man Plugin lightbox jQuery “Magnific Popup”an
 
Online-Chat
We help you to choose the right product.
Chat starten