switched to opening a modal if clicked then a new tab to be consistent with regular image

Author: kgeller

docs/syntax/images.md

@@ -131,7 +131,7 @@ The image carousel directive builds upon the image directive.
 ::::{carousel}
 
 :id: nested-carousel-example
-:fixed-height: small ## small, medium, auto (auto is default if fixed-height is not specified)
+:max-height: small ## small, medium, none (none is default if max-height is not specified)
 
 :::{image} images/apm.png
 :alt: First image description
@@ -148,7 +148,7 @@ The image carousel directive builds upon the image directive.
 ::::{carousel}
 
 :id: nested-carousel-example
-:fixed-height: small
+:max-height: small
 
 :::{image} images/apm.png
 :alt: First image description

src/Elastic.Documentation.Site/Assets/image-carousel.ts

@@ -68,6 +68,23 @@ class ImageCarousel {
             indicator.addEventListener('click', () => this.goToSlide(index))
         })
 
+        // Handle image clicks for modal
+        this.slides.forEach(slide => {
+            const imageLink = slide.querySelector('.carousel-image-reference')
+            if (imageLink) {
+                imageLink.addEventListener('click', (e) => {
+                    e.preventDefault()
+                    const modalId = imageLink.getAttribute('data-modal-id')
+                    if (modalId) {
+                        const modal = document.getElementById(modalId)
+                        if (modal) {
+                            modal.style.display = 'flex'
+                        }
+                    }
+                })
+            }
+        })
+
         // Keyboard navigation
         document.addEventListener('keydown', (e) => {
             if (!this.isInViewport()) return
@@ -202,19 +219,22 @@ export function initImageCarousel(): void {
     carousels.forEach((carouselElement) => {
         const carousel = carouselElement as HTMLElement
 
-        // Get the existing track
+        // Skip if carousel already has slides (server-rendered)
+        const existingSlides = carousel.querySelectorAll('.carousel-slide')
+        if (existingSlides.length > 0) {
+            // Just initialize the existing carousel
+            new ImageCarousel(carousel)
+            return
+        }
+
+        // Get the existing track for dynamic carousels
         let track = carousel.querySelector('.carousel-track')
         if (!track) {
             track = document.createElement('div')
             track.className = 'carousel-track'
             carousel.appendChild(track)
         }
 
-        // Clean up any existing slides - this prevents duplicates
-        const existingSlides = Array.from(
-            track.querySelectorAll('.carousel-slide')
-        )
-
         // Find all image links that might be related to this carousel
         const section = findSectionForCarousel(carousel)
         if (!section) return

src/Elastic.Documentation.Site/Assets/markdown/image-carousel.css

@@ -28,13 +28,17 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	text-decoration: none;
+}
+
+.carousel-image-reference::after {
+	display: none !important;
 }
 
 .carousel-image-reference img {
 	max-width: 100%;
 	height: auto;
 	display: block;
-	box-sizing: border-box;
 	margin: 0 auto;
 }
 
@@ -60,11 +64,11 @@
 }
 
 .carousel-prev {
-	left: 10px;
+	left: 0;
 }
 
 .carousel-next {
-	right: 10px;
+	right: 0;
 }
 
 .carousel-indicators {
@@ -92,21 +96,6 @@
 	background-color: black;
 }
 
-/* Small carousel styles */
-.carousel-container[data-max-height][style*="350px"] .carousel-control {
-	top: 150px;
-}
-
-/* Medium carousel styles */
-.carousel-container[data-max-height][style*="750px"] .carousel-control {
-	top: 200px;
-}
-
-/* None (no max-height) carousel styles */
-.carousel-container[data-none-height] .carousel-control {
-	top: 500px;
-}
-
 /* Max height carousel styles */
 .carousel-container[data-max-height] {
 	padding-bottom: 40px; /* Space for indicators */
@@ -120,21 +109,48 @@
 .carousel-container[data-max-height] .carousel-image-reference img {
 	max-height: var(--carousel-max-height);
 	width: auto;
-	height: auto;
-	display: block;
-	margin: 0 auto;
 }
 
 /* None height carousel styles - images at natural size */
 .carousel-container[data-none-height] {
 	padding-bottom: 40px; /* Space for indicators */
 }
 
-.carousel-container[data-none-height] .carousel-image-reference img {
-	max-width: 100%;
+/* Override modal styles for image carousels */
+.modal .modal-content {
+	max-width: 95vw !important;
+	max-height: 95vh !important;
+	width: auto !important;
+	height: auto !important;
+	padding: 0 !important;
+	background: transparent !important;
+	box-shadow: none !important;
+}
+
+.modal .modal-content img {
+	max-width: 95vw;
+	max-height: 95vh;
+	width: auto;
 	height: auto;
+	object-fit: contain;
 	display: block;
-	margin: 0 auto;
+}
+
+/* Ensure the close button is visible */
+.modal .modal-close {
+	background: rgba(0, 0, 0, 0.7);
+	border-radius: 50%;
+	width: 40px;
+	height: 40px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	top: -20px;
+	right: -20px;
+}
+
+.modal .modal-close a {
+	color: white;
 }
 @media (max-width: 768px) {
 	.carousel-control {

src/Elastic.Markdown/Myst/Directives/Image/ImageCarouselView.cshtml

@@ -21,7 +21,7 @@
         {
             var image = Model.Images[i];
             <div class="carousel-slide" data-index="@i" @(i == 0 ? "data-active=true" : "")>
-                <a class="carousel-image-reference" href="@image.ImageUrl" target="_blank">
+                <a class="carousel-image-reference reference internal image-reference" href="javascript:void(0)" data-modal-id="modal-@(image.UniqueImageId)">
                     <img title="@image.Title" alt="@(image.Alt ?? "")" src="@image.ImageUrl" style="@image.Style" />
                 </a>
             </div>
@@ -52,3 +52,23 @@
         </div>
     }
 </div>
+
+@* Add modal for each image *@
+@for (int i = 0; i < Model.Images.Count; i++)
+{
+    var image = Model.Images[i];
+    <div id="modal-@(image.UniqueImageId)" class="modal"
+        onclick="document.querySelector('#modal-@(image.UniqueImageId) .modal-content').contains(event.target) ? void(0) : document.getElementById('modal-@(image.UniqueImageId)').style.display='none'">
+        <div class="modal-content">
+            <span class="modal-close">
+                <a href="javascript:void(0);" class="close-button"
+                    onclick="document.getElementById('modal-@(image.UniqueImageId)').style.display='none'">
+                    &times;
+                </a>
+            </span>
+            <a class="reference internal image-reference" href="@image.ImageUrl" target="_blank">
+                <img title="@image.Title" alt="@(image.Alt ?? "")" src="@image.ImageUrl" />
+            </a>
+        </div>
+    </div>
+}