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.

Comment Button

Comments

  • Nicholas 15 Jun 2018  

    Hi Jari,

    Thanks really for all your efforts and time to give solution to me.

    I changed the modal dialog into 'Non-Modal Dialog', it work correctly.

    Yes... I will investigate your source more and try to change it another way.

    Really appreciate your help again.

    Have a lovely weekend !!!

        
  • Jari Laine 15 Jun 2018  

    Hi Nicholas,

    I didn't quickly understand why modal page gives that error. When I did find solution to get rid of error, there as problem that img src attribute was wrapped to apex.navigation.dialog.close function. I don't know is this some APEX bug.

    But, I managed get it working. Problem seems to be substitution string.
    I leave to you fix e.g. next and prev buttons position and height/width issues.

    Maybe you try convert original code to plugin and see does it work on modal page. Also plugin would be more simple and modern solution. Or try search if there is ready plugin for this.

    Regards,
    Jari

        
  • Nicholas 15 Jun 2018  

    Hi Jari

    * Application : Sample Database Application

    * Page : 7777 (Image show) / 8888 (parent page)

    I created new page (8888) as a parent page to call image page (7777).

    When I change page mode of 7777 as "Modal Dialog". it brings this error message like this :

    "Application 100280 Dialog page 7777 cannot be rendered successfully. Ensure the page template in use on page 7777 is of template type "Dialog page", with appropriate JavaScript dialog initialization, dialog closure and dialog cancel code defined."

    When I revert into "Normal", it shows correctly

    Really sorry but I have no idea how to fix this

        
  • Jari Laine 15 Jun 2018  

    Hi Nicholas,

    Please replicate problem on apex.oracle.com.
    Regards,
    Jari

        
  • Nicholas 15 Jun 2018  

    woops....when I create this onto Modal Dialog, it returns unexpcted error....

    When I convert this normal page, it works well

    Sorry to bother you but could you give me last advice?

        
  • Nicholas 15 Jun 2018  

    Really appreciated !!!

    Nice and looks good. Perfect

        
  • Jari Laine 15 Jun 2018  

    Hi Nicholas,

    You didn't have on demand process (ajax callback) to show images.
    I did also few more corrections.

    It seems that jCarousel plugin is not working with latest jQuery. You need set Include jQuery Migrate to "Yes" on application User Interface Details.

    Regards,
    Jari

        
  • Nicholas 15 Jun 2018  

    Workspace : xxx
    ID : xxx
    Password : xxx

    Application : Sample Database Application (100280)
    Page : xxx

    It only shows 1 image in black canvas

        
  • Jari Laine 15 Jun 2018  

    Hi Nicholas,

    Could you please replicate problem on apex.oracle.com and share developer login details to workspace?
    Regards,
    Jari

        
  • Nicholas 15 Jun 2018  

    Hi Jari,

    I am creating jCarousel page in Oracle APEX 5.0 but have some difficulties.

    When I followed all your steps, it just show 1 image

    Could you help me out?

        

Global Right Column

Search

Archives

Subscribe in a Reader