Clickable image preview not working

  • Profile Image
    elenabathory
    Asked on August 15, 2017 at 10:29 PM
    can product images be enlarged by my customers?
  • Profile Image
    Jan
    Answered 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.

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

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

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

    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. 

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

    Here's the result:

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

  • Profile Image
    elenabathory
    Answered 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
    ...
  • Profile Image
    Jan
    Answered 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.