image expando

Author: XanderStrike

assets/script.js

@@ -90,6 +90,8 @@ document.querySelectorAll('.js-more-info').forEach(elem => {
         .then(response => response.text())
         .then(data => {
           infoContainer.innerHTML = data;
+          // Add event listeners to any new expandable images
+          addExpandableImageListeners(infoContainer);
         })
         .catch(error => {
           infoContainer.innerHTML = '<div class="error">Failed to load info</div>';
@@ -101,3 +103,47 @@ document.querySelectorAll('.js-more-info').forEach(elem => {
     }
   });
 });
+
+// Function to add expandable image listeners to elements
+function addExpandableImageListeners(container = document) {
+  container.querySelectorAll('.expandable-image').forEach(img => {
+    // Only add listener if not already added
+    if (!img.hasAttribute('data-expandable-listener')) {
+      img.setAttribute('data-expandable-listener', 'true');
+      img.addEventListener('click', function() {
+        // Create overlay if it doesn't exist
+        let overlay = document.querySelector('.image-overlay');
+        if (!overlay) {
+          overlay = document.createElement('div');
+          overlay.className = 'image-overlay';
+          document.body.appendChild(overlay);
+          
+          // Add click event to close overlay
+          overlay.addEventListener('click', function() {
+            this.classList.remove('expanded');
+          });
+        }
+        
+        // Create and add the expanded image
+        const expandedImg = document.createElement('img');
+        expandedImg.src = this.src;
+        expandedImg.alt = this.alt || 'Expanded image';
+        
+        // Clear previous content and add new image
+        overlay.innerHTML = '';
+        overlay.appendChild(expandedImg);
+        
+        // Show the overlay
+        overlay.classList.add('expanded');
+        
+        // Prevent event bubbling
+        expandedImg.addEventListener('click', function(e) {
+          e.stopPropagation();
+        });
+      });
+    }
+  });
+}
+
+// Initial setup for expandable images
+addExpandableImageListeners();

assets/style.css

@@ -225,3 +225,39 @@ table {
     box-shadow: 0 2.5em 0 0;
   }
 }
+
+/* Image expansion styles */
+.expandable-image {
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.expandable-image:hover {
+  transform: scale(1.02);
+}
+
+.image-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
+  display: none;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  cursor: pointer;
+}
+
+.image-overlay.expanded {
+  display: flex;
+}
+
+.image-overlay img {
+  max-width: 90%;
+  max-height: 90%;
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}

templates/artist.html

@@ -2,7 +2,7 @@
 {% block body %}
   <div class="row">
     <div class="three columns">
-      <img src="{{ results.image }}" width='100%'/>
+      <img src="{{ results.image }}" width='100%' class="expandable-image"/>
     </div>
     <div class="nine columns">
       <div class="artist-desc js-artist-desc">

templates/group_info.html

@@ -1,6 +1,6 @@
 <div class="row">
   <div class="three columns">
-    <img src="{{ group_info.wikiImage }}" width='100%'>
+    <img src="{{ group_info.wikiImage }}" width='100%' class="expandable-image">
   </div>
   <div class="six columns">
     {{ group_info.wikiBody | safe}}