1
Hello, I have this code below:
<div class="" style="background:<?php echo $res['fundosite_cor']; ?>; width:588px; float:left;">
<script>
jssor_slider20_starter = function (containerId) {
var options = {
$DragOrientation: 3,
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$ChanceToShow: 2,
$ActionMode: 1,
$AutoCenter: 0,
$Steps: 1,
$Lanes: 1,
$SpacingX: 0,
$SpacingY: 0,
$Orientation: 1
}
};
var jssor_slider20 = new $JssorSlider$(containerId, options);
};
</script>
<?php
include "conexao.php";
$codigo = $_POST['codigo'];
$img01 = $_POST['img01'];
$img02 = $_POST['img02'];
$img03 = $_POST['img03'];
$img04 = $_POST['img04'];
$titulo = $_POST['titulo'];
$preco = $_POST['preco'];
$query = mysql_query("SELECT * FROM produto ORDER BY RAND() LIMIT 9");
while($res = mysql_fetch_array($query)){
?>
<div style="background-color:<?php echo $res['fundosite_cor']; ?>;; padding:11px;" class="center_prod_box">
<div id="titulo" class="product_title">
<?php echo $res['titulo']; ?>
</div>
<!-- Jssor Slider Begin -->
<!-- To move inline styles to css file/block, please specify a class name for each element. -->
<div id="slider20_container" style="position: relative; top: 0px; left: 0px; width: 173px;
height: 173px; background-color:<?php echo $res['fundosite_cor']; ?>;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
<div style="position: absolute; display: block; background: url(img/loading.gif) no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<!-- Slides Container -->
<div u="slides" style="background-color:<?php echo $res['fundosite_cor']; ?>;cursor: move; position: absolute; left: 0px; top: 2px; height:150px; width:173px; text-align:center;
overflow: hidden;">
<div>
<a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
<img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img01']; ?>" />
</a>
</div>
<div>
<a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
<img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img02']; ?>" />
</a>
</div>
<div>
<a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
<img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img03']; ?>" />
</a>
</div>
<div>
<a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
<img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img04']; ?>" />
</a>
</div>
</div>
<!--#region Bullet Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
<style>
/* jssor slider bullet navigator skin 03 css */
/*
.jssorb03 div (normal)
.jssorb03 div:hover (normal mouseover)
.jssorb03 .av (active)
.jssorb03 .av:hover (active mouseover)
.jssorb03 .dn (mousedown)
*/
.jssorb03 {
position: absolute;
}
.jssorb03 div, .jssorb03 div:hover, .jssorb03 .av {
position: absolute;
/* size of bullet elment */
width: 21px;
height: 21px;
text-align: center;
line-height: 21px;
color: white;
font-size: 12px;
background: url(img/b03.png) no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb03 div { background-position: -5px -4px; }
.jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; }
.jssorb03 .av { background-position: -65px -4px; }
.jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; }
</style>
<!-- bullet navigator container -->
<div u="navigator" class="jssorb03" style="bottom: 1px; left: 40px;">
<!-- bullet navigator item prototype -->
<div u="prototype"><div u="numbertemplate"></div></div>
</div>
<!--#endregion Bullet Navigator Skin End -->
<!-- Trigger -->
</div>
<!-- Jssor Slider End -->
<div id="preco" class="prod_price">
<span style="">
R$ <?php echo $res['preco']; ?>
</span>
</div>
<div id="carrinho" class=""><br />
<a href="prod_carrinho.php?acao=add&codigo=<?php echo $res['codigo']; ?>">
<img style="position:relative;top:50%;transform:translateY(-50%); "width="20" src="img/carrinho.png" title="Por no Carrinho" />
</a>
</div>
<hr id="linha1" />
<hr id="linha2" />
</div>
<?php
}
?>
</div>
<script>
jssor_slider20_starter('slider20_container');
</script>
</div>
The purpose is to access the page would appear 9 random products (At the moment I have only 02 products listed). For this I thought that only giving a WHILE in php code would work, but pure mistake, because I can only loop the files that are in the products table, but I can’t make the script work in the second product listed.
I’m not able to repeat the script (LOOP). I’ve researched some poster even on W3schools, but I couldn’t apply logic to my script, perhaps because I’m too Javascript layman.
I am attaching below the access address so that friends can give a analyzed and tell me what is missing or how I can make it work.
Page with the Problem - http://lccinformatica.com.br/prod_index.php
I hope I’ve managed to express myself so that friends can understand my need.
Hugs to all and waiting if possible for positive responses.
OK Henrique, really I had not sent via FTP the Jquery "jquery-1.12.1.min. js", but I just sent. Come on, when I enter the page prod_index.php, it sends the first product correctly, ie working. However, in the following product, it seems to me that it does not apply the Javascript function, which causes me to pass the images via listed buttons and not creating the carousel of the images as in the first one. But the while php loop is working because it is bringing the BD data for each product listed. It seems to me he’s not following through on the script.
– Murilo Cabral
Actually I’m not knowing is to create or assemble the loop, be it in PHP or Javascript... HEEELLLPPPP... I need help... HEEELLLPPP... Rsrsrs...
– Murilo Cabral