Collage section full screen on click

Shopify Discussion
1

Greetings

I’m using Dawn theme and i have a template with 5 Collage sections with 3 image each, so i want when i click on the image to be full screen on mobile devices. Does anyone knows how can i do this?

Thanks in advance!

2

It’s implemented by adding 3rd party popup js. Which opens the image in a popup on click.

I hope, I understand what you need and give a reply based on it.

1 Like
3

To open an image in a popup or lightbox on click in Shopify, you can use a JavaScript library like Lightbox or Magnific Popup. Here’s an example using Magnific Popup:

  1. Include the necessary CSS and JavaScript files for Magnific Popup in your Shopify theme. You can either download the files and host them locally or use a CDN.

  2. Add the appropriate markup to your Shopify template where you want the image to be displayed. For example:

Replace {{ image_url }} with the actual URL of the image you want to display.

  1. Initialize Magnific Popup with the appropriate settings. You can add the following script to your theme file or create a separate JavaScript file and include it:
jQuery(document).ready(function($) {
$('.popup-link').magnificPopup({
type: 'image',
gallery: {
enabled: true
}
// Add other options as needed
});
});

Make sure to include this script after including the jQuery library.

  1. Save the changes and test the functionality on your Shopify store. Clicking on the image should open it in a popup or lightbox.

Remember to adjust the CSS and customize the options of Magnific Popup according to your specific requirements.

Note: The above instructions assume you have jQuery available in your Shopify theme. If your theme doesn’t include jQuery, you may need to include it manually or use an alternative method to achieve the desired functionality.

1 Like