Images not displaying properly in Image Slider widget after embedding the form on our website

  • Profile Image
    dougboccabella
    Asked on December 10, 2015 at 12:52 PM

    Hello, 

     

    I have just recently built a form, and in JOTFORM it is showing the images correctly using "IMAGE SLIDER", however when I embed it on my site it shows up with a "?"

     

    Please see the following link: http://www.fallsafetysolutions.com/rooftop-guardrail-calculator

  • Profile Image
    Ben
    Answered on December 10, 2015 at 01:53 PM

    The reason why that is happening is because you have placed your images through in the widget over HTTPS while your website is HTTP.

    https://www.fallsafetysolutions.com/fallsafetysolutions_com/bank/pageimages/rg18.jpg

    In doing so, browser checks your website to see the security certificate and you do not have any, so the images are being blocked for security reasons.

    To fix this, please replace the embedding code from this:

    <div class="content"><p style="text-align: center;"><iframe frameborder="0" width="800" height="2000" src="https://form.jotform.com/53434953726260" scrolling="no"></iframe></p>
    <script type="text/javascript">
    window.handleIFrameMessage = function(e) { var args = e.data.split(":"); var iframe = document.getElementById("JotFormIFrame"); if (!iframe) return; switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height =
    </script></div>

    to this:

    <div class="content"><p style="text-align: center;"><iframe frameborder="0" width="800" height="2000" src="http://form.jotform.com/53434953726260" scrolling="no"></iframe></p>
    <script type="text/javascript">
    window.handleIFrameMessage = function(e) { var args = e.data.split(":"); var iframe = document.getElementById("JotFormIFrame"); if (!iframe) return; switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height =
    </script></div>

    and replace all images to point to HTTP (without S) links, so replace the above link to the image with this one:

    http://www.fallsafetysolutions.com/fallsafetysolutions_com/bank/pageimages/rg18.jpg

    Once you do, it will work for you properly, but do let us know how it goes.