Paging in the photo gallery

Navigation
2

Good night everyone, I need help in the following code snippet and a gallery of photos and I need to do the pagination of 9 in 9 photos already tried everything and I could not if they can help me there 

<!DOCTYPE html>
<body>
<?php include("header.php");?>
    <div class="bg-image">
        <div class="overlay-bg">
            <div class="main-content">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div id="menu-container">
                                <div class="col-md-12" align="center">
                                    <div class="dropdown btn btn-danger">
                                        <a href="\index.php" style="color:#ffffff"><b>INÍCIO</b></a>
                                    </div>
                                    <div id="menu-1" class="homepage" style="margin-top:50px;">
                                        <div class="row">
                                            <?php for ($i=1; $i <= 2; $i++) { ?>
                                                <div class="col-md-4 col-sm-6 col-xs-6">
                                                    <div class="portfolio-item">
                                                        <div class="overlay">
                                                            <a href="images/gallery/fruteira/<?php echo$i; ?>.jpg" data-rel="lightbox">
                                                                <i class="fa fa-expand"></i>
                                                            </a>
                                                            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModalLong<?php echo$i?>" style="color:red;">Preços</button>
                                                        </div>
                                                        <img src="images/gallery/fruteira/<?php echo$i; ?>.jpg" alt="Image 9">
                                                    </div>
                                                </div>
                                            <?php } ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php include("footer.php"); ?>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
    
asked by anonymous 16.09.2017 / 05:16

3 answers

0

The glob() function returns a set of file names or directories corresponding to a specific pattern. In the case in question glob("$pasta{*.jpg}", GLOB_BRACE) being $pasta = 'images/gallery/fruteira/';

The number of files inside the fruteira folder is given by count($arquivos)

  

From here on, it's because of the minimal knowledge in PHP to understand the script's logic:) 

<!DOCTYPE html>
<body>
<?php include("header.php");?>
<div class="bg-image">
    <div class="overlay-bg">
        <div class="main-content">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div id="menu-container">
                            <div class="col-md-12" align="center">
                                <div class="dropdown btn btn-danger">
                                    <a href="\index.php" style="color:#ffffff"><b>INÍCIO</b></a>
                                </div>
                                <div id="menu-1" class="homepage" style="margin-top:50px;">
                                    <div class="row">
                                        <?php 

                                        $pasta = 'images/gallery/fruteira/';
                                        $arquivos = glob("$pasta{*.jpg}", GLOB_BRACE);

                                        $maisPaginas=count($arquivos)-$fim;

                                        if ($_GET["pag"]==""){
                                            $inicio=1;
                                            $fim=9;
                                        }else{
                                            $fim=$_GET["pag"]*9;
                                            $inicio=($fim-9)+1;
                                        }

                                        if($fim>=count($arquivos)){
                                            $fim=count($arquivos);
                                        }

                                        for ($i=$inicio; $i <= $fim; $i++) { 
                                        ?>
                                            <div class="col-md-4 col-sm-6 col-xs-6">
                                                <div class="portfolio-item">
                                                    <div class="overlay">
                                                        <a href="images/gallery/fruteira/<?php echo$i; ?>.jpg" data-rel="lightbox">
                                                            <i class="fa fa-expand"></i>
                                                        </a>
                                                        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModalLong<?php echo$i?>" style="color:red;">Preços</button>
                                                    </div>
                                                    <img src="images/gallery/fruteira/<?php echo$i; ?>.jpg" alt="Image <?php echo$i; ?>" title="Image <?php echo$i; ?>">
                                                </div>
                                            </div>
                                        <?php } ?>
                                    </div>
                                    <?php
                                    if (($_GET["pag"]=="")&&(count($arquivos)>$fim)){
                                        echo " <a href=\"?pag=2\" style=\"color:#0000ff\"><b>proxima</b></a> ";
                                    }


                                    if (($_GET["pag"]>1)&&(count($arquivos)>=$fim)){
                                        echo " <a href=\"?pag=".($_GET["pag"]-1)."\" style=\"color:#0000ff\"><b>anterior</b></a>";
                                    }


                                    if (($_GET["pag"]!="")&&(count($arquivos)>$fim)){
                                        echo " <a href=\"?pag=".($_GET["pag"]+1)."\" style=\"color:#0000ff\"><b>proxima</b></a>";
                                    }

                                    ?>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <?php include("footer.php"); ?>
            </div>
        </div>
    </div>
</div>
</body>
</html>

To do according to the author's comment [Primeira][1][2][3][ultima]

CSS: 

a {
  text-decoration: none;
  color: #0000ff;
  font-weight: bold;
}
a:hover {
  color: #179b77;
  text-decoration: underline;
  font-weight: bold;
}

.negrito {
  font-weight: bold;
}

.corrente {
  color: gray;
  font-weight: bold;
}

HTML + PHP 

 <div class="bg-image">
    <div class="overlay-bg">
        <div class="main-content">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div id="menu-container">
                            <div class="col-md-12" align="center">
                                <div class="dropdown btn btn-danger">
                                    <a href="\index.php" style="color:#ffffff"><b>INÍCIO</b></a>
                                </div>
                                <div id="menu-1" class="homepage" style="margin-top:50px;">
                                    <div class="row">
                                        <?php 

                                        $pasta = 'images/gallery/fruteira/';
                                        $arquivos = glob("$pasta{*.png}", GLOB_BRACE);

                                        $quantArquivos = count($arquivos);

                                        $maisPaginas=$quantArquivos-$fim;

                                        if ($_GET["pag"]==""){
                                            $inicio=1;
                                            $fim=9;
                                        }else{
                                            $fim=$_GET["pag"]*9;
                                            $inicio=($fim-9)+1;
                                        }

                                        if($fim>=$quantArquivos){
                                            $fim=$quantArquivos;
                                        }

                                        for ($i=$inicio; $i <= $fim; $i++) { 
                                        ?>
                                            <div class="col-md-4 col-sm-6 col-xs-6">
                                                <div class="portfolio-item">
                                                    <div class="overlay">
                                                        <a href="images/gallery/fruteira/<?php echo$i; ?>.png" data-rel="lightbox">
                                                            <i class="fa fa-expand">Imagem<?php echo$i; ?></i>
                                                        </a><br>
                                                        <!--comentado para não poluir a apresentação do exemplo de paginação
                                                        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModalLong<?php echo$i?>" style="color:red;">Preços</button>
                                                        -->
                                                    </div>
                                                    <img src="images/gallery/fruteira/<?php echo$i; ?>.png" alt="Image <?php echo$i; ?>" title="Image <?php echo$i; ?>">
                                                </div>
                                            </div>
                                    <?php } ?>
                                    </div>
                                                                            <?php

                                    if (($_GET["pag"]==1)||($_GET["pag"]=="")){
                                            echo " <span class=\"corrente\">[Primeira]</span> ";
                                    }else{
                                            echo " <a href=\"?pag=1\">[Primeira]</a> ";
                                    }

                                    for ($k=1; $k <=  ceil(($quantArquivos/9)); $k++) { 

                                        if ($_GET["pag"]==$k){
                                            echo " <span class=\"corrente\">[".$k."]</span>";
                                        }else{
                                            if (($_GET["pag"]=="")&&($k==1)){
                                                echo " <span class=\"corrente\">[1]</span>";
                                            }else{
                                                echo " <a href=\"?pag=".$k."\">[".$k."]</a> ";
                                            }
                                        }
                                    }

                                    if ($_GET["pag"]==ceil(($quantArquivos/9))){
                                            echo " <span class=\"corrente\">[Ultima]</span> ";
                                    }else{
                                            echo " <a href=\"?pag=".ceil(($quantArquivos/9))."\" style=\"color:#0000ff\">[Ultima]</a>";
                                    }

                                    ?>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
    
16.09.2017 / 20:24
1

When I press the first one works fine but the last one does not work nor the numbers. 

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="pt-br">
<![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="pt-br">
<![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="pt-br"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="pt-br">
<!--<![endif]-->

<body>
<?php include("header.php");?>
    <div class="bg-image">
        <div class="overlay-bg">
            <div class="main-content">
                <div class="container">
                    <div class="row">
                        <!-- Begin Content -->
                        <div class="col-md-12">
                            <div id="menu-container">
                                <div class="col-md-12" align="center">
                                    <div class="dropdown btn btn-danger">
                                        <a href="\index.php" style="color:#ffffff"><b>INÍCIO</b></a>
                                    </div>
                                    <div id="menu-1" class="homepage" style="margin-top:50px;">
                                        <div class="row">
                                            <?php $pasta = 'images/gallery/roupeiro/';
                                                $arquivos = glob("$pasta{*.jpg}", GLOB_BRACE);

                                                $maisPaginas=count($arquivos)-$fim;

                                                if ($_GET["pag"]==""){
                                                    $inicio=1;
                                                    $fim=9;
                                                }else{
                                                    $fim=$_GET["pag"]*9;
                                                    $inicio=($fim-9)+1;
                                                }

                                                if($fim>=count($arquivos)){
                                                    $fim=count($arquivos);
                                                }

                                                for ($i=$inicio; $i <= $fim; $i++) { 
                                             ?>
                                                <div class="col-md-4 col-sm-6 col-xs-6">
                                                    <div class="portfolio-item">
                                                        <div class="overlay">
                                                            <a href="images/gallery/roupeiro/<?php echo$i; ?>.jpg" data-rel="lightbox">
                                                            <i class="fa fa-expand"></i>
                                                            </a>
                                                            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModalLong<?php echo$i?>" style="color:red;">Preços</button>
                                                        </div>
                                                        <img src="images/gallery/roupeiro/<?php echo$i; ?>.jpg" alt="Image 9">
                                                    </div>
                                                </div>
                                            <?php } ?>
                                        </div>
                                    </div>
                                    <?php

                                    if (($_GET["pag"]==1)||($_GET["pag"]=="")){
                                            echo " <a class='dropdown btn btn-danger' href=\"?pag=1\" style=\"color:#0000ff\"><b>Primeira</b></a> ";
                                    }else{
                                            echo " <a class='dropdown btn btn-danger' href=\"?pag=1\" style=\"color:#0000ff\"><b>Primeira</b></a> ";
                                    }

                                    for ($k=1; $k <=  ceil(($quantArquivos/9)); $k++) { 

                                        if ($_GET["pag"]==$k){
                                            echo " <span class=\"corrente\">[".$k."]</span>";
                                        }else{
                                            if (($_GET["pag"]=="")&&($k==1)){
                                                echo " <span class=\"corrente\">[1]</span>";
                                            }else{
                                                echo " <a href=\"?pag=".$k."\">[".$k."]</a> ";
                                            }
                                        }
                                    }

                                    if ($_GET["pag"]==ceil(($quantArquivos/9))){
                                            echo " <a class='dropdown btn btn-danger' href=\"?pag=".ceil(($quantArquivos/9))."\" style=\"color:#0000ff\"><b>Ultima</b></a>";
                                    }else{
                                            echo " <a class='dropdown btn btn-danger' href=\"?pag=".ceil(($quantArquivos/9))."\" style=\"color:#0000ff\"><b>Ultima</b></a>";
                                    }

                                    ?>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php include("footer.php"); ?>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
    
16.09.2017 / 17:01
0

I created a small control for pagination in PHP (it can optionally be done in javascript). Basically an offset variable is used that must be passed by the url, and this variable will determine which image to print. Adding I have created an array to store part of the url of the images (to facilitate pagination), small changes in the for loop and two links were added one next and one previous. 

<!DOCTYPE html>
<body>
<?php //include("header.php");?>
    <div class="bg-image">
        <div class="overlay-bg">
            <div class="main-content">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div id="menu-container">
                                <div class="col-md-12" align="center">
                                    <div class="dropdown btn btn-danger">
                                        <a href="\index.php" style="color:#ffffff"><b>INÍCIO</b></a>
                                    </div>
                                    <div id="menu-1" class="homepage" style="margin-top:50px;">
                                        <div class="row">

                                            <?php 
                        $offset = isset($_GET['offset']) ? $_GET['offset'] : 1;
                        $imagens = ['images/gallery/fruteira/', 'images/gallery/tipo1/', 'images/gallery/tipo2/'
                        , 'images/gallery/tipo3/', 'images/gallery/tipo4/', 'images/gallery/tipo5/', 
                        'images/gallery/tipo6/', 'images/gallery/tipo7/', 'images/gallery/tipo8/',
                        'images/gallery/tipo9/', 'images/gallery/tipo10/', 'images/gallery/tipo11/', 
                        'images/gallery/tipo12/', 'images/gallery/tipo13/', 'images/gallery/tipo14/',
                        'images/gallery/tipo15/', 'images/gallery/tipo16/', 'images/gallery/tipo17/',
                        'images/gallery/tipo17/'];

                        for ($i=$offset; $i < ($offset + 9) && $i <= count($imagens); $i++) { ?>
                                                <div class="col-md-4 col-sm-6 col-xs-6">
                                                    <div class="portfolio-item">
                                                        <div class="overlay">
                                                            <a href="<?php echo $imagens[$i - 1] . $i; ?>.jpg" data-rel="lightbox">
                                                                <i class="fa fa-expand"></i>
                                                            </a>
                                                            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModalLong<?php echo$i?>" style="color:red;">Preços</button>
                                                        </div>
                                                        <img src="<?php echo $imagens[$i - 1] . $i; ?>.jpg" alt="Imagem: <?php echo $imagens[$i - 1] . $i; ?>.jpg">
                                                    </div>
                                                </div>
                                            <?php } ?>
                                        </div>
                    <?php 
                        $anterior_offset = ($offset - 9) < 1 ? 1 : ($offset - 9);
                        $proximo_offset = ($offset + 9) > count($imagens) ? $offset : ($offset + 9);                    
                    ?>
                    <a href="?offset=<?php echo $anterior_offset ?>">Anterior</a>
                    <a href="?offset=<?php echo $proximo_offset ?>">Próximo</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php //include("footer.php"); ?>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Here's a snippet of what I got (without styling):

    
16.09.2017 / 16:38
Dynamically sort SQL result Create node in xml with jquery