Forum Discussion

DavidDavid8's avatar
DavidDavid8
Qrew Member
9 years ago

Ideas for lightbox functionality

I have been trying to implement a simple Lightbox popup for images and have had some success but I'm looking for some ideas to make this better. I have tried a few different options:

Option 1) Create a <div> which is not displayed and then when the image is clicked the <div> shows. ([htmlid] is a field which I use to ensure that the <div> is unique to that image in cases where multiple images may be showing). Clicking the <div> hides itself.

////////////////////// Formula Text //////////////////////


If ([Product Image] = "", "",

"<div id=\"" & [htmlid] & "\" style=\"position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 21; display : none; background-color: white; border: 5px ridge gray;cursor: pointer;\">" & 

"<img src=\"" & URLRoot() & "up/" & Dbid() & "/a/r" & [Record ID#] & "/e6/v0\" onclick=\"javascript: $('#" & [htmlid] & "').css('display','none')\"></div>" & 

"<img src=\"" & URLRoot() & "up/" & Dbid() & "/a/r" & [Record ID#] & "/e6/v0\" height=\"100\" style=\"z-index: 20;cursor: pointer;\" onclick=\"javascript: $('#" & [htmlid] & "').css('display','inline')\">")

/////////////////////


This works but I can't get it to work when I'm in a report. Clicking the image in the report opens the record instead (presumably because it is also registering a click on the report row).

Option 2) Use mouseEnter as above.

////////////////////// Formula Text //////////////////////


 If ([Product Image] = "", "",

"<img src=\"" & URLRoot() & "up/" & Dbid() & "/a/r" & [Record ID#] & "/e6/v0\" id=\"" & [htmlid] & "\" style=\"position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 21; display : none; background-color: white; border: 5px ridge gray;cursor: pointer; max-height: 400px; max-width: 600px\">" & 



"<img src=\"" & URLRoot() & "up/" & Dbid() & "/a/r" & [Record ID#] & "/e6/v0\" height=\"100\" style=\"z-index: 20;cursor: pointer;\" onmouseleave=\"javascript: $('#" & [htmlid] & "').css('display','none')\" onmouseenter=\"javascript: $('#" & [htmlid] & "').css('display','inline')\">")

//////////////////////


This sort of works, even when I'm in a report but the z-index has no real effect and the image often shows behind other rows in the table. Presumably this is because I'm stuck in a particular z-index stack and can't escape it while I'm inside the <table> <tr> or <td> which probably have their own comparable z-index stacks per line.


Also, I can't seem to get large images to only show at a max-width of 600px even though I have specified it in the new <img> style.

Option 3) Use an external Javascript file which is called when the image is clicked. The javascript creates a new <img> at the end of the <body> and puts it in front. Clicking the new <img> removes itself.


////////////////////// Formula Text //////////////////////


 If ([Product Image] = "", "",

"<img src=\"" & URLRoot() & "up/" & Dbid() & "/a/r" & [Record ID#] & "/e6/v0\" height=\"100\" style=\"cursor: pointer;\" onclick=\"" & 

"javascript:" & 

"$('.AVMI_pop').remove();" & 

"AVMI_img = '" & URLRoot() & "up/" & Dbid() & "/a/r" & [Record ID#] & "/e6/v0';" &

"AVMI_imgID = '" & [htmlid] & "';" & 

"$.getScript(gReqAppDBID + '?a=dbpage&pagename=OnClick.js');" &

"void(0);\"" & 



">")

////////////////////// OnClick.js //////////////////////


$(document).ready(function() {

AddHTML = "<img class=\"AVMI_pop\" id=\"";


AddHTML += AVMI_imgID;

AddHTML += "\" src=\"";

AddHTML += AVMI_img;

AddHTML += "\" style=\"position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 21; display: inline; background-color: white; border: 5px ridge gray; cursor: pointer;\"";

AddHTML += " onclick=\"javascript: $(this).remove();\"";

AddHTML += "/></div>";

$(AddHTML).appendTo("body");


});


//////////////////////


This works too but the response is quite slow, presumably because the page has to call the external "OnClick.js" file every time the <img> is clicked.

ANY IDEAS???
APIs and custom code
Formulas and functions
reports and charts
  • MCFNeil's avatar
    MCFNeil
    Qrew Captain
    9 years ago
    This has me very curious.  Can you post some screen shots of how this looks and works for you?
  • _anomDiebolt_'s avatar
    _anomDiebolt_
    Qrew Elite
    9 years ago
    You are attempting to jam HTML, JavaScript and CSS into your formulas. You will have less problems and greater flexibility if you keep your formulas as simple as possible and use a JavaScript injection technique. The JavaScript that you inject (say module.js) can add the necessary HTML, CSS dynamically and respond to events (such as click events) using event
    handlers.

    In this post to the old forum I posted a 10 page pdf document on various way to bind JavaScript to a button and pass field values to the script:

    https://community.quickbase.com/quickbase/topics/add-javascript-to-a-button

    Unfortunately the file was dropped when the messages were converted to the new forum. If you want a copy of the document let me know.

    Here is a cut and paste from the document of the code you can use:

    Button Formula:
    [iol] & "moduleTable5.js" & [/iol]
    &
    "<a class='QBU_Button Vibrant Success' " &
    " data-rid='" & [Record ID#] & "'" &
    " data-name='" & [Name] & "'" &
    ">Button</a>"
    Script Template:
    (function() {
      var dbid = "YOUR APP DBID";
      var dbidTable1 = "YOUR TABLE DBID";
      var apptoken = "YOUR APP TOKEN";
      $.ajaxSetup({data: {apptoken: apptoken}});
        $("a.QBU_Button").on("click", function(event) {
        console.log("moduleTable5.js");
        var rid = this.dataset.rid;
        var name = this.dataset.name;
        console.log("rid=", rid);
        console.log("name=", name);
      });
    })();