Monday, January 08, 2007

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).

7 comments:

Anonymous said...

Dimitri,

geweldig!

de eerste "tournament" applicatie heb je ter beschikking gesteld. ga je dat voor deze ook doen ?

Leo

Dimitri Gielis said...

Hallo Leo,

Momenteel ben ik dat niet van plan, maar het kan zijn dat ik nog van gedacht verander.

Groetjes,
Dimitri

Ribhi said...

Hi Dimitri,

I read your white paper "APEX BY EXAMPLE:: SHARED COMPONENTS IN DG
TOURNAMENT". This paper refers DG
TOURNAMENT application. It's a grate job.I'm wondering if the application available for download!.

Best regards,
Ribhi Akhras
rakhras@arabfund.org

Anonymous said...

Hi Dimitri,

Thanks for laying out how to integrate HighSlide into ApEx.

It is possible to use highslide without adding anything into the /i/ directory, although it does mean you don't get the graphics (unless you upload them separately of course). Simply upload the highslide.js file as a static file and place the following in the page or page template HTML header region:

<link rel="stylesheet" href="#WORKSPACE_IMAGES#highslide.css" type="text/css" />
<script src="#APP_IMAGES#highslide.js" type="text/javascript"></script>
<script type="text/javascript">
hs.graphicsDir = '';
hs.outlineType = '';
window.onload = function() {
hs.preloadImages(5);
}
</script>

It is important to set both hs.graphicsDir and hs.outlineType as zero-length strings as this overrides the settings in the js file (alternatively you could alter them in there). If you don't do this the script won't run properly.

Cheers,
Lucy

Anonymous said...

Hi Dimitri,

I hope you read this, because it´s a long time ago you had posted about this subject.

I installed everything, but get an error on the report-page: hs not identifeid (or something like that).

I´m not familiar with stylesheets. And don´t see how to relate the stylesheets to the template (I don´t see a name of the stylesheet?).

If I do mouse-over over the image_id I see the message "Enlarge..." but the picture itself is represented as a cross.

Problem is how to call the stylesheet, and what is thumb1 ? Must I change it for my situation ?

Thanks in advance for any reaction.

Pleae mail to lvangaal at redcross.nl

Anonymous said...

Hi Dimitri,
I'm a newbie in APEX and I follow the steps in this tutorial but the large image opened in new page, not in 'popup' as in your demo app. I suppose the problem is region of point 4 - is this simple HTML region or i'm missing something? Now the region always showing in the page and i don't realize how he is contain the large image?

Will appreciate any suggestions and help. Thanks.

Radoslav

zOu said...

Hi Dimitri,
great site in apex but I am unable to work your example.
the PL proc have errors due to the missing concatenation characters ||(fixed) but how is defined tdg_images table?

thanks