Having issues making lightbox work right.

  • Profile Image
    transtrumbp
    Asked on May 03, 2012 at 08:36 PM

    So I have three questions:

    First, I tried installing the lightbox form on the page below (http://www.bizprintsolutions.com/152.html) and it's not working right. On that page, if you scroll to the bottom of the page it's the blue link above the footer that says 'Business Card Design Form - KW'. Click on it and you'll see what's going on.

    Second question is one that I did search the forum for, but we have our page set up so that the form opens when a business card template is clicked. The way we have it now, we add the ?Design=number to each link so it will pass through to the form and we know which design was chosen. I can't seem to figure out how to make that information pass through using the lightbox (supposing we can even get lightbox to work on our site) and was hoping you could help with that. I did find some info in the forum, but it didn't work...http://www.jotform.com/answers/13568-How-to-pass-parameters-with-lightbox

    My final question is about the pass through again, but I wondered if there's a way to pass the image through to the form. So if someone clicks on one of our designs, can we make the image pass over to the form?

    I appreciate your help.

  • Profile Image
    idarktech
    Answered on May 03, 2012 at 09:38 PM

     

    Hi,

    1. You don't need to embed the lightbox form two times, this would display two lightboxes at the same time when called.

    To fix it, simply remove your second lightbox script. And, if you'd like to have another lightbox with the same form, simply declare the lightbox class. Example:

    <a style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline" class="lightbox-21236962429962" tabindex="7000">1st link LIGHTBOX </a> 

    <a style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline" class="lightbox-21236962429962" tabindex="7000">2nd link LIGHTBOX</a> 

    Of course, you can still use images just like what you did in your page.

    <a style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline" class="lightbox-21236962429962" tabindex="7000"><img align="middle" src="uploaded/images/015_62.gif" /></a>

    ---

    2. This actually works: https://www.jotform.com/answers/13568-How-to-pass-parameters-with-lightbox

    Kindly check the last support post and follow below for the fix:

    Check your lightbox script, look for the link part and then REMOVE the number 2after the word feedback. Check this:

    <script src="//jotformpro.com/min/g=feedback2" type="text/javascript">

    It should then look like this: 

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

    --

    3. Unfortunately, it's not possible  with JotForm. This is very complicated. :)

    Let me know if you have further questions or need further clarification. Thanks!

  • Profile Image
    transtrumbp
    Answered on May 04, 2012 at 11:14 AM

    OK, so I think I understand most of this, just missing one piece still. Below is an example of what I'll have after the script...


    <a class="lightbox-21237317488962" style="cursor:pointer;color:blue;text-decoration:underline;"><img align=middle src="image1.jpg"/></a>

    <a class="lightbox-21237317488962" style="cursor:pointer;color:blue;text-decoration:underline;"><img align=middle src="image2.jpg"/></a>

    <a class="lightbox-21237317488962" style="cursor:pointer;color:blue;text-decoration:underline;"><img align=middle src="image3.jpg"/></a>

    I still have one issue though. I need each image when clicked to pass a unique ID through to the forms "Design" field. So is there a way to connect that to each <a class line?  For example, the above code would show 3 separate images. I need image1 to pass img1 to the form, image 2 should pass img2 and image 3 to pass img3.  Can this be done?

  • Profile Image
    transtrumbp
    Answered on May 04, 2012 at 12:45 PM

    Oh, and fyi, the lightbox doesn't seem to be working right at all in Internet Explorer...

  • Profile Image
    jonathan
    Answered on May 04, 2012 at 03:34 PM

    @transtrumbp,

    Hi, can you please try appending on top of your html this code(only the highlighted)

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:g="http://code.google.com/apis/+1button/" xmlns="http://www.w3.org/1999/xhtml">

    This should fix the lightbox not working.
    Please update us. Thanks.

     

  • Profile Image
    transtrumbp
    Answered on May 09, 2012 at 09:41 PM

    OK, I got the lightbox to work correctly on the page, so now I'm down to my final issue. I have multiple images on the page that each need to pass a different ID through to the form. Can this be done without having to create a new form for each image? I can make it work without the lightbox, so is it possible with the lightbox?

  • Profile Image
    liyam
    Answered on May 10, 2012 at 12:43 AM

    You can try passing on the values to pre-populate your form using URL parameters. You can try reading on this user guide to know how.

    Is this something that you're looking for?  If not, can you give a sample of the image that need to pass an ID?

  • Profile Image
    transtrumbp
    Answered on May 10, 2012 at 01:45 AM

    OK, so here's the lightbox code...

    <script src="http://www.jotform.com/min/g=feedback" type="text/javascript">
    new JotformFeedback({
    formId:'##########',
    base:'http://www.jotform.com/',
    iframeParameters: {
    'formfieldname1'='value1',
    'formfieldname2'='value2'
    },

    windowTitle:'Website error form',
    background:'#000000',
    fontColor:'#FFFFFF',
    type:1,
    height:500,
    width:620
    });
    </script>
    <a class="lightbox-21237317488962" style="cursor:pointer;color:blue;text-decoration:underline;"><img align=middle src="image1.jpg"/></a>

    <a class="lightbox-21237317488962" style="cursor:pointer;color:blue;text-decoration:underline;"><img align=middle src="image2.jpg"/></a>

    <a class="lightbox-21237317488962" style="cursor:pointer;color:blue;text-decoration:underline;"><img align=middle src="image3.jpg"/></a>

     How would I make each of the above images pass a different ID through to the form above? I know I can get one ID to pass through using this section of code:

    iframeParameters: {
    'formfieldname1'='value1',
    'formfieldname2'='value2'
    },

    I need to let each image on the page pass a different ID though.

    Here's a page with all of the images so you can see what I mean. http://www.bizprintsolutions.com/keller-williams-business-cards

    If you click on a card image, it opens the form via a pop up window right now and passes the correct ID, but we'd like to use the lightbox. The 'user guide' example doesn't seem to have anything to do with the lightbox.

  • Profile Image
    idarktech
    Answered on May 10, 2012 at 08:26 AM

    @transtrumbp,

    Unfortunately, that functionality isn't yet possible with our lightbox form. However, you can stay with the pop-up option because it is easy for you to autofill textboxes as it works similar to prepopulating fields via URL paramaters.

    Thanks for your understanding.

  • Profile Image
    fgreg
    Answered on September 21, 2012 at 01:48 AM

     cv

  • Profile Image
    tchfosteradopt
    Answered on October 08, 2012 at 12:10 PM

    Hello-- I have read through all of the questions & answers regarding this issue.... and I have tried to follow the various steps -- but the 2nd and 3rd pop ups do not work. Can you take a look? 

    http://140ology.com/test/

     

    Thank you in advance for your help!

  • Profile Image
    Rodjit
    Answered on October 08, 2012 at 01:06 PM

    @tchfosteradopt,

    It is good to post your question on another thread, http://www.jotform.com/answers/answer.php?.

    Initially, you have embed the wrong codes for lightbox.

    Thanks