var loginPopupState = false;
var lightboxState = false;
var lightboxCurrentImage = -1;
var images = [<?php if(isset($_GET["hash"])) { echo listPhotoURLs(getGalleryDir($_GET["hash"])); } ?>];
// shows and hides the login-popup
async function loginPopup() {
if(loginPopupState) {
$("#loginPopup").fadeOut(150);
await sleep(150);
$("#content").css('z-Index', 0);
loginPopupState = false;
} else {
$("#content").css('z-Index', -1);
$("#loginPopup").fadeIn(150);
loginPopupState = true;
}
}
/* Redirects user to other site
* @param loc: location to redirect to, used like enums.
*/
function redirect(loc) {
switch(loc) {
case "logout": window.location.href = "logout.php"; break;
case "management": window.location.href = ".?lnk=management"; break;
case "download": window.location.href = "<?php echo getGalleryDownloadPath();?>"; break;
}
}
/* has been replaced by redirect("logout")
function logout() {
window.location.href = "logout.php";
}*/
/* calcs column-count, sorts images to columns
*/
function sortImages() {
console.log("sortImages() started...");
// calc column-count and -width
var conWidth = $("#content").width();
var columns = 1;
var ch = [0]; // columnHeights
var includeLightbox = false;
if (conWidth >= 1150) {
columns = 4;
ch = [0, 0, 0, 0];
includeLightbox = true;
} else if (conWidth >= 800) {
columns = 3;
ch = [0, 0, 0];
includeLightbox = true;
} else if (conWidth >= 500) {
columns = 2;
ch = [0, 0];
}
// create columns
for(var i = columns - 1; i >= 0; i--) {
$("#content").prepend('<div class="column" id="column' + i + '"></div>');
}
// fill with images
for(var i = 0; i < images.length; i++) {
var cc = getShortestColumnIndex(ch);
if(includeLightbox) {
var imageHTML = '<div class="image hover"><img src="' + images[i] + '" title="image-' + (i+1) + '" onClick="showLightbox(' + i + ');" /></div>';
} else {
var imageHTML = '<div class="image"><img src="' + images[i] + '" title="image-' + (i+1) + '" /></div>';
}
$("#column" + cc).append(imageHTML);
ch[cc] += getImageHeight(images[i], conWidth, columns);
}
/* set column width
for(i = 0; i < columns; i++) {
$("#column" + i).width(Math.round((conWidth / columns) - 1));
}*/
}
/* calculates height of image, when fittet into column
* @param imagePath: path of the image, relative to index.php root
* @param contentWidth: width of #content element
* @param columns: count of columns
* @returns: height of image
*/
function getImageHeight(imagePath, contentWidth, columns) {
var tmpImage = new Image();
tmpImage.src = imagePath;
var rawImgWidth = tmpImage.width;
var rawImgHeight = tmpImage.height;
var displayImgWidth = Math.round((contentWidth / columns) - 1);
var displayImgHeight = rawImgHeight * (displayImgWidth / rawImgWidth);
return Math.round(displayImgHeight);
}
/* calculates shortest column
* @param arr: Array with lenghts of columns
* @returns: Index of shortest column or false when error
*/
function getShortestColumnIndex(arr) {
if(arr.length == 1) {
return 0;
} else if(arr.length == 2) {
var min = Math.min(arr[0], arr[1]);
} else if(arr.length == 3) {
var min = Math.min(arr[0], arr[1], arr[2]);
} else if(arr.length == 4) {
var min = Math.min(arr[0], arr[1], arr[2], arr[3]);
}
if(min == arr[0]) { return 0; }
if(min == arr[1]) { return 1; }
if(min == arr[2]) { return 2; }
if(min == arr[3]) { return 3; }
return false;
}
/* shows and hides the lightbox
* @param imgNr: index of image to be displayed
*/
async function showLightbox(imgNr) {
lightboxCurrentImage = imgNr; // global variable for current lightbox image
if(lightboxState) {
$("#lightboxBackground").fadeOut(350);
//$(".image").css("background-color", "#000"); //TODO: background-color von .image hier auf schwarz setzen, unten css-Regel löschen (Versuch)
await sleep(350);
$("#content").css('z-Index', 0);
lightboxState = false;
} else {
//$(".image").css("background-color", $("body").css('backgroundColor'));
lightboxAppendImage(imgNr);
$("#content").css('z-Index', -1);
$("#lightboxBackground").fadeIn(350);
lightboxState = true;
}
}
/* adds image into #lightbox div
* @param imgNr: index of image to be added
*/
function lightboxAppendImage(imgNr) {
$("#lightbox").html("");
$("#lightbox").append('<div id="lightboxImage"><img src="' + images[imgNr].replace("small", "big") + '" /></div>');
if(imgNr > 0) {
// include left/previous image click-area
$("#lightboxImage").append('<div id="lightboxClickLeft" onClick="lightboxNextImage(0)"></div>');
}
if(imgNr < images.length-1) {
// include right/next image click-area
$("#lightboxImage").append('<div id="lightboxClickRight" onClick="lightboxNextImage(1)"></div>');
}
// cache previous and next image in BIG version
if(imgNr-1 >= 0 && imgNr-1 < images.length) {
var imgPrev = new Image();
imgPrev.src = images[imgNr - 1];
}
if(imgNr+1 < images.length) {
var imgNext = new Image();
imgNext.src = images[imgNr + 1];
}
}
/* displays next or previous image in the lightbox
* @param direction: either 0 or 1, 0 = previous image, 1 = next image
*/
function lightboxNextImage(direction) {
var nextImageNr = -1;
if(direction == 0 && lightboxCurrentImage > 0) {
nextImageNr = lightboxCurrentImage - 1;
} else if(direction == 1 && lightboxCurrentImage < images.length-1) {
nextImageNr = lightboxCurrentImage + 1;
} else {
return;
}
lightboxCurrentImage = nextImageNr;
lightboxAppendImage(nextImageNr);
}
function sleep(milliseconds) {
return new Promise(resolve => setTimeout(resolve, milliseconds));
}
/* initializes lightbox and keylistener
*/
function initLightbox() {
// fade out on page load
$("#lightboxBackground").fadeOut(0);
lightboxState = false;
// add listeners
// listener for proper closing
$("#lightbox").on("click", function(event){
event.stopPropagation();
});
// listener for lightbox keyboard navigation
$(document).keydown(function(e) {
if(e.which == 37 && lightboxState && lightboxCurrentImage > 0) { // left arrow
lightboxNextImage(0);
} else if(e.which == 39 && lightboxState && lightboxCurrentImage < images.length) { // right arrow
lightboxNextImage(1);
} else if(e.which == 27 && lightboxState) { // ESC
showLightbox(-1);
}
});
}
function preloadImages() {
console.log("preloading images");
// display loading screen
$("#content").append('<div id="loadingScreen"><img scr="images/loading.gif" /></div>');
// actually load images
for(var i = 0; i < images.length; i++) {
var tmpImg = new Image();
tmpImg.src = images[i];
}
// hide loading screen
$("#content").html('<div style="clear:both;"></div>');
}
/* main method, gets called before second main method
*/
function mainFirst() {
// loginPopup
$("#loginPopup").fadeOut(0);
loginPopupState = false;
initLightbox();
// preload images, in Case they are not in the browser cache yet
//preloadImages();
}
/* second main method
*/
function mainSecond() {
// when in gallery, start sorting images
if(<?php if(isset($_GET["hash"])) { echo "true"; } else { echo "false";} ?>) {
sortImages();
}
}
$(document).ready(mainFirst);
$(window).load(mainSecond);
Mit Flex Box dürfte das nicht anders möglich sein, weil du deine Boxen entweder in Spalten oder Reihen anordnen musst. (Dein Paint Bild benutzt Spalten, dein Screenshot benutzt Reihen)
