Jquery Img Lightbox

niklasxyz · 7. August 2017

Hallo,

Ich habe eine Lightbox mit Hilfe eine Tutorials programmiert.

Diese spricht über .next().is('img') das nächste Bild an. Dies funktioniert auch, wenn ich eine HTML struktur habe die nur aus Bildern besteht. Wenn ich jedoch um die Bilder noch <figure> mach und auch eine <figcaption> funktioniert das nicht. ich denke mal, dass liegt an dem .next().

Wie könnte ich dies lösen?

Danke schon mal. Und Entschuldigung bin ein relativer Anfänger.

Also so ist mein HTML Code:

HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Übungsseite</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <link rel="stylesheet" type="text/css" href="css/icons/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="css/animate.css">
        <script src="js/jquery-3.2.1.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body>
        <section class="gallery">
                <img src="img/Glas-Kugel%20Moos.jpg">
                <img src="img/Glaskugel_Herbst.jpg">
                <img src="img/Hamburg_Hafenstadt.jpg">
       </section>
        
    </body>
</html>

Alles anzeigen

Mein Css Code:

Code

body {
    padding: 0;
    margin: 0;
}
.gallery figure img {
    width: 250px;
    height: auto;
    float: left;
    padding: 5px;
    
}

/*Lightbox*/

#lightbox_overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    display: none;
    
}

#lightbox_overlay #lightbox_inhalt {
    width: 80%;
    position: absolute;
    top: 5%;
    left: 10%;
    right: 10%;
    text-align: center;
}

#lightbox_overlay #lightbox_inhalt img {
    width: 80%;
    height: auto;
}

#lightbox_overlay #lightbox_inhalt #nav {
    color: #fff;
    font-size: 30px;
    margin: 0 0 20px 0;
    width: 100%;
    text-align: center;
}

#lightbox_overlay #lightbox_inhalt #nav .fa-arrow-left {
    float: left;
}

#lightbox_overlay #lightbox_inhalt #nav .fa-arrow-right {
    float: right;
}
#lightbox_overlay #lightbox_inhalt #nav i {
    cursor: pointer;
}

Alles anzeigen

Und hier mein Javascript Code:

Code

$(function(){
    
    //Globale Variablen
    
    var active_img;
    var img_url;
    
    //Lightbox erstellen
    
    $('body').append('<div id="lightbox_overlay"><div id="lightbox_inhalt"><img class="animated pulse"/><div id="nav"><i class="fa fa-arrow-left" aria-hidden="true"></i> <i class="fa fa-times" aria-hidden="true"></i><i class="fa fa-arrow-right" aria-hidden="true"></i></div></div></div>');
    
    //öffnen und Schließen
    
    $('.gallery img').stop().click(function(){
        
        img_url = $(this).attr('src');
        
        $('#lightbox_overlay #lightbox_inhalt img').attr('src', img_url);
        $('#lightbox_overlay').fadeIn(500);
        
        active_img = $(this);
    });
    
    $('.fa-times').stop().click(function(){
        
        $('#lightbox_overlay').fadeOut(300);
        
    });
    
    //nächstes Bild
    
    $('.fa-arrow-right').stop().click(function(){
        
        next_img(active_img);
    });
    
    function next_img(objekt) {
        if($(objekt).next().is('img')){
            active_img = $(objekt).next();
            img_url = $(objekt).next('img').attr('src');
            $('#lightbox_overlay #lightbox_inhalt img').attr('src', img_url);
        } else {
            
            active_img = $(objekt).parent().children('img').first();
            img_url = $(objekt).parent().children('img').first().attr('src');
            $('#lightbox_overlay #lightbox_inhalt img').attr('src', img_url);
        };
    };
    
    //vorheriges Bild 
    
    $('.fa-arrow-left').stop().click(function(){
        prev_img(active_img);
    });
    
    function prev_img(objekt) {
        if($(objekt).prev().is('img')) {
            active_img = $(objekt).prev();
            img_url = $(objekt).prev('img').attr('src');
            $('#lightbox_overlay #lightbox_inhalt img').attr('src', img_url);
        } else {
            active_img = $(objekt).parent().children('img').last();
            img_url = $(objekt).parent().children('img').last().attr('src');
            $('#lightbox_overlay #lightbox_inhalt img').attr('src', img_url);
        }
    }
});

Alles anzeigen

Sempervivum · 7. August 2017

Du brauchst im wesentlichen nur das, was das Skript bisher für img tut, für figure zu machen:

Code

<section class="gallery">
        <figure><img src="images/dia0.jpg">
            <figcaption>Bild 1</figcaption>
        </figure>
        <figure>
            <img src="images/dia1.jpg">
            <figcaption>Bild 2</figcaption>
        </figure>
        <figure>
            <img src="images/dia2.jpg">
            <figcaption>Bild 3</figcaption>
        </figure>
        <figure>
            <img src="images/dia3.jpg">
            <figcaption>Bild 4</figcaption>
        </figure>
    </section>

Alles anzeigen

Code

$(function () {

            //Globale Variablen

            var active_figure;
            var img_url;

            //Lightbox erstellen

            $('body').prepend('<div id="lightbox_overlay"><div id="lightbox_inhalt"><figure></figure><div id="nav"><i class="fa fa-arrow-left" aria-hidden="true"></i> <i class="fa fa-times" aria-hidden="true"></i><i class="fa fa-arrow-right" aria-hidden="true"></i></div></div></div>');

            //öffnen und Schließen

            $('.gallery figure').stop().click(function () {

                $('#lightbox_overlay #lightbox_inhalt figure').replaceWith($(this).clone());
                $('#lightbox_overlay').fadeIn(500);

                active_figure = $(this);
            });

            $('.fa-times').stop().click(function () {

                $('#lightbox_overlay').fadeOut(300);

            });

            //nächstes Bild

            $('.fa-arrow-right').stop().click(function () {

                next_figure(active_figure);
            });

            function next_figure(objekt) {
                if ($(objekt).next().is('figure')) {
                    active_figure = $(objekt).next();
                    $('#lightbox_overlay #lightbox_inhalt figure').replaceWith(active_figure.clone());
                } else {

                    active_figure = $(objekt).parent().children('figure').first();
                    $('#lightbox_overlay #lightbox_inhalt figure').replaceWith(active_figure.clone());
                };
            };

            //vorheriges Bild 

            $('.fa-arrow-left').stop().click(function () {
                prev_img(active_img);
            });

            function prev_img(objekt) {
                if ($(objekt).prev().is('img')) {
                    active_img = $(objekt).prev();
                    img_url = $(objekt).prev('img').attr('src');
                    $('#lightbox_overlay #lightbox_inhalt img').attr('src', img_url);
                } else {
                    active_img = $(objekt).parent().children('img').last();
                    img_url = $(objekt).parent().children('img').last().attr('src');
                    $('#lightbox_overlay #lightbox_inhalt img').attr('src', img_url);
                }
            }
        });

Alles anzeigen

Für previous kannst Du es selber umstellen.

niklasxyz · 9. August 2017

Vielen Dank erst mal für die Antwort.
Ich habe da jetzt gemacht. Jedoch öffnet sich jetzt wenn ich auf ein Bild klicke zwar das lightbox overlay, jedoch nicht das Bild.

Woran könnte das liegen?

Ich sende vorsichtshalber noch mal meinen jetzigen Code mit.

HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Übungsseite</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <link rel="stylesheet" type="text/css" href="css/icons/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="css/animate.css">
        <script src="js/jquery-3.2.1.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body>
        <section class="gallery">
            <figure>
                <img src="img/Glas-Kugel%20Moos.jpg">
                <figcaption></figcaption>
            </figure>
            <figure>
                <img src="img/Glaskugel_Herbst.jpg">
                <figcaption></figcaption>
            </figure>
            <figure>
                <img src="img/Hamburg_Hafenstadt.jpg">
                <figcaption></figcaption>
            </figure>
        </section>
        
    </body>
</html>

Alles anzeigen

Code

$(function(){
    
    //Globale Variablen
    
    var active_figure;
    var img_url;
    
    //Lightbox erstellen
    
    $('body').append('<div id="lightbox_overlay"><div id="lightbox_inhalt"><figure></figure><div id="nav"><i class="fa fa-arrow-left" aria-hidden="true"></i> <i class="fa fa-times" aria-hidden="true"></i><i class="fa fa-arrow-right" aria-hidden="true"></i></div></div></div>');
    
    //öffnen und Schließen
    
    $('.gallery figure').stop().click(function(){
        
        
        $('#lightbox_overlay #lightbox_inhalt figure').replaceWith($(this).clone());
        $('#lightbox_overlay').fadeIn(500);
        
        active_figure = $(this);
    });
    
    $('.fa-times').stop().click(function(){
        
        $('#lightbox_overlay').fadeOut(300);
        
    });
    
    //nächstes Bild
    
    $('.fa-arrow-right').stop().click(function(){
        
        next_figure(active_figure);
    });
    
    function next_figure(objekt) {
        if($(objekt).next().is('figure')){
            active_figure = $(objekt).next();
            $('#lightbox_overlay #lightbox_inhalt figure').replaceWith(active_figure.clone());
        } else {
            active_figure = $(objekt).parent().children('figure').first();
            $('#lightbox_overlay #lightbox_inhalt figure').replaceWith(active_figure.clone());
        };
    };
    
    //vorheriges Bild 
    
    $('.fa-arrow-left').stop().click(function(){
        prev_figure(active_figure);
    });
    
    function prev_figure(objekt) {
        if($(objekt).prev().is('figure')) {
            active_figure = $(objekt).prev();
            $('#lightbox_overlay #lightbox_inhalt figure').replaceWith(active_figure.clone());
        } else {
            active_figure = $(objekt).parent().children('figure').last();
            $('#lightbox_overlay #lightbox_inhalt figure').replaceWith(active_figure.clone());
        }
    }
});

Alles anzeigen

niklasxyz · 9. August 2017

Noch mal ein Nachtrag.
Meine Frage hat sich erledigt. Es lag am .append, dass ich vergessen hatte durch das .prepend zu ersetzen (warum die auswirkung ist mir jedoch unklar).

Vielen Dank.

Jquery Img Lightbox

Jetzt mitmachen!

Teilen

Tags