DG Tournament Explained (1) - Thumbnail Expander

This is a first draft, as some people asked me to publish it as quick as possible. If you see it’s not working or I forgot some steps, put a comment. I’ll update it when time allows, as I’m at OOW and don’t have that much time.

While I’m blogging about the integration of the “Vevstein Thumbnail Expander” I see there’s a new version available, called Highslide JS.

I initially used version 1.1.2 (free version) in DG Tournament (site no longer online) but I recently upgraded to 2.0.4 (in my APEX dev environment - this version is free for non-commercial purposes).

You can implement the thumbnail expander in different ways. Having everything in the database (workspace_images), having it on the /i/ directory, … I’ll show the one I think it’s the fastest implementation.

OS-level

Download highslide 2.0.4 here.
Unzip the file
Copy the higslide directory to your /i/ or www dir. (for ex. oracle/product/10.2.0/db_2/Apache/Apache/htdocs)

APEX-level

in shared components create a stylesheet and put this in:

.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;
}

in your template reference the created stylesheet and the javascripts, for ex. put:
 <link rel=“stylesheet” href=“#WORKSPACE_IMAGES#theme_TDG.css” type=“text/css”> <script type=“text/javascript” src=“highslide/highslide.js”></script> <script type=“text/javascript”> hs.graphicsDir = ‘highslide/graphics/’; hs.outlineType = null; window.onload = function() { hs.preloadImages(); } </script>
create a page and a region report. In the Image_id column add this as HTML Expression:
 <div style=“text-align:center;”> <a href=“http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/#OWNER#.TDG\_PR\_SHOW\_IMAGE?p\_image\_id=#IMAGE\_ID#” class=“highslide” onclick=“return hs.expand(this)”> <img id=“thumb1” class=“vte-auto” src=“http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/#OWNER#.TDG\_PR\_SHOW\_THUMBNAIL?p\_image\_id=#IMAGE\_ID#” title=“Click to enlarge” /> </a> </div> <!–<div class=“‘highslide-caption’” id=“‘caption-for-thumb1’”>#USER_NAME#</div>–>
create an other region with this (necessary for the pop-up):
 <div id=“highslide-container”></div>
create the procedures to show the thumbnail and real image:
 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; 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;

*) A full explanation copied from one of the examples provided with the zip file.
 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “xhtml11.dtd”> <html> <head> <title>Highslide JS</title> <!– 1 ) Reference to the file containing the javascript. This file must be located on your server. –> <script type=“text/javascript” src=“highslide/highslide.js”></script> <!– 2) Initialize the hs object and optionally override the settings defined at the top of the highslide.js file. The parameter hs.graphicsDir is important! –> <script type=“text/javascript”> hs.graphicsDir = ‘highslide/graphics/’; hs.outlineType = null; window.onload = function() { hs.preloadImages(); } </script> <!– 3) These CSS-styles are necessary for the script to work. You may also put them in an external CSS-file. See the webpage for documentation. –> <style type=“text/css”> * { font-family: Verdana, Helvetica; font-size: 10pt; } .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; } </style> </head> <body style=“background-color: silver”> <!– 4) Create an empty container for the Highslide popups to live in. This container must be defined directly after the body tag. –> <div id=“highslide-container”></div> <!– 5) This is how you mark up the thumbnail image with an anchor tag around it. The anchor’s href attribute defines the URL of the full-size image. –> <a href=“http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/images/full-image.jpg” class=“highslide” onclick=“return hs.expand(this)”> <img src=“http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/http://not-a-real-namespace/images/thumbnail.jpg” alt=“Highslide JS” id=“thumb1” title=“Click to enlarge” height=“120” width=“107” /> </a> <!– 6 (optional). This is how you mark up the caption. The id contains the words ‘caption-for-’, then the id of the img tag above. –> <div class=“‘highslide-caption’” id=“‘caption-for-thumb1’”> This caption can be styled using CSS. </div> </body> </html>

That should do it! (replace the <.br /> by a carriage return, for an odd reason blogger puts this in?)

DG Tournament Explained (1) - Thumbnail Expander

Comments