Add lightbox to commission type examples

- Wrap example images in clickable anchor tags with gallery-item class
- Add lightbox HTML and JavaScript (matching portfolio implementation)
- Add hover effect CSS for example thumbnails
- Fix incorrect image paths (add missing /art/ directory)

1 files changed, 56 insertions, 5 deletions

diff --git a/src/Pages/commissions/commissions.php b/src/Pages/commissions/commissions.php
index 4eade7a..ae1a6a9 100644
--- a/src/Pages/commissions/commissions.php
+++ b/src/Pages/commissions/commissions.php
@@ -168,6 +168,11 @@
             height: 100%;
             object-fit: cover;
             border: 1px solid rgba(255, 0, 255, 0.3);
+            cursor: pointer;
+            transition: border-color 0.3s ease;
+        }
+        .commission-type-example a:hover img {
+            border-color: #00ffff;
         }
         @media (max-width: 500px) {
             .commission-type {
@@ -237,7 +242,9 @@
                     <p class="price">Price: N/A</p>
                 </div>
                 <div class="commission-type-example">
-                    <img src="../../Assets/art/warning_existential_hazard.jpg" alt="Icon example" loading="lazy">
+                    <a href="../../Assets/art/warning_existential_hazard.jpg" class="gallery-item">
+                        <img src="../../Assets/art/warning_existential_hazard.jpg" alt="Icon example" loading="lazy">
+                    </a>
                 </div>
             </div>
 
@@ -248,7 +255,9 @@
                     <p class="price">Price: N/A</p>
                 </div>
                 <div class="commission-type-example">
-                    <img src="../../Assets/the_void_is_listening.jpg" alt="Banner example" loading="lazy">
+                    <a href="../../Assets/art/the_void_is_listening.jpg" class="gallery-item">
+                        <img src="../../Assets/art/the_void_is_listening.jpg" alt="Banner example" loading="lazy">
+                    </a>
                 </div>
             </div>
 
@@ -259,7 +268,9 @@
                     <p class="price">Price: N/A</p>
                 </div>
                 <div class="commission-type-example">
-                    <img src="../../Assets/listen_to_the_tv.jpg" alt="Half scene example" loading="lazy">
+                    <a href="../../Assets/art/listen_to_the_tv.jpg" class="gallery-item">
+                        <img src="../../Assets/art/listen_to_the_tv.jpg" alt="Half scene example" loading="lazy">
+                    </a>
                 </div>
             </div>
 
@@ -270,7 +281,9 @@
                     <p class="price">Price: N/A</p>
                 </div>
                 <div class="commission-type-example">
-                    <img src="../../Assets/i_forget.jpg" alt="Full scene example" loading="lazy">
+                    <a href="../../Assets/art/i_forget.jpg" class="gallery-item">
+                        <img src="../../Assets/art/i_forget.jpg" alt="Full scene example" loading="lazy">
+                    </a>
                 </div>
             </div>
 
@@ -281,7 +294,9 @@
                     <p class="price">Price: N/A</p>
                 </div>
                 <div class="commission-type-example">
-                    <img src="../../Assets/art/at_the_junction.jpeg" alt="Complex scene example" loading="lazy">
+                    <a href="../../Assets/art/at_the_junction.jpeg" class="gallery-item">
+                        <img src="../../Assets/art/at_the_junction.jpeg" alt="Complex scene example" loading="lazy">
+                    </a>
                 </div>
             </div>
 
@@ -436,6 +451,42 @@
         </footer>
     </div>
 
+    <!-- Lightbox for viewing examples -->
+    <div id="lightbox" class="lightbox">
+        <span class="lightbox-close">&times;</span>
+        <img class="lightbox-img" src="" alt="">
+    </div>
+
     <script type="module" src="../../Background/main.js"></script>
+    <script>
+        const lightbox = document.getElementById('lightbox');
+        const lightboxImg = lightbox.querySelector('.lightbox-img');
+        const lightboxClose = lightbox.querySelector('.lightbox-close');
+
+        document.querySelectorAll('.gallery-item').forEach(item => {
+            item.addEventListener('click', e => {
+                e.preventDefault();
+                lightboxImg.src = item.href;
+                lightboxImg.alt = item.querySelector('img').alt;
+                lightbox.classList.add('active');
+            });
+        });
+
+        lightboxClose.addEventListener('click', () => {
+            lightbox.classList.remove('active');
+        });
+
+        lightbox.addEventListener('click', e => {
+            if (e.target === lightbox) {
+                lightbox.classList.remove('active');
+            }
+        });
+
+        document.addEventListener('keydown', e => {
+            if (e.key === 'Escape') {
+                lightbox.classList.remove('active');
+            }
+        });
+    </script>
 </body>
 </html>