Create a Lightbox View for Images

A light box displays your images in a front layer while simultaneously darkening the rest of your webpage. It is a popular way to display a larger image without directing your users to another webpage. This article shows you how to integrate the Lightbox JS solution by Lokesh Dhakar. The entire JavaScript and CSS solution can be included in your DataPage header so there is no need to reference external files. This article assumes you already have a Report that uses images.

Lightbox sample

In this article, you integrate the lightbox feature into the Details page of an existing Search and Report.

  1. Navigate to the DataPages listing, select the Report DataPage where you wish to add the lightbox, and click Edit.
  2. Proceed to the DataPage DataSource screen. Check Enable Advanced Options and Enable Parameters, if not already checked.
  3. Proceed to the Configure Details Page Fields screen.

Create_a_lightbox_view_for_images_1

4. To create a thumbnail link, reference an image stored in the Files section of Caspio Bridge. In order to reference an image, the file must be used in this DataPage. For example, if an image is used in a results page, you can reference it directly in the details page. If the image is not used elsewhere you can add it to the current page and hide it in a hidden table. You will need to insert HTML blocks around the image element and create an HTML table with the display style set to none.

<table style="display:none;"><tr><td>

</td></tr></table>

Create_a_lightbox_view_for_images_2

 

5. Next, hide your original image in a hidden table. First create an image thumbnail of your image. Under the hidden table we will create another thumbnail to link to the lightbox. You will reference the image location and create an image <img> tag.

<img border="0" height="50" src="BridgeServer/dpImages.asp?appkey=APP_KEY&file=[@field:IMAGE_FILENAME]"/>

Replace the BridgeServer with your Caspio Bridge server address.

Replace the APP_KEY with the App Key of this DataPage.

Using the Insert button at the lower right hand corner of the HTML panel, insert the image field parameter in string format to replace the [@field:IMAGE_FILENAME] parameter.

Change the height attribute as needed. As an alternative to specifying the height of the original image file, you can utilize the Image Resizer feature to have Caspio automatically create a separate thumbnail file.

This process is further outlined in the article on Referencing Your Files. Please note that image file names must only contain ASCII characters (double-byte characters such as Chinese are not supported).

Create_a_lightbox_view_for_images_3

6. Now that you have created a thumbnail image, you are going to create a hyperlink around it to link to the lightbox. The rel=”lightbox” attribute inside the HTML tag signifies that the destination of this link will be displayed as a lightbox.

<a rel="lightbox" href="Image_URL" >IMG tag</a>

Add this link tag around the IMG tag from step 3.

Change the Image_URL to the src address from step 3.

7. Next, insert the JavaScript and CSS into the header. Using the Insert button at the bottom right corner of the DataPage Elements panel, insert header and footer elements. Select the header element and insert the CSS and JavaScript from this article. Click Finish to save your DataPage.

JavaScript Reference:

<script>

/*Lightbox JS: Fullsize Image Overlays by Lokesh Dhakar – http://www.huddletogether.com

For more information on this script, visit: http://huddletogether.com/projects/lightbox/  */

var loadingImage="loading.gif";

var closeButton="http://static.caspio.com/images/xref/close.gif";

function getPageScroll(){var yScroll;if(self.pageYOffset){yScroll=self.pageYOffset}else{if(document.documentElement&&document.documentElement.scrollTop){yScroll=document.documentElement.scrollTop}else{if(document.body){yScroll=document.body.scrollTop}}}arrayPageScroll=new Array("",yScroll);return arrayPageScroll}function getPageSize(){var xScroll,yScroll;if(window.innerHeight&&window.scrollMaxY){xScroll=document.body.scrollWidth;yScroll=window.innerHeight+window.scrollMaxY}else{if(document.body.scrollHeight>document.body.offsetHeight){xScroll=document.body.scrollWidth;yScroll=document.body.scrollHeight}else{xScroll=document.body.offsetWidth;yScroll=document.body.offsetHeight}}var windowWidth,windowHeight;if(self.innerHeight){windowWidth=self.innerWidth;windowHeight=self.innerHeight}else{if(document.documentElement&&document.documentElement.clientHeight){windowWidth=document.documentElement.clientWidth;windowHeight=document.documentElement.clientHeight}else{if(document.body){windowWidth=document.body.clientWidth;windowHeight=document.body.clientHeight}}}if(yScroll<windowHeight){pageHeight=windowHeight}else{pageHeight=yScroll}if(xScroll<windowWidth){pageWidth=windowWidth}else{pageWidth=xScroll}arrayPageSize=new Array(pageWidth,pageHeight,windowWidth,windowHeight);return arrayPageSize}function pause(numberMillis){var now=new Date();var exitTime=now.getTime()+numberMillis;while(true){now=new Date();if(now.getTime()>exitTime){return}}}function getKey(e){if(e==null){keycode=event.keyCode}else{keycode=e.which}key=String.fromCharCode(keycode).toLowerCase();if(key=="x"){hideLightbox()}}function listenKey(){document.onkeypress=getKey}function showLightbox(objLink){var objOverlay=document.getElementById("overlay");var objLightbox=document.getElementById("lightbox");var objCaption=document.getElementById("lightboxCaption");var objImage=document.getElementById("lightboxImage");var objLoadingImage=document.getElementById("loadingImage");var objLightboxDetails=document.getElementById("lightboxDetails");var arrayPageSize=getPageSize();var arrayPageScroll=getPageScroll();if(objLoadingImage){objLoadingImage.style.top=(arrayPageScroll[1]+((arrayPageSize[3]-35-objLoadingImage.height)/2)+"px");objLoadingImage.style.left=(((arrayPageSize[0]-20-objLoadingImage.width)/2)+"px");objLoadingImage.style.display="block"}objOverlay.style.height=(arrayPageSize[1]+"px");objOverlay.style.display="block";imgPreload=new Image();imgPreload.onload=function(){objImage.src=objLink.href;var lightboxTop=arrayPageScroll[1]+((arrayPageSize[3]-35-imgPreload.height)/2);var lightboxLeft=((arrayPageSize[0]-20-imgPreload.width)/2);objLightbox.style.top=(lightboxTop<0)?"0px":lightboxTop+"px";objLightbox.style.left=(lightboxLeft<0)?"0px":lightboxLeft+"px";objLightboxDetails.style.width=imgPreload.width+"px";if(objLink.getAttribute("title")){objCaption.style.display="block";objCaption.innerHTML=objLink.getAttribute("title")}else{objCaption.style.display="none"}if(navigator.appVersion.indexOf("MSIE")!=-1){pause(250)}if(objLoadingImage){objLoadingImage.style.display="none"}selects=document.getElementsByTagName("select");for(i=0;i!=selects.length;i++){selects[i].style.visibility="hidden"}objLightbox.style.display="block";arrayPageSize=getPageSize();objOverlay.style.height=(arrayPageSize[1]+"px");listenKey();return false};imgPreload.src=objLink.href}function hideLightbox(){objOverlay=document.getElementById("overlay");objLightbox=document.getElementById("lightbox");objOverlay.style.display="none";objLightbox.style.display="none";selects=document.getElementsByTagName("select");for(i=0;i!=selects.length;i++){selects[i].style.visibility="visible"}document.onkeypress=""}function initLightbox(){if(!document.getElementsByTagName){return}var anchors=document.getElementsByTagName("a");for(var i=0;i<anchors.length;i++){var anchor=anchors[i];if(anchor.getAttribute("href")&&(anchor.getAttribute("rel")=="lightbox")){anchor.onclick=function(){showLightbox(this);return false}}}var objBody=document.getElementsByTagName("body").item(0);var objOverlay=document.createElement("div");objOverlay.setAttribute("id","overlay");objOverlay.onclick=function(){hideLightbox();return false};objOverlay.style.display="none";objOverlay.style.position="absolute";objOverlay.style.top="0";objOverlay.style.left="0";objOverlay.style.zIndex="90";objOverlay.style.width="100%";objBody.insertBefore(objOverlay,objBody.firstChild);var arrayPageSize=getPageSize();var arrayPageScroll=getPageScroll();var imgPreloader=new Image();imgPreloader.onload=function(){var objLoadingImageLink=document.createElement("a");objLoadingImageLink.setAttribute("href","#");objLoadingImageLink.onclick=function(){hideLightbox();return false};objOverlay.appendChild(objLoadingImageLink);var objLoadingImage=document.createElement("img");objLoadingImage.src=loadingImage;objLoadingImage.setAttribute("id","loadingImage");objLoadingImage.style.position="absolute";objLoadingImage.style.zIndex="150";objLoadingImageLink.appendChild(objLoadingImage);imgPreloader.onload=function(){};return false};imgPreloader.src=loadingImage;var objLightbox=document.createElement("div");objLightbox.setAttribute("id","lightbox");objLightbox.style.display="none";objLightbox.style.position="absolute";objLightbox.style.zIndex="100";objBody.insertBefore(objLightbox,objOverlay.nextSibling);var objLink=document.createElement("a");objLink.setAttribute("href","#");objLink.setAttribute("title","Click to close");objLink.onclick=function(){hideLightbox();return false};objLightbox.appendChild(objLink);var imgPreloadCloseButton=new Image();imgPreloadCloseButton.onload=function(){var objCloseButton=document.createElement("img");objCloseButton.src=closeButton;objCloseButton.setAttribute("id","closeButton");objCloseButton.style.position="absolute";objCloseButton.style.zIndex="200";objLink.appendChild(objCloseButton);return false};imgPreloadCloseButton.src=closeButton;var objImage=document.createElement("img");objImage.setAttribute("id","lightboxImage");objLink.appendChild(objImage);var objLightboxDetails=document.createElement("div");objLightboxDetails.setAttribute("id","lightboxDetails");objLightbox.appendChild(objLightboxDetails);var objCaption=document.createElement("div");objCaption.setAttribute("id","lightboxCaption");objCaption.style.display="none";objLightboxDetails.appendChild(objCaption);var objKeyboardMsg=document.createElement("div");objKeyboardMsg.setAttribute("id","keyboardMsg");objKeyboardMsg.innerHTML='press <a href="#" onclick="hideLightbox(); return false;"><kbd>x</kbd></a> to close';objLightboxDetails.appendChild(objKeyboardMsg)}function addLoadEvent(func){var oldonload=window.onload;if(typeof window.onload!="function"){window.onload=func}else{window.onload=function(){oldonload();func()}}}addLoadEvent(initLightbox);

</script>

<style>

#lightbox{background-color:#eee;padding:10px;border-bottom:2px solid #666;border-right:2px solid #666;}#lightboxDetails{font-size:.8em;padding-top:.4em;}#lightboxCaption{float:left;}#keyboardMsg{float:right;}#closeButton{top:5px;right:5px;}#lightbox img{border:none;clear:both;}#overlay img{border:none;}#overlay{background-image:url(http://static.caspio.com/images/xref/overlay.png);}* html #overlay{background-color:#333;background-color:transparent;background-image:url(http://b3.caspio.com/RMA_ref/ blank.gif);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" http://static.caspio.com/images/xref/overlay.png",sizingMethod="scale");}

</style>

Note Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.

Integrating a Lightbox into your Results Page:

You can use the same Lightbox script and implementation method described above for Gallery and List Results pages.

For Tabular results, you can skip hiding the image (step #5) as long as the image is also used in the Details page. In this case, you simply paste the thumbnail code (step #3) into an HTML Block where you want the thumbnail column to appear.