DGT Explained (1 bis) - Thumbnail Expander

This post shows how I integrated Highslide JS 2.2.7 in DG Tournament.

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, the image will enlarge, click once more to make it back to normal (thumbnail).