Oracle Apex Notebook

Build an image gallery using APEX

This time, I'll show how to build a simple image gallery using Oracle Application Express (APEX) and taking advantage of Jquery framework capabilities. But first of all, follow the link to see the magic happening ;)

There are several slideshow or gallery plugins for Jquery. You can choose the one you like more and re-adapt the code to fit the plugin requirements. My choice was Pikachoose.

Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play.



Lets begin creating a simple database structure to store the images.

Create a sequence to be used by image id:

<br />CREATE SEQUENCE "GAL_IMAGES_SEQ"<br /> INCREMENT BY 1<br /> START WITH 1<br /> MINVALUE 1<br /> MAXVALUE 999999999999999999999999999<br /> NOCYCLE<br /> NOORDER<br /> CACHE 20<br />/<br />

Create a table to store the images:

<br />CREATE TABLE "GAL_IMAGES"<br /> ( "IMAGE_ID" NUMBER NOT NULL ENABLE,<br /> "IMAGE_NAME" VARCHAR2(4000),<br /> "MIME_TYPE" VARCHAR2(4000),<br /> "IMAGE" BLOB,<br /> CONSTRAINT "GAL_IMAGES_PK" PRIMARY KEY ("IMAGE_ID") ENABLE<br /> )<br />/<br /><br />CREATE OR REPLACE TRIGGER "BI_GAL_IMAGES"<br /> BEFORE INSERT<br /> ON "GAL_IMAGES"<br /> FOR EACH ROW<br />BEGIN<br /> IF :NEW."IMAGE_ID" IS NULL<br /> THEN<br /> SELECT "GAL_IMAGES_SEQ".NEXTVAL<br /> INTO :NEW."IMAGE_ID"<br /> FROM DUAL;<br /> END IF;<br />END;<br />/<br /><br />ALTER TRIGGER "BI_GAL_IMAGES" ENABLE<br />/<br />

Now on APEX, following the wizard, create a data entry form based on "GAL_IMAGES" table.


Go to Shared Components>Application Items and Create an Application Item. Ex: G_IMAGE_ID.

Create an Application Process to retrieve the image from the database. Identify the point at which this process will run as "On Demand". The point of "On Demand" is that it will only fire when requested by a page process.

<br />DECLARE<br /> l_mime VARCHAR2 (255);<br /> l_length NUMBER;<br /> l_file_name VARCHAR2 (2000);<br /> lob_loc BLOB;<br />BEGIN<br /><br /> SELECT "MIME_TYPE", "IMAGE", "IMAGE_NAME", DBMS_LOB.getlength ("IMAGE")<br /> INTO l_mime, lob_loc, l_file_name, l_length<br /> FROM "GAL_IMAGES"<br /> WHERE image_id = :G_IMAGE_ID;<br /><br /> OWA_UTIL.mime_header (NVL (l_mime, 'application/octet'), FALSE);<br /><br /> HTP.p ('Content-length: ' || l_length);<br /> HTP.p ('Content-Disposition: filename="' || l_file_name || '"');<br /> OWA_UTIL.http_header_close;<br />-- Download the BLOB<br /> WPG_DOCLOAD.download_file (lob_loc);<br />END;<br />

Now create the page where you want to put the image gallery and then, Edit Page > HTML Header:

<br /><link type="text/css" href="#WORKSPACE_IMAGES#pikabottom.css" rel="stylesheet"><br /><script type="text/javascript" src="#WORKSPACE_IMAGES#jquery-1.2.6.min.js"></script><br /><script language="javascript"><br /> <!-- $(document).ready( function (){ $("#pikame").PikaChoose(); }); --><br /></script><br /><script type="text/javascript" src="#WORKSPACE_IMAGES#pikachoose.js"></script><br />


On the same page, create a PL/SQL Dynamic Content region:

<br />DECLARE<br /> CURSOR c1<br /> IS<br /> SELECT "IMAGE_ID"<br /> FROM "GAL_IMAGES";<br />BEGIN<br /> HTP.p ('<ul id="pikame">');<br /><br /> FOR gallery_rec IN c1<br /> LOOP<br /> HTP.p<br /> ( '<li><br /> <img src="f?p=&APP_ID.:0:&SESSION.:APPLICATION_PROCESS=proc_show_image:::G_IMAGE_ID:' || gallery_rec.image_id || '" />/></li>'<br /> );<br /> END LOOP;<br /><br /> HTP.p ('</ul>');<br />END;<br />

And run...

17 comments | Posted in » Javascript, jQuery, Oracle Apex, Third Party Integration