1) move JavaScript-code to scripts.js

2) add image sources for Questtext images

www/css/desktop.css

@@ -129,8 +129,10 @@ aside{display:none}
 .qtextbox{font-size:.875em;border-radius:5px;background:#fff;border:15px solid #fff;max-height:200px;overflow:hidden}
 .qtext{padding-right:15px}
 .qtext img,.grpqimg{float:right;margin-left:15px;max-width:30%;max-height:200px;border-radius:3px}
+.qtext .source{display:none}
 
 #imagelightbox{cursor:pointer;position:fixed;z-index:10000;-ms-touch-action:none;touch-action:none;-webkit-box-shadow:0 0 3.125em rgba( 0, 0, 0, .75 ); -moz-box-shadow:0 0 3.125em rgba( 0, 0, 0, .75 );box-shadow:0 0 3.125em rgba( 0, 0, 0, .75 )}
+#imagelightbox-caption{position:fixed;z-index:10001}
 
 .xpinfo{display:none}
 .xpbar{width:60%;float:left;height:10px;position:relative;background:#eee;border-radius:25px;margin:8px 0 16px}

www/js/scripts.js

@@ -130,7 +130,92 @@ function notify()
 
 
 
+/**
+ * Image lightbox functions
+ */
+
+/**
+ * Show caption for image.
+ */
+function captionOn()
+{
+    var description = $('a[href="' + $('#imagelightbox').attr('src') + '"] ~ span.source');
+    var div = $('<div id="imagelightbox-caption"></div>');
+    if(description.size() > 0)
+    {
+        description.first().clone().appendTo(div);
+        div.appendTo('body');
+        //$('<div id="imagelightbox-caption">' + description + '</div>' ).appendTo('body');
+    }
+    captionResize();
+    setTimeout(captionResize, 255);
+}
+
+/**
+ * Position caption.
+ */
+function captionResize()
+{
+    var lightbox = $('#imagelightbox');
+    var caption = $('#imagelightbox-caption');
+    if(lightbox.size() > 0 && caption.size() > 0)
+    {
+        var right = $(window).width() - lightbox.position().left - lightbox.width();
+        var bottom = $(window).height() - lightbox.position().top - lightbox.height();
+        caption.css('right', right+'px');
+        caption.css('bottom', bottom+'px');
+    }
+}
+
+/**
+ * Remove caption.
+ */
+function captionOff()
+{
+    $('#imagelightbox-caption').remove();
+}
+
+
+
+
+
+/**
+ * Start up
+ */
 $(function() {
-    // Play notification
+    // Add image lightbox
+    $('a').imageLightbox({
+        animationSpeed: 250,
+        onLoadStart: function() {
+            captionOff();
+        },
+        onLoadEnd: function() {
+            captionOn();
+        },
+        onEnd: function() {
+            captionOff();
+        }
+    });
+    // Position caption
+    $(window).on('resize', function() {
+        setTimeout(captionResize, 10);
+    });
+
+    // Add scroll
+    $(".qtextbox").niceScroll({
+        autohidemode:false,
+        cursorcolor:"#c2beb9"
+    });
+
+    // Notification
     notify();
+    setTimeout(
+        function() {
+            $(".notify").fadeOut(1500);
+        },
+        5000
+    );
+    $('body').click(function() {
+        $(".notify").fadeOut(200);
+    });
 });