Boa tarde gente,
estou tentando fazer uma "galeria’ com java e javaScript em uma pagina .xhtml e peguei o exemplo do site
https://bxslider.com/examples/image-slideshow-captions/ estou usando esse código pronto bxslider para exibir a galeria. No link tem um exemplo “galeria” que exibe as imagens apartir de uma pasta fixa do projeto.
Gostaria que pudessem me ensinar ou orientar como eu faço para eu exibi essa mesma galeria só que retornando dados de uma lista de imagens java diretamente do banco.
A parte de gerar a lista java do banco eu tenho pronta agora oque não sei e como faço para a pagina javascript reconhecer e usar essa lista java. no exemplo como disse usa imagens de uma pasta e não do banco.
Vou postar em anexo a imagen da galeria que eu fiz e o codigo funcionando em uma pagina .xhtml só que sem retonar imagens do banco, Obs:
onde tem
<div><img src="img/img1.jpg" title="Funky roots"/></div>
<div><img src="img/img2.jpg" title="The long and winding road"/></div>
<div><img src="img/img3.jpg" title="Happy trees"/></div>
é que as imagens esta fixa e preciso retornar da lista java e eu não sei como fazer.
única maneira que vi na net que talvez poderia ser feito é usando json. mas não achei nenhum exemplo na internet de como fazer isso usando json ou não.
Imagen abaixo do exemplo da “galeria” como é exibida
Código da pagina galeriabxslider.xhtml sem retornar lista do banco
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
responsive:true,
slideWidth: 600
});
});
</script>
</head>
<body>
<div class="bxslider">
<div><img src="img/img1.jpg" title="Funky roots"/></div>
<div><img src="img/img2.jpg" title="The long and winding road"/></div>
<div><img src="img/img3.jpg" title="Happy trees"/></div>
</div>
</body>
</html>
//Meu bean onde esta a lita java
public class ProdutosVendaControleBean implements Serializable {
public void todosProdutos() {
produtosVendaControle = new ProdutosVendaControle();
listaProdutos = produtosVendaControle.todos();
}
}
a baixo o carregamento da minha lista
public List todos() {
Produto prod = null;
List<Produto> listProduto = new ArrayList<Produto>();
try{
String qry = "SELECT idproduto, sreferencia, idprodutogrupo, idprodutotipo, sproduto, simg, vpreco, vpeso, vcusto, voutros, sdescricao " +
"FROM produto WHERE (fativo = true) and (qtestoque > 0) and (qtestoque >= qtestoqueminimo)" ;
xConn = new XConnection();
rs = xConn.seleciona(qry);
while (rs.next()){
prod = new Produto();
prod.setIdproduto(rs.getInt("idproduto"));
prod.setIdprodutogrupo(rs.getInt("idprodutogrupo"));
prod.setIdprodutotipo(rs.getInt("idprodutotipo"));
prod.setSreferencia(rs.getString("sreferencia"));
prod.setSproduto(rs.getString("sproduto"));
prod.setSimg(rs.getString("simg"));
prod.setSdescricao(rs.getString("sdescricao"));
prod.setVpreco(rs.getBigDecimal("vpreco"));
prod.setVpeso(rs.getBigDecimal("vpeso"));
listProduto.add(prod);
prod = null;
}
}
catch(SQLException e) {
FuncGenerica.mensInfo("erroSQLException lista ProdutosControle: " + e.toString());
xConn.fechaConexao();
}catch(Exception e) {
FuncGenerica.mensInfo("erroException lista ProdutosControle: " + e.toString());
xConn.fechaConexao();
}
xConn.fechaConexao();
System.out.println("chegou listProduto");
return listProduto;
}