Categories

Ausgewählte Vorlagen

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

Norman Fisher Januar 21, 2014
Rating: 3.4. From 7 votes.
Please wait...

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
Dieser Eintrag wurde um JS Animated Tutorials, Arbeit mit HTML, Arbeit mit jQuery Skripte geschrieben und implement, lightbox, Magnific, popup, use markiert. Bookmarken Sie den permalink.

Submit a ticket

Sollte Ihre Frage durch die Tutorials nicht ausreichend beantwortet worden sein, benutzen Sie bitte den folgenden Link, um sich an unser Beratungsteam (Support) zu wenden. Wir bieten Ihnen unsere Hilfe und Unterstutzung an. 24 Stunden am Tag, 7 Tage die Woche!
Ticket Einrichten

Online-Chat
We help you to choose the right product.