Clickable image preview not working

  • elenabathory
    Asked on August 15, 2017 at 10:29 PM
    can product images be enlarged by my customers?
  • Jan
    Replied on August 15, 2017 at 10:54 PM

    Upon checking, I can see that the "Clickable Image Preview" option is already enabled. Please try the following steps to fix the issue:

    1. Click the payment field and then click the "Payment Settings" button. After that, select the product and then click the "Edit" button.

    Clickable image preview not working Image 1 Screenshot 70

    2. Click the "Remove image" text link to delete the image. After that, please upload it again.

    Clickable image preview not working Image 2 Screenshot 81

    3. After uploading the image back, please click the "Save Product" button.

    4. Click the "Properties" icon at the top right.

    Clickable image preview not working Image 3 Screenshot 92

    5. Under the "Additional Gateway Settings", turn off the "Clickable Image Preview" option. After that, click the "Continue" button and close the payment wizard. Save the form and preview it. 

    Clickable image preview not working Image 4 Screenshot 103

    6. Go back to the Form Builder and turn on the "Clickable Image Preview" option. Save the form and preview it.

    Clickable image preview not working Image 5 Screenshot 114

    Here's the result:

    Clickable image preview not working Image 6 Screenshot 125

    Hope that helps. Let us know if you need further assistance. Thank you.

  • elenabathory
    Replied on August 16, 2017 at 11:43 PM
    Thanks so much for the detailed help! Is it possible to disable the ability to right click on the enlarged image? I don't want people to be able to save the image.Thanks in advance.E
    ...
  • Jan
    Replied on August 17, 2017 at 12:09 AM

    Unfortunately, there's no option to disable the right click function in the Form Builder.

    Please take note that you cannot insert a Javascript inside the form using the Form Builder. However, you can inject a custom script on the web page where the form is embedded.

    You can insert this script inside the <body> element of the web page where the form is embedded:

    <script language="JavaScript" type="text/javascript" >
    <!--
    document.oncontextmenu = function() {return false}
    if (document.layers) {
     window.captureEvents(Event.MOUSEDOWN);
     window.onmousedown = function(e) {
       if (e.target==document) return false;
     }
    }
    else {
     document.onmousedown = function() {return false}
    }
    //-->
    </script>

    You may also download the form source code and upload it to your server. Here's a guide: How-to-get-the-Full-Source-Code-of-your-Form.

    Hope that helps. Thank you.