-1
I’m adventuring and trying to create an image gallery, and for that I took a gallery already created, and I’m trying to adapt it to work with PHP LOOP.
I have 08 images (Numbers from 1 to 8) already registered in BD, I created PHP to loop these images, limiting the amount to 6 images per Lopp, for them fits the style, ie each loop brings only 06 images at a time.
To bring the two remaining images, I click to move forward, but what happens is that it brings me a new relationship but without the remaining images.
And I noticed that when I pull that div down:
<div class="photos-slide" style="position: absolute; top: 0px; left: 932px; z-index: 0; display: none;">
<span class="filler"></span>
</div>
that this below the LOOP, it disappears, but if we gave an INSPECT we will see that it is, but not visible.
I am posting the code used, and address to verify what is 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 further information if necessary.
If friends can help me solve this problem, I’d be grateful.
Murilo, you are limiting the searched images from the database to a total of 6. You have two options: 1) Fetch all the images and store them in an array, going through 6 by 6. OR 2) Implement an asynchronous request to search for the remaining images in your database, in the case of page 2 with OFFSET 7 LIMIT 12 (The next 6 images in the case).
– Bruno Bermann
Bruno I tried not to limit the amount of images, however it occurred that... Go to this address to check what happens - (http://www.lccinformatica.com.br/) - even so it does not bring me all the images, is missing the last image, the number 8. It has to show me how it should be done, because I have no idea how to implement this request.
– Murilo Cabral
published an answer to your question, explaining how to do the implementation where you search all results in select and presents 6 in 6...
– Bruno Bermann