Loop is not listing images as expected

-1

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.

    
asked by anonymous 05.07.2016 / 15:54

2 answers

1

Murilo,

The quickest implementation for what you want to do would be to load all the images from the database into an array, as you may notice you have two divs with the "photos-slide" class inside the "slides_container" div. >

So you should list from the first to the sixth element of the array as you are already doing in the first div with "photos-slide" class and the next 6 in the next div with the same class.

For this to be done dynamically I propose the following exemplary code:

<div class="slides_container" style="overflow: hidden; position: relative; display: block; margin:0 auto;"><!-- 05-->

    <?php
            $codigo = $_POST['codigo'];
            $imagem = $_POST['imagem'];                        

            $query = mysql_query("SELECT * FROM produtos ORDER BY codigo ASC LIMIT 6");
            $contador_imagens = 0;

            while($res = mysql_fetch_array($query))
            {
                //Nos índice de imagem divisíveis por 6, tais como 0, 6, 12, 18:
                if($contador_imagens % 6 == 0):
                ?>
                    <div class="photos-slide" style="position: absolute; top: 0px; left: 932px; z-index: 0; display: none;">
                        <span class="filler"></span>
                <?php
                endif;

                //As linhas abaixo <a> até </a> serão executadas em todos os loops.
                ?>
                        <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

                //Incrementa o contador de imagens antes do fim do while para que as tags não sejam fechadas imediatamente após abertas
                $contador_imagens++;

                //Fecha as tags abertas nos índices divisíveis por 6 após passadas 6 iterações da abertura da tag:
                if($contador_imagens % 6 == 0):
                ?>
                    </div>
                <?php
                endif;
            }
    ?>
</div><!-- 05-->
    
05.07.2016 / 19:36
0

I'm posting the code below, working the way you want it to.

Thanks to the friend @Bruno Bermann who with his tip helped that the result was the positive.

<?php
include "conexao.php";

$fundo_show_room_img = $_POST['fundo_show_room_img'];
$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:url(../upload/<?php echo $res['fundo_show_room_img']; ?>) no-repeat center top #201537;}
#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">
        <div class="centered-wrapper">
        <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">
        <div id="photos-container" class="full-width-container">
            <div class="slides_container" style="overflow: hidden; position: relative; display: block; margin:0 auto;"><!-- 05-->

            <?php
            $codigo = $_POST['codigo'];
            $imagem = $_POST['imagem'];                        
            $query = mysql_query("SELECT * FROM img_show_room ORDER BY codigo ASC");
            $contador_imagens = 0;
            while($res = mysql_fetch_array($query)){
            //Nos índice de imagem divisíveis por 6, tais como 0, 6, 12, 18:
            if($contador_imagens % 6 == 0):
            ?>
                    <div class="photos-slide" style="position: absolute; top: 0px; left: 932px; z-index: 0; display: none;">
                        <span class="filler"></span>
            <?php
            endif;
            //As linhas abaixo <a> até </a> serão executadas em todos os loops.
            ?>
                        <a class="fancybox" href="img_show_room/<?php echo $res['imagem']; ?>?codigo=<?php echo $res['codigo']; ?>" data-fancybox-group="gallery" title="">
                            <img width="232" height="232" src="img_show_room/<?php echo $res['imagem']; ?>" alt="" />
                        </a>
            <?php
            //Incrementa o contador de imagens antes do fim do while para que as tags não sejam fechadas imediatamente após abertas
            $contador_imagens++;
            //Fecha as tags abertas nos índices divisíveis por 6 após passadas 6 iterações da abertura da tag:
            if($contador_imagens % 6 == 0):
            ?>
                    </div>
            <?php
            endif; }
            ?>
            <?php
            $codigo = $_POST['codigo'];
            $imagem = $_POST['imagem'];                         
            $query = mysql_query("SELECT * FROM img_show_room ORDER BY codigo ASC");
            $contador_imagens = 0;  
            while($res = mysql_fetch_array($query)){
            //Nos índice de imagem divisíveis por 6, tais como 0, 6, 12, 18:
            if($contador_imagens % 6 == 0):
            ?>
                    <div class="photos-slide" style="position: absolute; top: 0px; left: 932px; z-index: 0; display: none;">
                        <span class="filler"></span>
            <?php
            endif;
            //As linhas abaixo <a> até </a> serão executadas em todos os loops.
            ?>
                        <a class="fancybox" href="img_show_room/<?php echo $res['imagem']; ?>?codigo=<?php echo $res['codigo']; ?>" data-fancybox-group="gallery" title="">
                            <img width="232" height="232" src="img_show_room/<?php echo $res['imagem']; ?>" alt="" />
                        </a>
                <?php

                //Incrementa o contador de imagens antes do fim do while para que as tags não sejam fechadas imediatamente após abertas
                $contador_imagens++;

                //Fecha as tags abertas nos índices divisíveis por 6 após passadas 6 iterações da abertura da tag:
                if($contador_imagens % 6 == 0):
                ?>
                    </div>
                <?php
                endif;}            
                ?>
    </div><!-- 05-->
</div>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
</div></div>

I hope you can help other users with the same problem.

    
06.07.2016 / 01:15