ContributionsMost RecentMost LikesSolutionsIdeas for lightbox functionalityI 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???