Add fullscreen lightbox on slideshow image click

css/galleriffic-2.css

@@ -186,6 +186,53 @@ div.navigation {
 	color: #666;
 }
 
+/* Fullscreen lightbox */
+.lightbox {
+	position: fixed;
+	inset: 0;
+	z-index: 99999;
+}
+.lightbox-backdrop {
+	position: absolute;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.85);
+}
+.lightbox-content {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 24px;
+	box-sizing: border-box;
+}
+.lightbox-content img {
+	max-width: 95vw;
+	max-height: 95vh;
+	width: auto;
+	height: auto;
+	border: 1px solid rgba(255, 255, 255, 0.2);
+	background: #000;
+}
+.lightbox-close {
+	position: absolute;
+	top: 14px;
+	right: 14px;
+	width: 44px;
+	height: 44px;
+	border-radius: 999px;
+	border: 1px solid rgba(255, 255, 255, 0.25);
+	background: rgba(0, 0, 0, 0.35);
+	color: #fff;
+	font-size: 28px;
+	line-height: 42px;
+	text-align: center;
+	cursor: pointer;
+}
+.lightbox-close:hover {
+	background: rgba(0, 0, 0, 0.55);
+}
+
 /* ---- Layout: slideshow (left) + thumbs (right), full width ---- */
 .gallery-wrap {
 	display: flex;

index.html

@@ -14,6 +14,7 @@
 		<script type="text/javascript" src="js/bestpic.js"></script>
 		<script type="text/javascript" src="js/image_manifest.js"></script>
 		<script type="text/javascript" src="js/uploader.js"></script>
+		<script type="text/javascript" src="js/lightbox.js"></script>
 		
 		<!-- We only want the thunbnails to display when javascript is disabled -->
 		<script type="text/javascript">
@@ -74,6 +75,13 @@
 			</div>
 		</div>
 		<div id="footer">&copy; 2009 Trent Foley</div>
+		<div id="lightbox" class="lightbox" style="display:none;" aria-hidden="true">
+			<div class="lightbox-backdrop"></div>
+			<button id="lightbox-close" class="lightbox-close" type="button" aria-label="Close">×</button>
+			<div class="lightbox-content" role="dialog" aria-modal="true">
+				<img id="lightbox-img" alt="" />
+			</div>
+		</div>
 		<script type="text/javascript">
 			// Build thumbs + init gallery after DOM is ready (and after bestpic.js runs).
 			jQuery(function() {

js/lightbox.js

@@ -0,0 +1,51 @@
+// Fullscreen lightbox for the main slideshow image
+(function ($) {
+  function openLightbox(src, alt) {
+    var $lb = $('#lightbox');
+    var $img = $('#lightbox-img');
+    if (!$lb.length || !$img.length) return;
+
+    $img.attr('src', src || '').attr('alt', alt || '');
+    $('body').css('overflow', 'hidden');
+    $lb.show().attr('aria-hidden', 'false');
+  }
+
+  function closeLightbox() {
+    var $lb = $('#lightbox');
+    var $img = $('#lightbox-img');
+    if (!$lb.length) return;
+
+    $lb.hide().attr('aria-hidden', 'true');
+    if ($img.length) $img.attr('src', '');
+    $('body').css('overflow', '');
+  }
+
+  $(function () {
+    // Clicking the big image opens the lightbox. Use delegation because slideshow content is rebuilt.
+    $('#slideshow').on('click', 'img', function (e) {
+      // Prevent galleriffic's advance-link click handler from firing
+      e.preventDefault();
+      e.stopPropagation();
+
+      var src = $(this).attr('src');
+      var alt = $(this).attr('alt') || '';
+      openLightbox(src, alt);
+      return false;
+    });
+
+    // Close controls
+    $(document).on('click', '#lightbox-close, #lightbox .lightbox-backdrop', function (e) {
+      e.preventDefault();
+      closeLightbox();
+      return false;
+    });
+
+    $(document).on('keydown', function (e) {
+      if (e.keyCode === 27) { // ESC
+        closeLightbox();
+      }
+    });
+  });
+})(jQuery);
+
+