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:

  1. Css
  2. JQUERY / jcarousellite de su fuente original o puedes descargar directamente desde aqui here.
  3. Ajax CallBack
  4. 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.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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:

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(\'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

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
.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.

 1
2
3
4
5
6
7
8
9
10
11
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.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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;

Finalmente cuando des click en la imagen este tendra un efecto de zoom.

Demo aqui here, use user: demo / pass: demo

Published by Angel O. Flores Torres

System engineer, Applications engineer, working with C# and Oracle Apex 5, 5.1 since 2017. I specialize in Oracle APEX (Oracle Application Express )

2 thoughts on “Show images from table / Carousel / Call Ajax / jQuery

Leave a Reply to Angel Flores Torres Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: