Single Article

Show images from table using jQuery plugin jCarousel Lite

Category APEX and jQuery

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.

Comments

  • Jari Laine · 22 Aug 2017  

    Hi Vasuki,

    In my example auto scroll isn't enabled.
    Have you done some modification to JavaScript?

    If you still have problem please create example to apex.oracle.com

    Regards,
    Jari

        
  • Vasuki · 22 Aug 2017  

    Hi Jari,

    Your post very useful. I followed your steps,Image sliding is coming.

    Currently auto sliding is enable,could you please help me how to set auto-sliding as false.

    Thank you,

    Vasuki S

        
  • Jari Laine · 5 Dec 2013  

    Hi Pars,

    Ok, that's good.

    For performance point of view, you should download and use compressed version (jcarousellite_1.0.1.min.js).

    Regards,
    Jari

        
  • Pars · 5 Dec 2013  

    solve problem only problem in name of plugin file

    i remove .min from file name in page header

    you show that yesterday, now its work greate

    Thanks,

    Pars.

        
  • Jari Laine · 5 Dec 2013  

    Hi Pars,

    Could you please reproduce problem in apex.oracle.com ?

    Regards,
    Jari

        
  • Pars · 4 Dec 2013  

    Hi Jari,

    Using this blog i'm created image gallary, at start

    the all images are shown verticaly no movement while pressing previous and next button.

    but after some days its working like as you shown also show previous next image horizontally.

    this problem occur also on apex.oracle.com as well local machine.

    why it takes some days to replicate all changes on screen.

        
  • Jari Laine · 20 Jul 2013  

    Hi neel,

    Sorry, but I have not tested that.

    Please test and post back how it went.

    Regards,
    Jari

        
  • neel · 19 Jul 2013  

    Pls discard my previous comment.. I had a silly mistake.

    Another question what if there is only one image for item group/person in db. How would corousel behave?

    Thanks

        
  • neel · 19 Jul 2013  

    Firstly thank you for posting the example and code.I have a little issue working with this example.

    The image is not loading up in carousel block.

        
  • Jari Laine · 19 Aug 2012  

    Hi Francisco,

    jQuery plugin is not loaded.properly in page HTML header.

    Check that you have loaded plugin to workspace files and file name is correct in page HTML header.

    Regards, Jari

     

        

Global Right Column

Search

Archives

Subscribe in a Reader