Hello, I have this code below:
<div class="center_content" style="background:<?php echo $res['fundosite_cor']; ?>; width:588px; float:left;">
<?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>
<script>
jssor_slider2_starter = function (containerId) {
var options = {
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not
$Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$ActionMode: 1, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
$AutoCenter: 0, //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
$Lanes: 1, //[Optional] Specify lanes to arrange items, default value is 1
$SpacingX: 0, //[Optional] Horizontal space between each item in pixel, default value is 0
$SpacingY: 0, //[Optional] Vertical space between each item in pixel, default value is 0
$Orientation: 1 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
}
};
var jssor_slider2 = new $JssorSlider$(containerId, options);
};
</script>
<!-- Jssor Slider Begin -->
<!-- To move inline styles to css file/block, please specify a class name for each element. -->
<div id="slider2_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 -->
<script>
jssor_slider2_starter('slider2_container');
</script>
</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>
The purpose is to access the page you would like 9 random products to appear. For this I thought that only giving a WHILE in the php code would work, but pure mistake, because I can only loop the files that are in the products table, but I can not make the script work.
I am attaching the addresses below so that friends can give a review and tell me what is missing or how can I make it work.
Problem page - link
Running the script without the PHP WHILE - link
I hope I have been able to express myself so that friends can understand my need.
Hugs to all and awaiting positive responses if possible.