Pagination in the photo gallery

Question

Pagination in the photo gallery

Asked 6 years, 9 months ago

Viewed 451 times

1

Good evening everyone, I need help with the following code snippet and a photo gallery and I need 9-in-9 photo pagination I’ve tried everything and I can’t if you 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>

see in the answer the second example

– user60252

2017/09/20 at 18:17

3 answers

0

The function glob() 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 folder fruteira is given by count($arquivos)

From then on, it’s the minimum knowledge in PHP to understand the logic of the script :)

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

1

running 1000%

– Tulio Vieira

2017/09/16 at 19:38
1

very obg even helped of more

– Tulio Vieira

2017/09/16 at 19:39
1

Ready friend! I’m new here, kkkk I’m sorry.

– Tulio Vieira

2017/09/16 at 21:19
1

it would be like putting a button: [First] [1][2][3][last] in this code I tried to do it myself but it didn’t work out no

– Tulio Vieira

2017/09/20 at 15:50
1

@See in the answer the second example

– user60252

2017/09/20 at 18:17
1

it worked I won’t create a post with the code and images as it was

– Tulio Vieira

2017/09/20 at 20:02
1

pucliquei la down a post da a look

– Tulio Vieira

2017/09/20 at 22:19
1

can let found the wrong variable hiccup instead of$quantArchives is $maisPaginas

– Tulio Vieira

2017/09/20 at 22:26

Show 3 more comments

Browser other questions tagged php javascript jquery

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

by Tulio Vieira • **497** points · Answer 1 · 2017-09-16T15:01:00+00:00

when I hit the first one works fine but the last one doesn’t even work 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>

by Juven_v • **2,619** points · Answer 2 · 2017-09-16T14:38:05+00:00

I created a small control for PHP paging (optionally can be done in javascript). Basically an offset variable is used that must be passed by the url, and this variable will determine which image should be printed. Adding I created an array to store part of the image url (to facilitate paging), small changes to the for loop, and two links were added to each next and one to 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 is a clipping of what I managed to obtain (without stylization):