How can I link to my lightbox form from an image?

  • Profile Image
    xtasy171
    Asked on October 24, 2011 at 04:09 PM

    --------------

    [CODE]<script type="text/javascript" src="//www.jotform.com/min/g=feedback">// <![CDATA[

    new JotformFeedback({

    formId:'XXXXXXXXXXXX',

    base:'http://www.jotform.com/',

    windowTitle:'Video Machine',

    background:'#F5F5F5',

    fontColor:'#FFFFFF',

    type:1,

    height:710,

    width:700,

    });

    // ]]></script>

    <a class="lightbox-XXXXXXXXX" style="cursor: pointer; color: blue; text-decoration: underline;">Video Machine</a>[/CODE]

    --------------

    is the current code. I'd like to be able to replace the text link with a image link script where the image can be called from a URL. 

     

    <a target="_blank" href= "lightbox-XXXXX"> <img src= "http://URL.com/images/playbutton.gif"</a>

    Thanks!

  • Profile Image
    fxr
    Answered on October 24, 2011 at 05:39 PM

    Hopefully I am understanding your question correctly.

    If you want to set an image for that button, you will need to style it with css. 

    This is a bit hacky & will need perseverance to get right.

    If you put this css in your page where the feedback button is embedded in the css section.

    .jotform-feedback-link { background:url(http://www.snowboarding.com/images/logos/Skullcandy.jpg) no-repeat 0 -8px !important }

    I grabbed a random image from the internet. Its 100 px in width & 50px in height. 

    You will have to experiment with the 'positioning'of the background image. The numbers after the no-repeat are x and y co-ordinates. in my example I shifted the image 'up' 8 pixels.

    Then in the form code, you have work out how many 'spaces' is required for the length of the image, & represent each one with a &nbsp; 

    e.g 

     

    <script src="//www.jotform.com/min/g=feedback" type="text/javascript">

    new JotformFeedback({

    formId: "12710415239",

    buttonText: "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",

    base: "http://www.jotform.com/",

    background:'#F59202',

    fontColor:'#FFFFFF',

    buttonSide: "bottom",

    buttonAlign: "right",

    type:false,

    width: 700,height: 500});

    </script>

     

     

    In my example, I end up with a result like this: http://pamppi.info/jotform-testing/feedback.php

     

    That is one of a range of possible workarounds for this. Its a matter of working whats going to work best for you.