Criação BANNER Randomico utilizando Owl Carousel js
Citação de Guilherme em 22 de junho de 2018, 16:41Segue codigo exemplo para criação de banner automatico trazendo imagens da pasta do observador.
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="js/bootstrap-3.2.0/css/bootstrap.min.css" /><!-- Font Awesome -->
<link rel="stylesheet" type="text/css" href="js/font-awesome/css/font-awesome.min.css" /><!-- Bootstrap Date Picker -->
<link href="js/adminlte-2.3.1/plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" /><!-- Owl Carousel-->
<link rel="stylesheet" href="js/owlcarousel-2.2.1/css/owl.carousel.min.css">
<link rel="stylesheet" href="js/owlcarousel-2.2.1/css/owl.theme.default.min.css"><!-- Custom -->
<link rel="stylesheet" type="text/css" href="odwctrl?action=execTarefa&apelido=CLIENTE-painel-grafico-geral-css" />
</head>
<body><div id="owl-demo" class="owl-carousel owl-theme">
$> for (a = 1; a <= $c{file:count}; a++) {
<div class="item"><img src="~~~" alt="Owl Image"></div> -> $c{file[a]};
$> }</div>
<style type="text/css">
table tr td {
font-family: arial;
font-size: 8pt;
}
.internal_table tr td {
padding: 7px 0;
}
#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}</style>
</body>
</html>
<!-- JQuery -->
<script language="javascript" type="text/javascript" charset="UTF-8" src="js/jquery-2.1.0.min.js"></script><!-- Bootstrap -->
<script language="javascript" type="text/javascript" charset="UTF-8" src="js/bootstrap-3.2.0/js/bootstrap.min.js"></script><!-- Bootstrap Date Picker 1.9.1-->
<script language="javascript" type="text/javascript" charset="UTF-8" src="js/adminlte-2.3.1/plugins/datepicker/bootstrap-datepicker.js"></script>
<script language="javascript" type="text/javascript" charset="UTF-8" src="js/adminlte-2.3.1/plugins/datepicker/locales/bootstrap-datepicker.pt-BR.js"></script><!-- Owl Carousel -->
<script language="javascript" type="text/javascript" charset="UTF-8" src="js/owlcarousel-2.2.1/js/owl.carousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function random(owlSelector){
owlSelector.children().sort(function(){
return Math.round(Math.random()) - 0.5;
}).each(function(){
$(this).appendTo(owlSelector);
});
}var $owl = $( "#owl-demo" );
$owl.on('initialize.owl.carousel', function(event){
var selector = $("#owl-demo");
random(selector);
});$("#owl-demo").owlCarousel({
items : 1,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3],
autoplay:true,
autoplayTimeout:5000,
autoplayHoverPause:false,
loop:true
});
});</script>
<script_java_groovy name="script1">
import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;
import java.sql.Types;
import com.elisha.commons.util.datalist.DataList;
import com.elisha.commons.util.datalist.DataListRow;
import bdo.util.DataListUtil;DataList dataListArquivos = DataListUtil.createDataList([ 'file', 'isImage', 'height', 'width' ] as String[]
,[ Types.VARCHAR, Types.INTEGER, Types.INTEGER, Types.INTEGER ] as int[]);
execScript.addDataList(dataListArquivos);String dir = 'images/banners/filial_' + execScript.getValueCol('filial').toString();
dir = 'images/banners/filial_1';String dirBase = execScript.getValueVar('dirApp') + '/' + dir;
new File(dirBase).listFiles().eachWithIndex { file, index ->
if (file.isFile() && !file.isHidden()) {
String fileName = dir + '/' + file.getName();
int width = 0;
int height = 0;
int isImage = ",.jpg,.png,".contains(',' + fileName.toLowerCase().substring(fileName.lastIndexOf('.')) + ',') ? 1 : 0;
if(isImage == 1){
execScript.debug(fileName);
BufferedImage bImg = ImageIO.read(file);
width = bImg.getWidth();
height = bImg.getHeight();
dataListArquivos.addRow(new DataListRow([ fileName, isImage, height, width ] as Object[]));
}
}
}
</script_java_groovy>
Segue codigo exemplo para criação de banner automatico trazendo imagens da pasta do observador.
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="js/bootstrap-3.2.0/css/bootstrap.min.css" />
<!-- Font Awesome -->
<link rel="stylesheet" type="text/css" href="js/font-awesome/css/font-awesome.min.css" />
<!-- Bootstrap Date Picker -->
<link href="js/adminlte-2.3.1/plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
<!-- Owl Carousel-->
<link rel="stylesheet" href="js/owlcarousel-2.2.1/css/owl.carousel.min.css">
<link rel="stylesheet" href="js/owlcarousel-2.2.1/css/owl.theme.default.min.css">
<!-- Custom -->
<link rel="stylesheet" type="text/css" href="odwctrl?action=execTarefa&apelido=CLIENTE-painel-grafico-geral-css" />
</head>
<body>
<div id="owl-demo" class="owl-carousel owl-theme">
$> for (a = 1; a <= $c{file:count}; a++) {
<div class="item"><img src="~~~" alt="Owl Image"></div> -> $c{file[a]};
$> }
</div>
<style type="text/css">
table tr td {
font-family: arial;
font-size: 8pt;
}
.internal_table tr td {
padding: 7px 0;
}
#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</style>
</body>
</html>
<!-- JQuery -->
<script language="javascript" type="text/javascript" charset="UTF-8" src="js/jquery-2.1.0.min.js"></script>
<!-- Bootstrap -->
<script language="javascript" type="text/javascript" charset="UTF-8" src="js/bootstrap-3.2.0/js/bootstrap.min.js"></script>
<!-- Bootstrap Date Picker 1.9.1-->
<script language="javascript" type="text/javascript" charset="UTF-8" src="js/adminlte-2.3.1/plugins/datepicker/bootstrap-datepicker.js"></script>
<script language="javascript" type="text/javascript" charset="UTF-8" src="js/adminlte-2.3.1/plugins/datepicker/locales/bootstrap-datepicker.pt-BR.js"></script>
<!-- Owl Carousel -->
<script language="javascript" type="text/javascript" charset="UTF-8" src="js/owlcarousel-2.2.1/js/owl.carousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function random(owlSelector){
owlSelector.children().sort(function(){
return Math.round(Math.random()) - 0.5;
}).each(function(){
$(this).appendTo(owlSelector);
});
}
var $owl = $( "#owl-demo" );
$owl.on('initialize.owl.carousel', function(event){
var selector = $("#owl-demo");
random(selector);
});
$("#owl-demo").owlCarousel({
items : 1,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3],
autoplay:true,
autoplayTimeout:5000,
autoplayHoverPause:false,
loop:true
});
});
</script>
<script_java_groovy name="script1">
import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;
import java.sql.Types;
import com.elisha.commons.util.datalist.DataList;
import com.elisha.commons.util.datalist.DataListRow;
import bdo.util.DataListUtil;
DataList dataListArquivos = DataListUtil.createDataList([ 'file', 'isImage', 'height', 'width' ] as String[]
,[ Types.VARCHAR, Types.INTEGER, Types.INTEGER, Types.INTEGER ] as int[]);
execScript.addDataList(dataListArquivos);
String dir = 'images/banners/filial_' + execScript.getValueCol('filial').toString();
dir = 'images/banners/filial_1';
String dirBase = execScript.getValueVar('dirApp') + '/' + dir;
new File(dirBase).listFiles().eachWithIndex { file, index ->
if (file.isFile() && !file.isHidden()) {
String fileName = dir + '/' + file.getName();
int width = 0;
int height = 0;
int isImage = ",.jpg,.png,".contains(',' + fileName.toLowerCase().substring(fileName.lastIndexOf('.')) + ',') ? 1 : 0;
if(isImage == 1){
execScript.debug(fileName);
BufferedImage bImg = ImageIO.read(file);
width = bImg.getWidth();
height = bImg.getHeight();
dataListArquivos.addRow(new DataListRow([ fileName, isImage, height, width ] as Object[]));
}
}
}
</script_java_groovy>
