DGT Explained (1 bis) - Thumbnail Expander

This post shows how I integrated Highslide JS 2.2.7 in DG Tournament (site no longer online).

Background
Highslide, formerly Vevstein Thumbnail Expander, is a javascript written by Vikjavev that allows you to streamline the use of thumbnail images on web pages.

OS-level
1. download highslide and unzip the file
2. copy the higslide directory to your /i/ or www directory

APEX-level
1. Go to “Shared Components” and create a stylesheet

/* highslide */.highslide {  cursor: url(highslide/graphics/zoomin.cur), pointer;  outline: none;}.highslide img {  border: 2px solid gray;}.highslide:hover img {  border: 2px solid white;}.highslide-image {  cursor: poiner; /* opera */  cursor: url(highslide/graphics/zoomout.cur), pointer;  border: 2px solid white;}.highslide-image-blur {  cursor: pointer;  cursor: hand;}.highslide-caption {  display: none;  border: 2px solid white;  border-top: none;  font-family: Verdana, Helvetica;  font-size: 10pt;  padding: 5px;  background-color: white;}.highslide-display-block {  display: block;}.highslide-display-none {  display: none;}.highslide-loading {  display: block;  color: white;  font-style: 'MS Sans Serif';  font-size: 9px;  font-weight: bold;  text-transform: uppercase;  text-decoration: none;  padding: 3px;  opacity: 0.60; /* w3c */  filter: alpha(opacity=60); /* ie */  border-top: 1px solid white;  border-bottom: 1px solid white;  background-color: black;  padding-left: 22px;  background-image: url(highslide/graphics/loader.gif);  background-repeat: no-repeat;  background-position: 3px 1px;}a.highslide-credits,a.highslide-credits i {  padding: 2px;  color: silver;  text-decoration: none;  font-size: 10px;}a.highslide-credits:hover,a.highslide-credits:hover i {  color: white;  background-color: gray;}

2. In the template from the application, reference the created stylesheet and javascripts (Shared Components - Templates - Page)

3. Create a page and a region report based on a Select. In the Image_id column add this as HTML Expression (Edit Column)

4. create an HTML Region on the same page or on page 0 (to have it on every page)

5. create the procedures to show the thumbnail and the real image

create or replace PROCEDURE tdg_pr_show_image (p_image_id IN NUMBER)AS   l_mime        VARCHAR2 (255);   l_length      NUMBER;   l_file_name   VARCHAR2 (2000);   lob_loc       BLOB;BEGIN   SELECT mime_type, image_blob, image_name, DBMS_LOB.getlength (image_blob)     INTO l_mime, lob_loc, l_file_name, l_length     FROM tdg_image    WHERE image_id = p_image_id;   -- Set up HTTP header   -- Use an NVL around the mime type and  if it is a null, set it to   -- application/octect - which may launch a download window from windows   OWA_UTIL.mime_header (NVL (l_mime, 'application/octet'), FALSE);   -- Set the size so the browser knows how much to download   HTP.p ('Content-length: '  l_length);   HTP.p ('Expires: '  TO_CHAR (SYSDATE + 50, 'Day, DD Month, YYYY HH24:MI:SS'));   -- The filename will be used by the browser if the users does a "Save as"   HTP.p ('Content-Disposition: attachment; filename="'  l_file_name  '"');   -- Close the headers   OWA_UTIL.http_header_close;   -- Download the BLOB   wpg_docload.download_file (lob_loc);END tdg_pr_show_image;create or replace PROCEDURE tdg_pr_show_thumbnail (p_image_id IN NUMBER)AS   l_mime        VARCHAR2 (255);   l_length      NUMBER;   l_file_name   VARCHAR2 (2000);   lob_loc       BLOB;BEGIN   SELECT mime_type, thumbnail_blob, image_name, DBMS_LOB.getlength (thumbnail_blob)     INTO l_mime, lob_loc, l_file_name, l_length     FROM tdg_image    WHERE image_id = p_image_id;   -- Set up HTTP header   -- Use an NVL around the mime type and  if it is a null, set it to   -- application/octect - which may launch a download window from windows   OWA_UTIL.mime_header (NVL (l_mime, 'application/octet'), FALSE);   -- Set the size so the browser knows how much to download   HTP.p ('Content-length: '  l_length);   HTP.p ('Expires: '  TO_CHAR (SYSDATE + 50, 'Day, DD Month, YYYY HH24:MI:SS'));   -- The filename will be used by the browser if the users does a "Save as"   HTP.p ('Content-Disposition: attachment; filename="'  l_file_name  '"');   -- Close the headers   OWA_UTIL.http_header_close;   -- Download the BLOB   wpg_docload.download_file (lob_loc);END tdg_pr_show_thumbnail;

When you click on the image (thumbnail) of the user on the Shoutbox in DG Tournament (site no longer online), the image will enlarge, click once more to make it back to normal (thumbnail).