Show images from table using jQuery plugin jCarousel Lite

Here is how you can show images from table using jCarousel Lite jQuery plugin.

Example is based on Product Portal sample application, DEMO_PRODUCT_INFO table and I have used Ganeshji Marwaha's jCarousel Lite jQuery plugin.

First download jCarousel Lite plugin and upload it to workspace static files.

Place page HTML header:

<style type="text/css">
.clist{
 text-align:center;
 height:160px;
 padding:20px;
}
#carousel-container{
 border:1px solid #CCC;
 background-color:#FFF;
 float:left;
}
#carousel-container li{
 list-style-image:none;
}
#carousel-container img{
 width:128px;
 height:128px;
}
#carousel-prev,#carousel-next{
 display:block;
 float:left;
 text-decoration:none;
 height:160px;
 width:40px;
}
#carousel-prev{
 background: url("#IMAGE_PREFIX#arrowl.gif") no-repeat scroll left 60px transparent;
}
#carousel-next{
 background: url("#IMAGE_PREFIX#arrowr.gif") no-repeat scroll right 60px transparent;
}
</style>
<script type="text/javascript" src="#WORKSPACE_IMAGES#jcarousellite_1.0.1.min.js"></script>

and to page JavaScript Execute when Page Loads:

$("#carousel-container").jCarouselLite({
 circular:true,
 visible:4,
 scroll:4,
 speed:600,
 btnPrev:"#carousel-prev",
 btnNext:"#carousel-next"
});

Next create PL/SQL Dynamic Content region using PL/SQL Source:

DECLARE
BEGIN
  FOR c1 IN(
    SELECT product_id,
      product_name
    FROM demo_product_info
    WHERE NVL(dbms_lob.getlength(product_image),0) > 0
  )LOOP

    HTP.prn('<li>');            
    HTP.prn('<div class="clist">');
    HTP.prn('<img src="f?p=&APP_ID.:&APP_PAGE_ID.:&APP_SESSION.:APPLICATION_PROCESS=GET_IMG:NO::Px_PRODUCT_ID:' || c1.product_id || '" alt="" />');
    HTP.prn('<p>' || c1.product_name || '</p>');
    HTP.prn('</div>');
    HTP.prn('</li>');

  END LOOP;
END;

Go edit region you just created. Add to Region Header:

<div id="carousel">
 <a id="carousel-prev" href="#">&nbsp;</a>
 <div id="carousel-container">
  <ul>

and to Region Footer:

</ul>
 </div>
 <a id="carousel-next" href="#">&nbsp;</a>
</div>

Create hidden item Px_PRODUCT_ID to region. Use wizard defaults.

Create On Demand process GET_IMG:

DECLARE
  l_lob      BLOB;
  l_length   NUMBER;
  l_mimetype VARCHAR2(2000);
  l_filename VARCHAR2(2000);
BEGIN
--
  SELECT product_image,
    mimetype,
    filename
  INTO l_lob,
    l_mimetype,
    l_filename
  FROM demo_product_info
  WHERE product_id = :Px_PRODUCT_ID
  ;
  --
  l_length := DBMS_LOB.getlength(l_lob);
  --
  htp.flush;
  htp.init;
  --
  owa_util.mime_header(nvl(l_mimetype,'application/octet'), FALSE);

  htp.p('Content-length:' || l_length);
  htp.p('Content-Disposition:inline;filename="' || l_filename || '"');
  --
  -- close the headers
  owa_util.http_header_close;
  --
  -- download the BLOB
  wpg_docload.download_file(l_lob);
--
END;

See working example.