I'm venturing and trying to create a gallery of images, and for that I've taken a gallery already created, and I'm trying to adapt it to work with PHP LOOP.
I have 08 images (Numbers 1 to 8) already registered in the DB, I created PHP to loop in these images, limiting the amount to 6 images per lopp, so they fit in the style, ie each loop only brings 06 images at a time.
To bring the two remaining images, I click to go forward, but what happens is that it brings me a new relationship however without the remaining images.
And I noticed that when I take this DIV below:
<div class="photos-slide" style="position: absolute; top: 0px; left: 932px; z-index: 0; display: none;">
<span class="filler"></span>
</div>
This is below the LOOP, it disappears, but if we gave an INSPECTION we will see that it is, however, not visible.
I'm posting the usad code, and address to verify what's happening below:
<?php
include "conexao.php";
$fundo_show_room_cor = $_POST['fundo_show_room_cor'];
$query = mysql_query("SELECT * FROM showroom");
$res = mysql_fetch_array($query);
?>
<style>
/* SHOW-ROOM */
#show_room,
#show_room .centered-wrapper{height:768px;}
#show_room{ background-color:<?php echo $res['fundo_show_room_cor']; ?>;}
/* #single-gallery{margin:42px 0 0 -2px;} */
#photos-container,
#photos-container .slides_container,
#photos-container .photos-slide{width:932px;height:466px;float:left;}
#photos-container .photos-slide a,
#photos-container .photos-slide a img,
#photos-container .photos-slide .filler{width:232px;height:232px;float:left;}
#photos-container .photos-slide a,
#photos-container .photos-slide .filler{margin:1px 1px 0 0;}
#photos-container{position:relative;}
#photos-container .prev{
width:232px;
height:232px;
position:absolute;
display:block;
border:none;
background:url(../img/btn_prev2_bco.png) no-repeat 0 0;
opacity:0.6;
-moz-opacity:0.6;
-webkit-opacity:0.6;
filter:alpha(opacity=60);
overflow:hidden;
font-size:0;
text-indent:-99999px;
z-index:99;
}
#photos-container .next{
width:232px;
height:232px;
position:absolute;
display:block;
border:none;
background:url(../img/btn_next2_bco.png) no-repeat 0 0;
opacity:0.6;
-moz-opacity:0.6;
-webkit-opacity:0.6;
filter:alpha(opacity=100);
overflow:hidden;
font-size:0;
text-indent:-99999px;
z-index:99;
}
#photos-container .prev{left:0;top:1px;}
#photos-container .next{right:0;bottom:0;background-position:0 0;}
#photos-container .prev:hover,
#photos-container .next:hover{
opacity:1.0;
-moz-opacity:1.0;
-webkit-opacity:1.0;
filter:alpha(opacity=100);
}
</style>
<div id="show_room" class="sections full-width-wrapper bg_2"><!-- 01-->
<div class="centered-wrapper"><!-- 02-->
<div class="section-header">
<?php //include 'menu_pags.php';?>
</div>
<div style="margin-top:130px; float:left;">
<?php include'js/config_show_room.php'; ?>
</div>
<div id="single-gallery" class="full-width-wrapper"><!-- 03-->
<div id="photos-container" class="full-width-container"><!-- 04-->
<div class="slides_container" style="overflow: hidden; position: relative; display: block; margin:0 auto;"><!-- 05-->
<div class="photos-slide" style="position: absolute; top: 0px; left: 932px; z-index: 0; display: none;">
<span class="filler"></span>
<?php
$codigo = $_POST['codigo'];
$imagem = $_POST['imagem'];
$query = mysql_query("SELECT * FROM produtos ORDER BY codigo ASC LIMIT 6");
while($res = mysql_fetch_array($query)){
?>
<a class="fancybox" href="img_prod/<?php echo $res['imagem']; ?>?codigo=<?php echo $res['codigo']; ?>" data-fancybox-group="gallery" title="">
<img width="232" height="232" src="img_prod/<?php echo $res['imagem']; ?>" alt="" />
</a>
<?php
}
?>
</div>
<div class="photos-slide" style="position: absolute; top: 0px; left: 932px; z-index: 0; display: none;">
<span class="filler"></span>
</div>
</div><!-- 05-->
</div><!-- 04-->
</div><!-- 03-->
</div><!-- 02-->
</div><!-- 01-->
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
I am available for more information if necessary.
If friends can help me solve this problem, I'll be grateful.