Show images from table / Carousel / Call Ajax / jQuery

Este ejemplo es muy util cuando tu necesitas trabajar con imagenes que se refresquen en cada momento.
Con este material puedes aplicar diferentes cambios de CSS para agrandar imagenes, poner etiquetas, cambiar el estilo de carrusel.

Este ejemplo esta basado en este original post, pero aqui he cambiado la forma para hacerlo mas dinamico y adicionalmente agrege una funcionalidad para que se pueda hacer el efecto de zoom en la imagen.

Puedes ver la demo aqui, user : demo / pass: demo

Estoy utilizando:

Css
JQUERY / jcarousellite de su fuente original o puedes descargar directamente desde aqui here.
Ajax CallBack
JavaScript

Primero necesitamos descargar el plugin y subirlo en los archivos estaticos, necesitamos el que dice jcarouselLite.min.js , puedes descargar las flechas desde aqui tambien.

Crear un ItemGlobal de nombre: G_ID_FILE , cuidado con la sesion state

Crear un application processes de nombre : GET_IMG , pon este codigo, en el select cambialo por tu tabla de donde sacaras la imagen.

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  NVL(dbms_lob.getlength(PRODUCT_IMAGE),0) > 0  and PRODUCT_ID =  :G_ID_FILE;  
   
  --
  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;

Ir a la pagina y en JavaScrip url, referencia al archivo estatico subido.

Colocar esto en Function and global variable declaration:

$(\'body\').append(\'x
\');
var productOverlay = $(\'.product-image-overlay\');
var productOverlayImage = $(\'.product-image-overlay img\');

function displayImagen (dir) {
    
    productOverlayImage.attr(\'src\', dir);
    productOverlay.fadeIn(100);
    $(\'body\').css(\'overflow\', \'hidden\');

    $(\'.product-image-overlay-close\').click(function () {
        productOverlay.fadeOut(100);
        $(\'body\').css(\'overflow\', \'auto\');
    });
};

En css inline

.carru{
    width: 85% !important;
} 
.clist{
 text-align:center;
 height:150px;
 width:140px;
 padding:2px;
 border: 0.3px solid #131313;
 margin: 5px;
}
#carousel-container{
 border:2px solid #CCC;
 background-color:#FFF;
 width:600px;
 float:left;  
}
#carousel-container li{
 list-style-image:none;
}
#carousel-container img{
 width:70px;
 height:80px;
} 
#carousel-prev,#carousel-next{
 display:block;
 float:left;
 text-decoration:none;
 height:160px;
 width:40px;
}
#carousel-prev{
 background: url(\"#APP_IMAGES#arrowl.gif\") no-repeat scroll left 60px transparent;
}
#carousel-next{
 background: url(\"#APP_IMAGES#arrowr.gif\") no-repeat scroll right 60px transparent;
} 



.product-image-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    background: rgba(251, 255, 255, 0.71);
    z-index: 9999;
    display: none;
}

.product-image-overlay .product-image-overlay-close {
    display: block;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #fba3a3;
    line-height: 35px;
    font-size: 20px;
    color: #fbfbfb;
    text-align: center;
    cursor: pointer;
    background-color: #fd0000;
}


.product-image-overlay img {
    width: auto;
    max-width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Crear un region estandar con ID, header y footer como la imagen.

Crear un boton que llame una accion dinamica y luego un javaScriptCode, aqui esta la diferencia del origal post donde ellos usan un PlSql dynamic content. Pero aqui usare ajax para llamar al proceso que creare las veces que necesite.

apex.server.process(
    \"Refresh_image\",
    {}, {
       dataType: \'text\',
        success: function(data) {
           $(\'#carousel-container\').html(data);
            console.log(\"dialog close\");
            // alert(\"test\")
        }
    }
);

Note: \”Refresh_image\” es el nombre del proceso ajaxCallBack
#carousel-container es el id, de tu region que creamos un paso anterior
Console y alert, son solo de forma de prueba.

Crear un proceso ajax y colocar este codigo.

DECLARE
  l_html varchar2(1000);
  l_img_src varchar2(1000);
BEGIN

  HTP.prn(\' \'); 
  FOR c1 IN( 
      SELECT PRODUCT_ID,
             filename
        FROM DEMO_PRODUCT_INFO
       WHERE NVL(dbms_lob.getlength(PRODUCT_IMAGE),0) > 0   order by filename asc
      
  )LOOP
 
 l_img_src := apex_util.prepare_url(\'f?p=\' || :APP_ID || \':\' || :APP_PAGE_ID || \':\' || :APP_SESSION || \':APPLICATION_PROCESS=GET_IMG:NO::G_ID_FILE:\' || c1.PRODUCT_ID);

 l_html := \'<img  src="' || l_img_src || \'\">\';     
    HTP.prn(\' \');            
    HTP.prn(\'<div  class="clist" onclick="displayImagen('''||l_img_src||\'\'\')\" >\' ); 
    htp.prn(l_html); 
    HTP.prn(\'\' || c1.filename || \'
\'); 
    HTP.prn(\'\'); 
    HTP.prn(\'
\');  
  END LOOP;
    HTP.prn(\' 
\');  
       
        htp.p(\'\');
            htp.p(\'$(\"#carousel-container\").jCarouselLite({
            circular:false,
            visible:4,
            scroll:4,
            speed:300,
            btnPrev:\"#carousel-prev\",
            btnNext:\"#carousel-next\"
            });\');
        htp.p(\'\');  
   
END;