Anything Slider jQuery Plugin into APEX

Jika anda ingin mengimplementasikan Anything Slider jQuery Plugin seperti contoh berikut lakukan langkah-langkah berikut :

1. Download plugin di sini.
2. Extract hasil download.
3. Pindahkan folder (css, images, js)ke dalam image server apex
• Untuk OHS copy paste kedalam /i/myapp/anythingslider/
• Untuk EPG memalai filezilla atau fireFTP pindah ke /i/myapp/anythingslider/

Implementasi dapat dilakukan dengan dua cara yaitu :

• Static Image
1. Pada page header

<link rel="stylesheet" href="/i/myapp/AnythingSlider/css/anythingslider.css">
<script src="/i/myapp/AnythingSlider/js/jquery.anythingslider.js" type="text/javascript"></script>
    <style>
        #slider { width: 200px; height: 200px; }
        #slider2 { width: 700px; height: 390px; }
    </style>

    <!-- AnythingSlider initialization -->
    <script>
        // DOM Ready
        $(function(){
            $('#slider').anythingSlider();
        });
        $(function(){
            $('#slider2').anythingSlider();
  });
 </script>

2. Buatlah sebuah HTML region dengan source

<ul id="slider">

<li><img src="/i/apex/graphics/apex_consolidation.png" alt=""></li>

<li><img src="/i/apex/graphics/apex-architecture.png" alt=""></li>

<li><img src="/i/apex/graphics/apex-bip.png" alt=""></li>

<li><img src="/i/apex/graphics/apex-multitenant.png" alt=""></li>

</ul>

• Dynamic image dari tabel (contoh kasus demo_product_info)
1. Buatlah hidden item : PX_PRODUCT_ID (jangan lupa ganti x dengan page dimana anda buat)
2. Buatlah sebuah application process on demand:getting_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;

3. Buatlah sebuah region : PL/SQL anonymous block

DECLARE
BEGIN
    HTP.prn('<ul id="slider">'); 
 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=getting_img:NO::PX_PRODUCT_ID:' || c1.product_id || '" alt="" />');
    HTP.prn('<p>' || c1.product_name || '</p>');
    HTP.prn('</div>');
    HTP.prn('</li>');
 
  END LOOP;
    HTP.prn('</ul>');
END;

Maka akan kita lihat hasil penampakan seperti berikut:

• Static image

• Dynamic image