Startseite Skripte für das Wintersemester 2018/19 Webdesign Responsive Images, Transitions & Javascript Lightbox-Bilder

Lightbox-Bilder

Hier die Demo dazu – bitte schaut Euch dort auch den Source-Code von HTML, CSS und Javascript an!

Zip-Datei

Die Demo zusammengezippt zum Download…

HTML

    <!-- das spezielle Stylesheet fürs Popup -->
    <link rel="stylesheet" href="c/magnific-popup.css">
</head>

<body>

    <div class="galerie">

        <!-- Link zum großen Bild -->
        <a href="p/gross/1-gardasee.jpg" title="Der hier eingefügte Texte wird beim Popup sichtbar!">
            <figure>
                <img src="p/klein/1-gardasee.jpg" alt="Gardasee">
                <figcaption><p>Erklärender Text zum jeweiligen Bild, der auch über mehrere Zeilen gehen kann</p></figcaption>
            </figure>
        </a>

        <!-- usw. -->

    </div><!--/galerie-->

    <!-- benötigte Verlinkungen zu Javascript-Dateien -->
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

CSS

/* zusätzliche CSS-Anweisungen, damit HG langsam abgedunkelt wird */
.mfp-fade.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

Javascript

/* den Code könnt Ihr 1:1 übernehmen, wenn Ihr die gleichen Klassen ("galerie" usw.) verwendet! */
$(function(){
    // alle Links innerhalb von <div class="galerie"> werden angesprochen
    $('.galerie a').magnificPopup({
        type:'image',

        image: {
        // Inhalt des title wird unterhalb des Bildes angezeigt
        // http://dimsemenov.com/plugins/magnific-popup/documentation.html#options
        titleSrc: 'title'
        },

        // Class that is added to popup wrapper and background
        // make it unique to apply your CSS animations just to this exact popup
        mainClass: 'mfp-fade',

        // Animationen beim Ein- und Ausblenden sind möglich
        // siehe dazu: http://dimsemenov.com/plugins/magnific-popup/documentation.html#animation

        // damit kann man mit Pfeiltasten von einem Bild zum nächsten klicken
        // wenn man das nicht will: statt true hier false schreiben
        gallery:{
            enabled:true
        }
    });
});

Verwendetes Plugin:

ausführliche Dokumentation dazu: http://dimsemenov.com/plugins/magnific-popup/documentation.html

→ Begriff suchen