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).
But now we can add to this;
Indeed... I've still some work to do.
