Ideas for lightbox functionality

  • 1
  • 2
  • Question
  • Updated 2 years ago
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???
Photo of David

David

  • 20 Points

Posted 3 years ago

  • 1
  • 2
Photo of Matthew Neil

Matthew Neil

  • 31,698 Points 20k badge 2x thumb
This has me very curious.  Can you post some screen shots of how this looks and works for you?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
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);
});
})();