How do I make an image on a page clickable to open at full size? (Dawn theme)

[Andyvanman]

I've got an image of a map on a general FAQ page (not a product image etc).

I need the user to be able to click on the image to see it full size in a pop-up that can then be closed to go back to the page.

[oladunjoye12]

Upload the full size image to your Shopify files:

Go to Settings Files, upload your image, and copy the URL.

Add this code to your FAQ page or custom HTML block where you want the image to appear:

html

Copy

Edit

-- Thumbnail Image

img src="https://your-cdn-link.com/map-thumb.jpg" alt="Map" id="mapImage" style cursor: pointer; max-width: 100%;

Popup Container

<div id="imageModal" style="display:none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); justify-content: center; align-items: center;">

<span style="position: absolute; top: 20px; right: 30px; font-size: 40px; color: white; cursor: pointer;" id="closeModal"&times; span

<img src="https://your-cdn-link.com/map-full.jpg" style="max-width: 90%; max-height: 90%;">

</div>

 JavaScript 

<script>

document getElementById mapImage onclick = function

document getElementByI imageModal').style.display = 'flex';

document getElementById closeModal' .onclick = function

document.getElementById imageModal' style.display = 'none'

};

</script>

Replace both image URLs with the correct links to your thumbnail and full-size map image from your Shopify Files.

What this does:

When the user clicks the map, a full-size version pops up in the center of the screen.

A close (×) button lets them exit the popup and return to the page—no page reload needed.

[Rashman-tech · Accepted solution]

How to Create a Clickable Image Lightbox on Your Shopify FAQ Page

To make an image on your FAQ page (such as a map) open in a larger popup when clicked, you can implement a straightforward solution using HTML and JavaScript directly within the Shopify page editor. Here's how:

Step 1: Insert the HTML Structure

Navigate to your FAQ page in the Shopify admin and locate the section where you want to embed the clickable image. Within the editor, use the "Show HTML" button (<>) to insert the following code:

HTML

<div style="text-align: center;">
  <img src="{{ 'your-image.jpg' | asset_url }}" alt="Map" style="max-width: 300px; cursor: pointer;" onclick="openLightbox(this.src)">
</div>
<div id="lightbox" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); justify-content:center; align-items:center; z-index:9999;" onclick="closeLightbox()">
  <img id="lightbox-img" src="" style="max-width:90%; max-height:90%;">
</div>

Important:

• Replace 'your-image.jpg': Make sure to replace this placeholder with the actual filename of your image. If you've uploaded the image through Shopify Files, you can use the provided Liquid code {{ 'your-image.jpg' | asset_url }} to ensure the correct path.
• alt="Map": Update the alt attribute to accurately describe your image for accessibility.
• style="max-width: 300px; cursor: pointer;": This inline CSS initially displays the image at a maximum width of 300 pixels and changes the cursor to a pointer on hover, indicating it's clickable.
• onclick="openLightbox(this.src)": This JavaScript function call will be triggered when the image is clicked, passing the image's source URL to the openLightbox function.
• The second div with id="lightbox": This hidden div will act as the lightbox overlay. Its initial display:none style keeps it hidden until an image is clicked. The inline CSS sets its fixed position, full viewport coverage, semi-transparent background, flexbox layout for centering, and a high z-index to ensure it appears above other content.
• onclick="closeLightbox()": Clicking anywhere within the lightbox overlay will trigger the closeLightbox function.
• <img id="lightbox-img" src="" style="max-width:90%; max-height:90%;">: This img tag inside the lightbox will display the larger version of the clicked image, with maximum width and height set to 90% of the viewport.

Step 2: Add the JavaScript Code

Immediately after the HTML code you inserted in Step 1 (still within the "Show HTML" view), add the following JavaScript code:

HTML

<script>  function openLightbox(src) {
    document.getElementById("lightbox-img").src=src;
    document.getElementById("lightbox").style.display = "flex";
  }

  function closeLightbox() {
    document.getElementById("lightbox").style.display = "none";
  }</script>

Explanation:

• openLightbox(src) function: This function takes the image source (src) as an argument, sets the src of the lightbox-img to this value, and then changes the display style of the lightbox div to "flex", making it visible.
• closeLightbox() function: This function simply sets the display style of the lightbox div back to "none", hiding it.

How it Works:

This setup utilizes basic HTML for the image and the lightbox container, inline CSS for minimal styling, and JavaScript to handle the interactivity of opening and closing the lightbox. When a user clicks the image, the openLightbox function is called, making the hidden lightbox visible and displaying the clicked image within it. Clicking anywhere on the darkened background then calls the closeLightbox function, hiding the lightbox again.

This method provides a simple and effective image lightbox solution without relying on external apps or complex libraries.

[Andyvanman]

Thanks Dc221. 

It worked perfectly once I set up HTML section to use.

[Rashman-tech]

Then did i deserve like