Loop is not listing images as expected

Asked

Viewed 62 times

-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.

php javascript

  • 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 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.

  • published an answer to your question, explaining how to do the implementation where you search all results in select and presents 6 in 6...

2 answers

1


Muril,

The fastest 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 class "photos-slide" 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-->

  • Hello Bruno, thanks for the tip, which worked almost at 100%, this missing only stop when arriving at the last image. I inserted 30 images, but when it gets to the 30th, it goes back to the 1st, but comes back with an image over the NEXT button. See at the address (http://www.lccinformatica.com.br/). Not to be abused, but already being... Rsrsrsrs... You can tell me how to solve this problem. But from now on, thank you very much for the help.

  • Murilo, apparently the code I posted above is running correctly, but just below something is iterating the 30 results of your query again 12 in 12 images, so override the NEXT button. If you do not find the problem please open a new issue with the updated full code.

  • That’s right Bruno, I just discovered and changed, now this working beauty, thanks even for your help.

0

I am posting the code below, working as desired.

I thank my friend @Bruno Bermann who with his tip helped to make the result 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 I can help other users with the same problem.

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.