feat: add lightbox functionality for image viewing

Introduced a new lightbox feature to enhance the image viewing experience. Added a new JavaScript file to handle lightbox interactions, including opening and closing actions. Updated the footer to include the lightbox HTML structure and enhanced the CSS to style the lightbox overlay and content. Registered the new script in WordPress functions.

Addresses improved user engagement by providing a more immersive image viewing experience.

assets/js/lightbox.js

@@ -0,0 +1,18 @@
+$(document).ready(function() {
+    $('div.wp-caption a:first').click(function(event) {
+        event.preventDefault();
+        var imgSrc = $(this).attr('href');
+        $('#lightbox-img').attr('src', imgSrc);
+        $('#lightbox').fadeIn();
+    });
+
+    $('.lightbox-close').click(function() {
+        $('#lightbox').fadeOut();
+    });
+
+    $(document).click(function(event) {
+        if ($(event.target).is('#lightbox')) {
+            $('#lightbox').fadeOut();
+        }
+    });
+});

footer.php

@@ -26,6 +26,11 @@
     </div>
 </footer>
 
+<div id="lightbox" class="lightbox">
+    <span class="lightbox-close">&times;</span>
+    <img class="lightbox-content" id="lightbox-img">
+</div>
+
 <?php wp_footer(); ?>
 </body>
 

functions.php

@@ -29,6 +29,7 @@ function duck_behavior_journal_scripts()
     wp_enqueue_style('theme-style', get_stylesheet_uri());
     wp_enqueue_script('jquery', get_template_directory_uri() . '/assets/dist/js/jquery-3.7.1.min.js', array(), null, true);
     wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/assets/dist/js/bootstrap.bundle.min.js', array(), null, true);
+    wp_enqueue_script('lightbox', get_template_directory_uri() . '/assets/js/lightbox.js', array(), null, true);
 }
 add_action('wp_enqueue_scripts', 'duck_behavior_journal_scripts');
 

style.css

@@ -163,4 +163,47 @@ a h5 {
 
 .MJXc-display {
     display: inline-block !important
+}
+
+.lightbox {
+    display: none;
+    position: fixed;
+    z-index: 9999;
+    padding-top: 60px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.9);
+}
+
+.lightbox-content {
+    margin: auto;
+    display: block;
+    width: 80%;
+    max-width: 700px;
+}
+
+.lightbox-close {
+    position: absolute;
+    top: 15px;
+    right: 35px;
+    color: #fff;
+    font-size: 40px;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+.lightbox-close:hover,
+.lightbox-close:focus {
+    color: #bbb;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+@media only screen and (max-width: 700px) {
+    .lightbox-content {
+        width: 100%;
+    }
 }