Beiträge von niklasxyz

niklasxyz · 20. September 2017

Hallo,

Ich habe eine Jquery Lightbox erstellt. Diese erkennt auch ob das Bild hochformat oder querformat ist, auch wenn das sicher nicht optimal gelöst ist.

Mein Problem ist, dass die Lightbox nur ohne Figure Tags funktioniert. Ich wollte sie umschreiben, schaffe es aber nicht es so zu schreiben, dass wenn es am Ende der Galerie ist es wieder an den Anfang springt. Das Ganze Problem ist in der Function next_img zu finden wobei das gleiche Problem natürlich auch für die Prev_img Function gilt.

Vielen Dank schon mal.

Mein HTML:

HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Test</title>
    
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" type="text/css" href="css/icons/css/font-awesome.min.css">
    
    <link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/script.js"></script>
    
    
</head>
    
<style></style>

<body>

<!---header--->
<!---content--->
    <section id="gallery">
        <figure>
            <img id="first" class="row3" src="img/auditorium2.jpg" alt="#">
        </figure>
        <figure>    
            <img class="row3" src="img/auditorium.jpg" alt="#">
        </figure>
        <figure>
            <img class="row3" src="img/Glas-Kugel%20Moos.jpg">
        </figure>  
      
    </section>
<!---footer--->

</body>
</html>

Alles anzeigen

Mein CSS:

Code

} .row3 {
    max-width: calc(33.333% - 10px);
    padding: 5px;
    float: left;
}



/*Lightbox*/

#lightbox_overlay {
    position: fixed;
    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: 10%;
    left: 10%;
    right: 10%;
    text-align: center;
}

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

#lightbox_overlay #lightbox_inhalt .hoch {
    max-height: 80vh;
    max-width: 100%;
}


#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 fa-times {
    text-align: center;
}
#lightbox_overlay #lightbox_inhalt #nav .fa-arrow-right {
    float: right;
}

#lightbox_overlay #lightbox_inhalt #nav i {
    cursor: pointer;
}

Alles anzeigen

Mein Jquery:

Code

$(function(){
    
    //Globale Variablen - Funktionen
    
    var active_img;
    var img_url;
    var img_width;
    
    function testWidth() {
        if(img_width >= 3999) {
            $('#lightbox_overlay #lightbox_inhalt img').addClass('quer');
            console.log(img_width + '= Quer');
        } else{
            $('#lightbox_overlay #lightbox_inhalt img').addClass('hoch');
            console.log(img_width + '= Hoch');
        }; 
    };
    
    function removeClass() {
        $('#lightbox_overlay #lightbox_inhalt img').removeClass();
    };
    
    //Lightbox erstellen
    
    $('body').append('<div id="lightbox_overlay"><div id="lightbox_inhalt"><img/><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_width = $(this).prop('naturalWidth');
        testWidth();
        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);
        removeClass();
        
    });
    
    //nächstes Bild
    
    $('.fa-arrow-right').stop().click(function(){
        removeClass();
        next_img(active_img);
        
    });
    
    function next_img(objekt) {
        if($(objekt).parent().next().children().is('img')){
            active_img = $(objekt).parent().next().children();
            img_width = $(objekt).parent().next().children().prop('naturalWidth');
            testWidth();
            img_url = $(objekt).parent().next().children().attr('src');
            $('#lightbox_overlay #lightbox_inhalt img').attr('src', img_url);
        } else {
            active_img = $(objekt).parent().parent().first('figure').children('img');
            img_width = $(objekt).parent().parent().first('figure').children('img').prop('naturalWidth');
            testWidth();
            img_url = $(objekt).parent().parent().first('figure').children('img').attr('src');
            $('#lightbox_overlay #lightbox_inhalt img').attr('src', img_url);
        };
    };
    
    //vorheriges Bild 
    
    $('.fa-arrow-left').stop().click(function(){
        removeClass();
        prev_img(active_img);
    });
    
    function prev_img(objekt) {
        if($(objekt).prev().is('img')) {
            active_img = $(objekt).prev();
            img_width = $(objekt).prev().prop('naturalWidth');
            testWidth();
            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_width = $(objekt).parent().children('img').last().prop('naturalWidth');
            console.log(img_width);
            testWidth();
            img_url = $(objekt).parent().children('img').last().attr('src');
            $('#lightbox_overlay #lightbox_inhalt img').attr('src', img_url);
        }
    }
    

});

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.

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 · 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

niklasxyz · 10. Dezember 2016

Ich habe jetzt eine Lösung gefunden und es mit calc() umgesetzt. Es lag denke ich an den unterschiedlichen Größen der Bilder, da es mit Bildern der gleichen Größe klappte.
Vielen Dank an alle:D

niklasxyz · 9. Dezember 2016

Hallo, Ich habe 4 Bilder, die ich unter einander, mit 2 Bildern pro Reihe anordenen sollen.
Die erste Reihe funktioniert gut nur hat das dritte Bild wird nicht links angezeigt sondern rechts
und mein viertes wird dann in einer neuen Reihe angezeigt.
Vielen Dank schon mal und ich bin Anfänger sowohl in HTML als auch hier im Forum[Blockierte Grafik: http://www.forum-hilfe.de/images/smilies/wink.png]
P.s. Im Anhang noch ein Bild von dem was ich meine.
Hier der HTML Code:

HTML

<img class="firstrow" src="img/Studio/Kaffe_Splash.jpg" alt="#">
        <img class="firstrow" src="img/Studio/Seifenblase1.jpg" alt="#">
        <img class="firstrow" src="img/Studio/Wasser&ÃÂ–l.jpg" alt="#">
        <img class="firstrow" src="img/Studio/Farbexplosion.jpg" alt="#">

Und der Css Code:

CSS

.firstrow {
    max-width: 50%;
    float: left;
    max-width: 49.4%;
    padding: 5px;
}

Beiträge von niklasxyz

Jqeuery Lightbox

Jquery Img Lightbox

Jquery Img Lightbox

Jquery Img Lightbox

Galerie - Viel Whitespace bei Bilder in einer Galerie

Galerie - Viel Whitespace bei Bilder in einer Galerie