Merge pull request #46260 from dipesh-rawat/click-to-zoom

Implement click-to-zoom option for images

assets/scss/_custom.scss

@@ -1352,3 +1352,40 @@ div.alert > em.javascript-required {
   outline: none;
   padding: .5em 0 .5em 0;
 }
+
+/* CSS for 'figure' full-screen display */
+ 
+/* Define styles for full-screen overlay */
+.figure-fullscreen-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background-color: rgba(255, 255, 255, 0.95); /* White background with some transparency */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: calc(5% + 20px);
+  box-sizing: border-box;
+}
+
+/* CSS class to scale the image when zoomed */
+.figure-zoomed {
+  transform: scale(1.2);
+}
+
+/* Define styles for full-screen image */
+.figure-fullscreen-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain; /* Maintain aspect ratio and fit within the container */
+}
+
+/* Define styles for close button */
+.figure-close-button {
+  position: absolute;
+  top: 1%; 
+  right: 2%;
+  cursor: pointer;
+  font-size: calc(5vw + 10px);
+  color: #333;
+}

content/en/docs/concepts/overview/components.md

@@ -20,7 +20,7 @@ When you deploy Kubernetes, you get a cluster.
 This document outlines the various components you need to have for
 a complete and working Kubernetes cluster.
 
-{{< figure src="/images/docs/components-of-kubernetes.svg" alt="Components of Kubernetes" caption="The components of a Kubernetes cluster" class="diagram-large" >}}
+{{< figure src="/images/docs/components-of-kubernetes.svg" alt="Components of Kubernetes" caption="The components of a Kubernetes cluster" class="diagram-large" clicktozoom="true" >}}
 
 <!-- body -->
 ## Control Plane Components

layouts/partials/head.html

@@ -99,6 +99,11 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.9/iframeResizer.min.js" integrity="sha384-hHTwgxzjpO1G1NI0wMHWQYUxnGtpWyDjVSZrFnDrlWa5OL+DFY57qnDWw/5WSJOl" crossorigin="anonymous"></script>
 {{- end -}}
 
+<!-- Enable zoom-on-click for figures that opt in to this -->
+{{- if .HasShortcode "figure" -}}
+<script defer src="{{ "js/zoom.js" | relURL }}"></script>
+{{- end -}}
+
 {{- if eq (lower .Params.cid) "community" -}}
 {{- if eq .Params.community_styles_migrated true -}}
 <link href="/css/community.css" rel="stylesheet"><!-- legacy styles -->

layouts/shortcodes/figure.html

@@ -0,0 +1,30 @@
+{{ $src := (.Page.Resources.GetMatch (printf "**%s*" (.Get "src"))) }}
+{{ $clickToZoom := .Get "clicktozoom" }}
+<figure{{ with .Get "class" }} class="{{ . }} {{ if $clickToZoom }}clickable-zoom{{ end }}"{{ end }}>
+    {{- if .Get "link" -}}
+        <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
+    {{- end }}
+    <img src="{{ if $src }}{{ $src.RelPermalink }}{{ else }}{{ .Get "src" }}{{ end }}" 
+         {{- if or (.Get "alt") (.Get "caption") }}
+         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
+         {{- end -}}
+         {{- with .Get "width" }} width="{{ . }}"{{ end -}}
+         {{- with .Get "height" }} height="{{ . }}"{{ end -}}
+    /> <!-- Closing img tag -->
+    {{- if .Get "link" }}</a>{{ end -}}
+    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
+        <figcaption>
+            {{ with (.Get "title") -}}
+                <h4>{{ . }}</h4>
+            {{- end -}}
+            {{- if or (.Get "caption") (.Get "attr") -}}<p>
+                {{- .Get "caption" | markdownify -}}
+                {{- with .Get "attrlink" }}
+                    <a href="{{ . }}">
+                {{- end -}}
+                {{- .Get "attr" | markdownify -}}
+                {{- if .Get "attrlink" }}</a>{{ end }}</p>
+            {{- end }}
+        </figcaption>
+    {{- end }}
+</figure>

static/js/zoom.js

@@ -0,0 +1,69 @@
+// The page and script is loaded successfully
+$(document).ready(function() {
+    // Function to handle hover over <figure> elements
+    function handleFigureHover() {
+        // Only change cursor to zoom-in if figure has 'clickable-zoom' class
+        if ($(this).hasClass('clickable-zoom') && !$(this).hasClass('figure-fullscreen-content')) {
+            $(this).css('cursor', 'zoom-in');
+        }
+    }
+
+    // Attach hover event to <figure> elements with 'clickable-zoom' class
+    $('figure.clickable-zoom').hover(handleFigureHover, function() {
+        // Mouse out - revert cursor back to default
+        $(this).css('cursor', 'default');
+    });
+
+    // Attach click event to <figure> elements with 'clickable-zoom' class
+    $('figure.clickable-zoom').click(function() {
+        var $figure = $(this);
+
+        // Check if the figure has 'clickable-zoom' class
+        if ($figure.hasClass('clickable-zoom')) {
+            var $img = $figure.find('img'); // Get the <img> element within the clicked <figure>
+
+            // Toggle 'figure-zoomed' class to scale the image
+            $img.toggleClass('figure-zoomed');
+
+            // Create a full-screen overlay
+            var $fullscreenOverlay = $('<div class="figure-fullscreen-overlay"></div>');
+
+            // Clone the <img> element to display in full-screen
+            var $fullscreenImg = $img.clone();
+            $fullscreenImg.addClass('figure-fullscreen-img');
+
+            // Append the full-screen image to the overlay
+            $fullscreenOverlay.append($fullscreenImg);
+
+            // Create a close button for the full-screen overlay
+            var $closeButton = $('<span class="figure-close-button">&times;</span>');
+            $closeButton.click(function() {
+                // Remove the full-screen overlay when close button is clicked
+                $fullscreenOverlay.remove();
+                $('body').css('overflow', 'auto'); // Restore scrolling to the underlying page
+
+                // Remove 'figure-zoomed' class to reset image scale
+                $img.removeClass('figure-zoomed');
+            });
+            $fullscreenOverlay.append($closeButton);
+
+            // Append the overlay to the body
+            $('body').append($fullscreenOverlay);
+
+            // Disable scrolling on the underlying page
+            $('body').css('overflow', 'hidden');
+
+            // Close full-screen figure when clicking outside of it (on the overlay)
+            $fullscreenOverlay.click(function(event) {
+                if (event.target === this) {
+                    // Clicked on the overlay area (outside the full-screen image)
+                    $fullscreenOverlay.remove();
+                    $('body').css('overflow', 'auto'); // Restore scrolling to the underlying page
+
+                    // Remove 'figure-zoomed' class to reset image scale
+                    $img.removeClass('figure-zoomed');
+                }
+            });
+        }
+    });
+});