Thursday, October 19, 2006

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

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

1) 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;
}


2) in your template reference the created stylesheet and the javascripts, for ex. put:


3) create a page and a region report. In the Image_id column add this as HTML Expression:


4) create an other region with this (necessary for the pop-up):


5) create the procedures to show the thumbnail and real image:


*) A full explanation copied from one of the examples provided with the zip file.


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

1 comment:

September_flower said...

Hi Dimitri,

I am not getting the hang of this. I am having problems reading what you have inserted in the schroll windows. I copy it and paste into body area of html doc but without getting sense out of this. Little difficult for me to read the code and know what should be there and what not since I am not very used to using code. Still learning.

Plus.. I do not know how to upload the entire directory to either correct location or /i/ - it is still a mystery to be solved.. to me. Can you tell me what to do regarding that?

Hrefna