Merge pull request #317 from silversword411/main

Add image zoom functionality when clicking an image

Author: silversword411

docs/ee/reporting/functions/examples.md

@@ -6,7 +6,7 @@
 2. Check at least one overdue item in agent settings<br>![uptime](../images/example_uptime_setting.png)
 3. Run report and enjoy!
 
-[![html report screenshot](../images/example_uptimereport.png)](../images/example_uptimereport.png)
+![html report screenshot](../images/example_uptimereport.png)
 
 ## Windows 11 Upgrade Compatible list
 
@@ -17,18 +17,20 @@ To get a Windows 10 upgrade to Windows 11 compatibility list you'll want to:
 3. Import one of the `Windows 11 Compatible` Reports ![Reports](../images/example_win11_reports.png)
 4. Enjoy!
 
-[![Win11 HTML report screenshot](../images/example_win11_compatible_reporthtml.png)](../images/example_win11_compatible_reporthtml.png)
+![Win11 HTML report screenshot](../images/example_win11_compatible_reporthtml.png)
 
 
-[![pdf report screenshot](../images/example_win11_compatible_reportpdf.png)](../images/example_win11_compatible_reportpdf.png)
+![pdf report screenshot](../images/example_win11_compatible_reportpdf.png)
 
 
 ## NOC Dashboard
 
-Got a TV? Load it up for the team! 
+Got a TV? Load it up for the team!
 
 Want quick searchable agent status with more data? Load it locally!
 
+The `Restrict Summary` button is for only showing agents that are offline and have an overdue alert set (eg critical machines). If it's on a hands off device make sure you set the refresh every so it's reloading data regularly.
+
 <div class="video-wrapper">
   <iframe width="400" height="225" src="https://www.youtube.com/embed/OtV2M5uYj_k" frameborder="0" allowfullscreen></iframe>
 </div>
@@ -39,9 +41,9 @@ Want quick searchable agent status with more data? Load it locally!
 
 Search for software, sort by different columns
 
-[![Software Inventory](../images/example_softwarereport.gif)](../images/example_softwarereport.gif)
+![Software Inventory](../images/example_softwarereport.gif)
 
 
 `Software Report - Advanced DataTables`
 
-[![Software Advanced](../images/example_software_Advanced_DataTables.png)](../images/example_software_Advanced_DataTables.png)
+![Software Advanced](../images/example_software_Advanced_DataTables.png)

docs/js/image-zoom.js

@@ -0,0 +1,60 @@
+document.addEventListener("DOMContentLoaded", function () {
+    // Create modal elements
+    const modal = document.createElement("div");
+    modal.className = "image-modal";
+    modal.innerHTML = `
+        <div class="image-modal-content">
+            <span class="image-modal-close">&times;</span>
+            <img class="image-modal-img" src="" alt="">
+            <div class="image-modal-caption"></div>
+        </div>
+    `;
+    document.body.appendChild(modal);
+
+    const modalImg = modal.querySelector(".image-modal-img");
+    const modalCaption = modal.querySelector(".image-modal-caption");
+    const closeBtn = modal.querySelector(".image-modal-close");
+
+    // Add click event to all images in the content area
+    const images = document.querySelectorAll(".md-content img");
+    
+    images.forEach((img) => {
+        // Add a cursor pointer to indicate clickable
+        img.style.cursor = "pointer";
+        
+        img.addEventListener("click", function() {
+            modal.style.display = "flex";
+            modalImg.src = this.src;
+            modalImg.alt = this.alt;
+            modalCaption.textContent = this.alt || this.title || "";
+            
+            // Prevent body scrolling when modal is open
+            document.body.style.overflow = "hidden";
+        });
+    });
+
+    // Close modal when clicking the X
+    closeBtn.addEventListener("click", function() {
+        closeModal();
+    });
+
+    // Close modal when clicking anywhere in the modal (including on the image)
+    modal.addEventListener("click", function(e) {
+        // Close modal when clicking anywhere except the close button
+        if (e.target !== closeBtn) {
+            closeModal();
+        }
+    });
+
+    // Close modal with Escape key
+    document.addEventListener("keydown", function(e) {
+        if (e.key === "Escape" && modal.style.display === "flex") {
+            closeModal();
+        }
+    });
+
+    function closeModal() {
+        modal.style.display = "none";
+        document.body.style.overflow = "auto";
+    }
+});

docs/stylesheets/extra.css

@@ -151,4 +151,100 @@
     height: 40px;
     text-align: center;
     font-size: 14px;
+}
+
+/* Image zoom modal styles */
+.image-modal {
+    display: none;
+    position: fixed;
+    z-index: 9999;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.9);
+    backdrop-filter: blur(5px);
+    align-items: center;
+    justify-content: center;
+}
+
+.image-modal-content {
+    position: relative;
+    width: 90%;
+    max-width: 100vw;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.image-modal-img {
+    width: 100%;
+    height: auto;
+    max-height: 80vh;
+    max-width: 100%;
+    object-fit: contain;
+    border-radius: 5px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
+
+.image-modal-close {
+    position: absolute;
+    top: -40px;
+    right: 0;
+    color: white;
+    font-size: 35px;
+    font-weight: bold;
+    cursor: pointer;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.3s ease;
+}
+
+.image-modal-close:hover,
+.image-modal-close:focus {
+    background: rgba(255, 255, 255, 0.2);
+    text-decoration: none;
+}
+
+.image-modal-caption {
+    margin: 15px 0;
+    text-align: center;
+    color: white;
+    font-size: 16px;
+    background: rgba(0, 0, 0, 0.7);
+    padding: 10px;
+    border-radius: 5px;
+}
+
+/* Add cursor pointer to images to indicate they're clickable */
+.md-content img {
+    cursor: pointer;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .image-modal-content {
+        width: 95%;
+        max-height: 85%;
+    }
+    
+    .image-modal-close {
+        top: -35px;
+        font-size: 30px;
+        width: 35px;
+        height: 35px;
+    }
+    
+    .image-modal-caption {
+        font-size: 14px;
+        margin: 10px 0;
+        padding: 8px;
+    }
 }

mkdocs.yml

@@ -126,8 +126,9 @@ theme:
 extra_css:
   - stylesheets/extra.css
   - stylesheets/neoteroi-mkdocs.css
-# extra_javascript:
-#   - js/copy-to-clipboard.js
+extra_javascript:
+  - js/image-zoom.js
+  - js/copy-to-clipboard.js
 extra:
   social:
     - icon: fontawesome/brands/github