Build an image gallery using APEX

Written by Paulo Vale on Friday, December 19, 2008


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:



Create a table to store the images:



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.



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




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



And run...

Related Posts by Categories



Widget by Hoctro | Jack Book
  1. 17 comments: Responses to “ Build an image gallery using APEX ”

  2. By Stew on December 19, 2008 at 4:31 PM

    How very cool!

    But I dare not show this to my users, as they'll want to add that functionality into the app I'm building them right now! :-)

    Thanks for sharing this. I definitely have to try jquery out!

  3. By Francis on December 19, 2008 at 7:41 PM

    Cool Feature Paolo !

    Thanks.

  4. By Louis-Guillaume Carrier-Bédard on December 19, 2008 at 7:48 PM

    Nice tutorial!
    Thanks for sharing.

  5. By Paulo Vale on December 20, 2008 at 11:16 AM

    Thank you for the nice comments :)

  6. By Byte64 on December 20, 2008 at 3:19 PM

    Well done Paulo!

    I bookmarked this posting for later.

    Cheers,
    Flavio

  7. By Fry on March 3, 2009 at 4:36 AM

    Love the tutorial! I'm happy to see you're using PikaChoose!

    When I developed it, my intention was to keep it easy to use so that I could implement it into my PHP scripts. Different language but same idea!

    Jeremy

  8. By Paulo Vale on March 3, 2009 at 8:47 AM

    Jeremy,

    I used PicaChoose on this example because I liked the simplicity of your plugin. Congratulations for that, and keep up the good work..

  9. By Algimas on June 8, 2009 at 9:39 PM

    Hi Paulo,

    I did this Image_Gallery in my application and it works super ... except one thing ;)
    It stops showing pictures when I turn on the SSP, even if I prepare the whole URL with:

    ...img src="'||APEX_UTIL.prepare_url('f?p=&APP_ID.:0:&SESSION.:APPLICATION_PROCESS=SHOW_GALERY:::G_IMAGE_ID:'
    ||rr.FILE_SYSNAME)||'"...

    Best regards,
    Algimas

  10. By Anonymous on September 14, 2009 at 4:34 AM

    I am new to oracle apex I have build a web site for my church, when I tried to build the app it worked but no image. Is there a step by step for newbe?

  11. By Paulo Vale on September 16, 2009 at 11:56 PM

    Hi Anonymous,

    Are you having trouble with a specific part of this tutorial?

    It's hard to guess what went wrong. Sometimes a simple colon makes the difference ;)

  12. By Josh on June 4, 2010 at 12:41 AM

    Is there a way to do a document upload in Apex without doing a page refresh to upload the doc?

  13. By sachin kumar on June 23, 2010 at 6:18 AM

    Hi Paulo,

    Nice Tutorial,

    i have just incorporate this in my apex application. but its not working.
    i am newbe.
    i see only some icone with cross mark. pl. help me.
    also i am confusing that how to use pikachoose, jquery plugin in application.

    Thanks in Advance.

  14. By ankan majumdar on March 29, 2011 at 10:24 AM

    Hi Paulo,
    Di I need to install Pikachoose in APEX to use this ?

  15. By Sandy on May 24, 2011 at 9:20 AM

    Hi, thank you for your example. I am a dba trying my hand at development with APEX 4.0. I have copied your example but although I get the images onto the screen they all display one after another with a bullet infront of each and a /> after each instead of displaying ne at a time. I tried using the simple.css. I've spent days trying to get it right. Please would you advise what I might be ding wrong. Thank you

  16. By Anonymous on July 15, 2011 at 3:58 PM

    HI Paulo,


    I tried to follow your example,
    but for me it did not work ,
    can you send me your app example,
    so I can check where I am doing something wrong, I am DBA and not have jquery or javascript skills.

    my email marcel.c.rosa@gmail.com

    thanks.

  17. By Anonymous on November 21, 2011 at 7:00 PM

    Paulo,

    I have a problem using your image gallery.
    I see all mi image list in original size. I can't see small icons in your example.

  18. By Anonymous on April 23, 2013 at 4:20 PM

    Hello

    I have a question. How can I create an Image upload item in a form aria that can be viewed/displayed in a interactive report in the same page?

    Thank you,
    Cristina