Add lightbox feature for album images

ajax/getalbuminfo.php

@@ -6,6 +6,7 @@ $data = array();
 $data["albumcontents"] = "";
 $data["albumtitle"] = "";
 $data["albumdescription"] = "";
+$data["images"] = array();
 
 if ( $_SESSION['currentalbum'] != 0 ) {
     $album = new Album($_SESSION['currentalbum']);
@@ -15,6 +16,7 @@ if ( $_SESSION['currentalbum'] != 0 ) {
         $griditems = Image::getImagesForAlbum($album->getID());
         $data["albumtitle"] = $album->getTitle();
         $data["albumdescription"] = $album->getDescription();
+        $data["images"] = $griditems;
     }
 }
 if ( $_SESSION['currentalbum'] == 0 ) {

class_image.php

@@ -253,8 +253,8 @@ class Image implements JsonSerializable {
             'id' => $this->getID(),
             'album_id' => $this->getAlbumID(),
             'albumfolder' => $this->getAlbumFolder(),
-            'imageurl' => basename(ALBUMFOLDER) . "/" . $this->getAlbumFolder() . "/" . $this->getFileName(),
-            'thumburl' => basename(THUMBNAILFOLDER) . "/" . $this->getAlbumFolder() . "/" . $this->getFileName(),
+            'imageurl' => basename(ALBUMFOLDER) . "/" . $this->getAlbumFolder() . $this->getFileName(),
+            'thumburl' => basename(THUMBNAILFOLDER) . "/" . $this->getAlbumFolder() . $this->getFileName(),
             'title' => $this->getTitle(),
             'description' => $this->getDescription(),
             'createtime' => $this->getCreateTime()

core/simpleLightbox.txt

@@ -0,0 +1 @@
+Project source: https://github.com/dbrekalo/simpleLightbox

htmlfooter.php

@@ -9,7 +9,11 @@
 <script type="text/javascript" src="core/jquery-3.6.0.min.js"></script>
 <!-- Toastr library -->
 <script type="text/javascript" src="core/toastr.min.js"></script>
+<!-- simpleLightbox library -->
+<script type="text/javascript" src="core/simpleLightbox.min.js"></script>
 <!-- Include time library "moment" -->
 <script type="text/javascript" src="core/moment.min.js"></script>
+<!-- Script for global stuff -->
+<script type="text/javascript" src="js/main.js"></script>
 <!-- Script for menu highlighting -->
 <script type="text/javascript" src="js/menu.js"></script>

htmlheader.php

@@ -8,6 +8,7 @@
   <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
   <!-- Toastr CSS -->
   <link rel="stylesheet" type="text/css" href="core/toastr.min.css" />
+  <link rel="stylesheet" type="text/css" href="core/simpleLightbox.min.css" />
   <link rel="stylesheet" type="text/css" href="style/style.css" title="style" />
   <link rel="shortcut icon" href="graphics/oldman_head.gif">
 </head>

js/main.js

@@ -0,0 +1,5 @@
+function basename(str, sep) {
+    return str.substr(str.lastIndexOf(sep) + 1);
+}
+
+// vim: set ts=4:sw=4

js/scalemodels.js

@@ -1,3 +1,5 @@
+var lightboxImages = [];
+
 $(document).ready(function() {
     $("#btn_refresh").click(function() { refreshAlbums() });
     $("#btn_album_0").click(function() { showAlbum($(this)) });
@@ -25,10 +27,12 @@ function getAlbumInfo() {
         url: 'ajax/getalbuminfo.php',
         dataType: 'json',
         success: function(data, stat, jqo) {
+            lightboxImages = [];
             if ( data.currentalbum == 0 ) {
                 $("#albumdetails").addClass("hidden");
             } else {
                 $("#albumdetails").removeClass("hidden");
+                lightboxImages = data.images;
             }
             $("#albumtitle").html(data.albumtitle);
             $("#albumdescription").html(data.albumdescription);
@@ -40,6 +44,7 @@ function getAlbumInfo() {
                     showImage($(this));
                 }
             });
+            console.log(lightboxImages);
         },
         error: function(jqp, status, error) {
             toastr.error("Error retrieving album info!\n" + error, "Server Error");
@@ -49,7 +54,24 @@ function getAlbumInfo() {
 
 function showImage(clickedElement) {
     var imageid = clickedElement.attr("id").substring(clickedElement.attr("id").lastIndexOf("_") + 1);
-    console.log(imageid);
+    var startIndex = 0;
+    var images = [];
+    var captions = [];
+    lightboxImages.forEach(function(image, index) {
+        if ( image.id == imageid ) startIndex = index;
+        images.push(image.imageurl);
+        captions.push(image.description);
+    });
+    /*
+    images.forEach(function(image, index) {
+        if ( basename(image, "/") == basename(clickedElement.attr("src"), "/") ) startIndex = index;
+    });
+    */
+    SimpleLightbox.open({
+        items: images,
+        captions: captions,
+        startAt: startIndex
+    });
 }
 
 function showAlbum(clickedElement) {