APEX: Bildergallery mit LightBox

Ich habe die freien Tage genutzt, um eine Bildergallery in APEX zu erstellen. Zum Anzeigen der Bilder verwende ich das JavaScript-Paket "LightBox".

Hier nun eine Schritt-für-Schritt-Anleitung. Um es einfach zu halten, verwendet meine APEX-Anwendung keine Authentication. Zuerst wird natürlich die Anwendung und gleich noch 2 Seiten angelegt. Die erste Seite wird die Bilder in einem Report aufllisten, die zweite ist zum hochladen der Bilder vorgesehen.

Um die Daten in der Datenbank abzulegen, benötigen wir natürlich eine Tabelle. Dies kann wie folgt aussehen und sollte natürlich noch eine Sequence und einen Trigger bekommen:

CREATE TABLE "CARSTEN"."MYGALLERY_BILDER" 
   (	"ID" NUMBER NOT NULL ENABLE, 
	"TEXT" VARCHAR2(255 BYTE), 
	"BILD" BLOB, 
	"MIMETYPE" VARCHAR2(100 BYTE), 
	 CONSTRAINT "MYGALLERY_BILDER_PK" PRIMARY KEY ("ID")
  USING INDEX PCTFREE 10 INITRANS 2 MAXTRANS 255 
  STORAGE(INITIAL 65536 NEXT 1048576 MINEXTENTS 1 MAXEXTENTS 2147483645
  PCTINCREASE 0 FREELISTS 1 FREELIST GROUPS 1 BUFFER_POOL DEFAULT)
  TABLESPACE "USERS"  ENABLE
   ) PCTFREE 10 PCTUSED 40 INITRANS 1 MAXTRANS 255 NOCOMPRESS LOGGING
  STORAGE(INITIAL 65536 NEXT 1048576 MINEXTENTS 1 MAXEXTENTS 2147483645
  PCTINCREASE 0 FREELISTS 1 FREELIST GROUPS 1 BUFFER_POOL DEFAULT)
  TABLESPACE "USERS" 
 LOB ("BILD") STORE AS (
  TABLESPACE "USERS" ENABLE STORAGE IN ROW CHUNK 8192 PCTVERSION 10
  NOCACHE LOGGING 
  STORAGE(INITIAL 65536 NEXT 1048576 MINEXTENTS 1 MAXEXTENTS 2147483645
  PCTINCREASE 0 FREELISTS 1 FREELIST GROUPS 1 BUFFER_POOL DEFAULT)) ;

Da wir gerade in der Datenbank arbeiten, legen wir noch die Prodecedure an, die später die Bilder aus der Datenbank holt:

create or replace PROCEDURE mygallery_bild_anzeigen(p_id in number)
is 
  v_laenge    number := 0;
  v_bild      mygallery_bilder.bild%TYPE;
  v_mimetype  mygallery_bilder.mimetype%TYPE;  
begin
  begin
    select bild, mimetype, dbms_lob.getlength(bild)
    into   v_bild, v_mimetype, v_laenge
    from mygallery_bilder where id = p_id;
        
    owa_util.mime_header(v_mimetype, false);
    htp.p('Content-length:'|| v_laenge);
    owa_util.http_header_close;
    
    wpg_docload.download_file(v_bild);
  end;
end;

Auf der erwähnten ersten Seite erstellen wir nun einen Report, der die Bildinfos aus der Tabelle holt:

select id 
       , text 
       , mimetype 
       , dbms_lob.getlength(bild) / 1024 as groesse 
       , 0 as thumbnail 
from mygallery_bilder

Weiter geht es in den “Report Attributes” und dort in den Eigenschaften der Spalte “Thumbnail”. Die “HTML Expression” dieser Spalte erweitern wir um diesen Code:

<a class="lightbox" href="#OWNER#.MYGALLERY_BILD_ANZEIGEN?p_id=#ID#">
<img src="#OWNER#.MYGALLERY_BILD_ANZEIGEN?p_id=#ID#" width="65" />
</a>

Dieser Code sorgt für ein kleine Thumbnail-Bild und gibt dem Link eine CSS-Class, über die nachher LightBox auf den Link zugreifen und verwenden kann.

Über o.g. Link lädt man jetzt das LightBox-Paket. Dieses enthält jQuery-Komponenten, die ich ja schon erfolgreich in ein paar früheren Posts verwendet habe.

Für die Integration von Lightbox benötigen wir folgende Dateien:

  • jquery.js
  • jquery.lightbox-0.5.js
  • jquery.lightbox-0.5.css
  • sowie die dazugehörigen Bilder aus dem Ordner “images”

Diese binden wir wieder über das Seiten-Template ein:

<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery.js"></script>
<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery.lightbox-0.5.js"></script>
<link media="screen" href="#WORKSPACE_IMAGES#jquery.lightbox-0.5.css" type="text/css" rel="stylesheet" />

Was zum Anzeigen nun noch fehlt, ist der jQuery-LightBox-Aufruf. Dafür kopieren wir folgenden Text in den “Header Text” der Seiteneigenschaften der ersten Seite:

<script type="text/javascript">
    $().ready(function() {
        $(".lightbox").lightBox();
    });
    </script>

Was jetzt noch fehlt, ist die Seite 2 mit Inhalt zum Hochladen der Bilder zu füllen. Dafür legen wir eine Region an, die u.a. ein Beschreibungsfeld (Textarea) und ein FileUpload-Item enthält.

Um die Beschreibung und das Bild in der Datenbank zu speichern ist folgender Page-Process nötig:

declare
  v_mimetype varchar2(100);
  v_content blob;
begin
  select blob_content, mime_type into v_content, v_mimetype 
  from wwv_flow_files where name=:P2_DATEI;

  insert into mygallery_bilder (text, bild, mimetype)
  values (:P2_DESCRIPTION, v_content, v_mimetype);

  delete from wwv_flow_files where name=:P2_DATEI;
end;

Die zweite Seite sollte nun noch Buttons zum “Abbrechen” und “Abspeichern” (dieser startet den Page-Process) bekommen.

Seite 2

Seite 1 Report

Sobald man nun auf eines der Bilder klickt, startet LightBox und zeigt das Bild in voller Größe an, während es den Hintergrund per CSS verdunkelt.

Seite 1 Lightbox

Natürlich bietet die Anwendung bisher nur Grundfunktionen. Zum Beispiel gibt es keine Überprüfung beim Upload der Bilder, bzw. Benutzerverwaltung. Das kann dann aber jeder für sich selbst umsetzen. Hier ging es alleine um die Möglichkeit einer Bildergallery.

Auf noch etwas möchte ich hinweisen. Wer beim aufrufen der Procedure “mygallery_bild_anzeigen” im Browser eine Fehlermeldung bekommt, dass zu wenig Rechte vorhanden sind, sollte sich den Blogeintrage von Dietmar Aust durchlesen. Er beschreibt darin sehr schön, was man in der Datenbank anpassen muß, um die Procedure aus dem Browser heraus per Link aufrufen zu können.

Dieser Beitrag wurde unter APEX, Oracle abgelegt und mit , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.