Problem with php gallery

Question

Problem with php gallery

Navigation

#1 by (2 votes)

0

I am a beginner in PhP and I am doing an image gallery with PhP (to facilitate the construction of the div that contains the images and applies the styles).

This is the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <title>Prueba de codigo</title>

</head>
<body class="bg-info">

  <section class="container-fluid">

    <div class="row justify-content-center">
      <div class="col-12 text-center">
        <h1 class="text-white mt-5">Galería de imágenes</h1>
      </div>
    </div>

    <?php

        $directorio = opendir("images"); //ruta actual
        while ($archivo = readdir($directorio)) //obtenemos un archivo y luego otro sucesivamente
        {
            if (is_dir($archivo))//verificamos si es o no un directorio
            {
                 //Aqui se hace algo si no es un directorio, opcional
            }
            else
            {
              //Aqui hacen lo que quieran con cada archivo
                echo "<div class='row justify-content-center'>";

                echo "<div class='col-xs-12 col-sm-12 col-md-8 col-lg-8 text-center'>";

                echo "<div class='card-columns'>";

                echo "<div class='card'>"; //card con imagen
                echo "<a href='#' data-toggle='modal' data-target='#modal_img'>";
                echo "<img src='images/$archivo' alt='$archivo' class='card-img-top' />";
                echo "</a>"; //cierre link imagen
                echo "</div>"; //cierre card

                echo "<div class='modal fade' id='modal_img' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel' aria-hidden='true' style='z-index: 2000;'>"; //modal de imagen centrada
                echo "<div class='modal-dialog modal-lg modal-dialog-centered' role='document'>";
                echo "<img src='images/$archivo' alt='$archivo' class='img-fluid rounded' />";
                echo "</div>"; //cierre modal dialog
                echo "</div>"; //cierre modal fade

                echo "</div>"; //cierre card columns

                echo "</div>"; //cierre columna

                echo "</div>"; //cierre row
            }
        }

      ?>

      </div>
    </div>



  </section>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>

The code itself works for me, but I have 2 problems that can not be solved:

1) I try to make them occupy the structure that I gave with the bootstrap 4 but it does not work, I have the images one below the other, and I want them to be ordered sideways first. If I use that gallery model only as HTML it works for me without problems.

2) When I click on the modal, I always see only the first image, and obviously I would like it to show the image I click, I have no idea how to do that.

It looks like this:

I'm trying to make it look like this:

Once again Thanks to the whole community.

php imagen

asked by Dosiscode 09.05.2018 в 19:23

source

1 answer

000webhost with mysql error: Parse error: syntax error, unexpected 'if' (T_IF) in /storage/ssd2/509/5475509/public_html/webhost.php on line 5? [closed] Do not show controls when you identify that page! IsPostBack in c #

score 2 · Accepted Answer

I found several errors in your code and programming suggestions

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <title>Prueba de codigo</title>

</head>

<body class="bg-info">

  <section class="container-fluid">

    <div class="row justify-content-center">
      <div class="col-12 text-center">
        <h1 class="text-white mt-5">Galería de imágenes</h1>
      </div>
    </div>

    <?php

        $directorio = opendir("images"); //ruta actual
        //Aqui hacen lo que quieran con cada archivo
        $html = '';
        $html.="<div class='row justify-content-center'>";
        $html.="<div class='col-xs-12 col-sm-12 col-md-8 col-lg-8 text-center'>";

        while ($archivo = readdir($directorio)) //obtenemos un archivo y luego otro sucesivamente
        {
            if (is_dir($archivo))//verificamos si es o no un directorio
            {
                 //Aqui se hace algo si no es un directorio, opcional
            }
            else
            {          
                $html.="
                <div class='card-columns'>
                  <div class='card'> //card con imagen
                    <a href='#' data-toggle='modal' data-target='#img_$archivo'>
                      <img src='images/$archivo' alt='$archivo' class='card-img-top' />
                    </a> //cierre link imagen
                  </div> //cierre card

                  <div class='modal fade' id='img_$archivo' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel' aria-hidden='true' style='z-index: 2000;'> //modal de imagen centrada
                    <div class='modal-dialog modal-lg modal-dialog-centered' role='document'>
                      <img src='images/$archivo' alt='$archivo' class='img-fluid rounded' />
                    </div> //cierre modal dialog
                  </div> //cierre modal fade
                </div>"; //cierre card columns
            }
        }

        $html.="
              </div> //cierre columna
            </div> //cierre row";

        echo $html;

      ?>

I gave you that result because every iteration of the while you were creating a new div with class "ROW" and that causes the stack down along with the div that controls the columns, as you only want to iterate the cards because only I put the cards with their respective modal and left a single row with the column controller.

I recommend you to do a single variable (in this case $ html) so that you can gather all your HTML and when you finish your work the PHP can print the variable that already has everything concatenated and not echo everything.

You are creating a modal for each iteration, I recommend that you create a single modal and fill it with the photo with an AJAX request, that of creating many manners is not cool, apart from that you had it with just one ID, and I was never going to open the different images if not just one (because there is only one ID), so to fix it temporarily to the ID of the image I put the same name of the image, take into account that if the name of the image is repeated, it will not turn out as you want.

If you do not use the condition is_dir($archivo) when returning TRUE, avoid it, it is better to use !is_dir($archivo) and start your code.

I hope you serve