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>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;
}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);
}
}
});