SquareSpace LightBox when Image Link Clicked

  • phoebeseward
    Asked on June 23, 2015 at 1:11 PM

    Hi,

    I have multiple images on my SquareSpace site that I would like to link to different forms. When the image is clicked, I would like a lightbox form to open.

     

    Please help me on how I would set this up.

     

    - Would I embed the lightbox code on a new page of my SquareSpace sight? (I have tried this, when the image is clicked it takes me to the site with a blue text link of the form's title, and then you must click on that link for the lightbox to open)

     

    Please do not simply reply with links to other discussions that are not relevant to my particular problem, I have seen them and they are not helping, thank you.

     

    Phoebe

    Page URL: http://affluentappraisals.com/hire-me-as-your-appraiser
  • Welvin Support Team Lead
    Replied on June 23, 2015 at 1:59 PM

    Hi Phoebe,

    Yes, you should embed the form using our lightbox method:

    http://www.jotform.com/help/220-How-to-Create-a-Lightbox-Form

    Now, to change the blue hyperlink to an image, you just need to replace it with your image tags. For example, this is your lightbox codes:

    <script src="https://secure.jotform.com/static/feedback2.js?3.3.7626" type="text/javascript">

    var JFL_51732076637155 = new JotformFeedback({

    formId:'51732076637155',

    base:'https://secure.jotform.com/',

    windowTitle:'Equitable Distribution &amp; Divorce Appraisals',

    background:'#ffffff',

    fontColor:'#000000',

    type:1,

    height:500,

    width:700,

    openOnLoad:false

    });

    </script>

    <a class="lightbox-51732076637155" style="cursor:pointer;color:blue;text-decoration:underline;">Equitable Distribution &amp; Divorce Appraisals</a>

    You will just change the last line from:

    <a class="lightbox-51732076637155" style="cursor:pointer;color:blue;text-decoration:underline;">Equitable Distribution &amp; Divorce Appraisals</a>

    to:

    <a class="lightbox-51732076637155"><img src="YOUR IMAGE URL HERE" style="width:304px;height:228px;"></a>

    Please don't forget to replace YOUR IMAGE URL HERE with your actual image URL.

    Let us know if you need further assistance.

    Thanks

  • phoebeseward
    Replied on June 23, 2015 at 5:28 PM

    Thank you so much! It works!

    Is there any way I can retain the cursor: pointer feature? Rather than the cursor remaining an arrow when it is hovering over the image link?

    Also: the images that link to the forms are in the middle part of the page, and when a form lightbox is opened & then closed, it returns to the page, but to the top of the page. In other words, someone looking at the page would click an image for the lightbox to open to learn more information, then X out of the form and need to scroll back down again. Is there a way to fix this so that once they X out they are exactly in the same position on the page as they were when they opened the lightbox?

    Here is my URL again: http://affluentappraisals.com/hire-me-as-your-appraiser

    Thanks again!

  • David JotForm Support Manager
    Replied on June 23, 2015 at 6:53 PM

    Your two new questions, will be addressed here:

    1) http://www.jotform.com/answers/595240

    2) http://www.jotform.com/answers/595241