Single Image click to enlarge (pop up)

Ask the community
1

Not sure if I am missing something but there doesn’t seem to be an option to enable a single image to be clicked and opened up into full screen or a pop up, whatever you wish to call it.

I can see you can set up a multitude of other options like links to pages and such when the single image is clicked but not a simple pop up/enlarge/full screen view.

I tried a workaround by using a pro gallery image set with just one image but the pro gallery option behaves differently to a single image when it comes to the way it sits on your page and adapts to different viewports. I played around with this all morning and I just wasn’t happy with it.

I was just under the impression that a single image pop up would be straightforward to set up and a much used feature on single images. Confused as pretty much every other option is available to set up when a single image is clicked.

Any advice would be appreciated. Cheers

2

Hello,
I’m Liron from the Editor X product team.
Lightbox popups are a great tool when you need an expanded image.
By linking the Lightbox to the original image, and customizing it so it won’t automatically appear, you will get a similar experience as the Pro-Gallery expand mode.

2880×1236 401 KB

To add a Lightbox:

  1. Click the Add icon at the top left of the Editor.

  2. Click Layout Tools .

  3. Click Lightboxes .

  4. Select the lightbox you need and edit it with your expanded image.

  5. Click Set Triggers and under Automatically display lightbox on pages click No.

Then use the Link panel to link the image to the relevant lightbox.
As a result, when your visitors click the image, the lightbox appears.

1748×1194 165 KB

Thanks for reaching out.
Liron

3

Thanks for the help

4

Your welcome! please feel free to reach out again with any question :slight_smile:

5

Thank you so much
We hope to see more features and options in Editor X.

Personally, I think Editor X is the best all-in-one web design platform if they follow the feature options and add a complete business tool at a good price.
Plus more integrated with other platforms.

6

Hi is there any other solution for this as I am working on a website which will have around 250 images on a page and creating 250 light boxes seems a inefficient solution. Thanks

1 Like
7

Additionally I am using the Content Manager to link up images on a repeater so the Lightbox popup doesn’t really work as it only links one image and doesn’t carry on the repeater. Any help would be appreciated thanks.

8

Hey @ddesignyinfo , thanks for your feedback!!
Could you please elaborate on which platforms you would like to integrate Editor X with? For example design tools (Sketch, Figma, XD…), business tools and tasks managers (Monday, Slack…) or maybe automation platforms like Zapier?
Our team is always looking for inspiration from our users’ suggestions and ideas :bulb:

9

Hey @mlazzzarus ,
In your case, instead of using a Lightbox, I would suggest using a Repeater with Velo code.
With Velo you can use images from your Data Collection in a Repeater and set a trigger that shows the images in a popup when visitors click it. You can also customize the popup effect, delay and duration.

https://static.wixstatic.com/media/a27d24_93ec55bca010477eb0482834a3b1fa3e~mv2.gif(image larger than 4 MB)

Site Example: https://lironm8.editorx.io/velo-click-popup

Set the trigger element

  1. Add a Repeater and design it the way you want

  2. Add the Image that you want to open on expanding mode “#imageX3”

  3. Connect the Repeater to your Data Collection

Set the popup element

  1. Add a Container “#box10”

  2. Duplicate the expanding Image “#imageX4” and add it to the new container

  3. Add elements to the container and make sure all new items are connected to data.

  4. Don’t forget to add a ‘Close’ button or ‘X’ shape “#vectorImage4”

  5. Turn on Dev Mode (Tools):

  • Select the Container “#box10” and set its Default Values to [hidden] (Check the ‘Hidden’ box)
  • Select the clicked image “#imageX3” and set the Event Handlers onClick()
  • Select the ‘X’ shape “#vectorImage4” and set the Event Handlers onClick()

  1. Copy & Paste the Velo code into your code and replace the ID of the element “#imageX3” , “#box10” and “#vectorImage4” according to your elements IDs.
    You can display the IDs in the Layers Panel

  2. Set the effectOptions values ( “duration” and “delay” ) and thr effectName ( “fade”, “zoom”, “Fly” etc…) to control the different effects.

  3. Preview :slightly_smiling_face:

$w.onReady(function () {
});

export function imageX3_click(event) {
    let $item = $w.at(event.context);
    let fadeOptions = {
  "duration":   500,
  "delay":      10
};

    $item("#box10").show("zoom", fadeOptions);
}

export function vectorImage4_click(event) {
let $item = $w.at(event.context);
    
    $item("#box10").hide(); 
}

2854×1344 390 KB

Velo Description
The show() function shows the element and returns a Promise that is resolved when the effect is complete and the element’s [hidden] property has been set to false.
You can optionally apply an effect when showing the element by providing an [effectName] value. You can also customize the effect by providing the optional [effectOptions] object.

Velo API Reference: https://www.wix.com/velo/reference/$w/image/show

Please feel free to reach out again,
Liron

10

@lironm thanks for your kind response:

1- I would like to see the complete integration with Google products.
2- I would like to see the complete integration with Telegram, WhatsApp, Instagram, Facebook, Apple Business message, Smart sheet, etc…

11

Thank you so very much. : )

12

Light boxes are just so stupid. How hard would it be to have a simple option like you do in your own WIX and Squarespace and Wordpress… “click: opens image in pop-up”, with choice of dark or light background overlay. I mean leave the light box option, but keep the simple option in. Jeez.

7 Likes