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

No comments: