[Ayuda] PHP anterior siguiente imagen

Anonymatrix · 5 Mayo 2016, 04:25 AM

Hola, he creado 2 botones:

Anterior - Siguiente

Tengo x imágenes, ejemplo 3.

[Y quiero esto:]

Al entrar en la pagina te sale la imágen 1 por defecto.

Le das a siguiente, la imágen 1 desaparece, la imágen 2 aparece.

Le das a siguiente, la imágen 2 desaparece, la imágen 3 aparece.

Etc...

[Este es mi código, no funciona]

Citar<html>

<?php

$imagen = "Imagen_1";

// --------

$boton_anterior = $_POST["boton_anterior"];

// Condición, si apretas el boton...

if(isset($boton_anterior))
{
   if($imagen == "Imagen_1")
   {
      $imagen = "Imagen_3";
   }
   elseif($imagen == "Imagen_2")
   {
      $imagen = "Imagen_1";
   }
   elseif($imagen == "Imagen_3")
   {
      $imagen = "Imagen_2";
   }
}

// --------

$boton_siguiente = $_POST["boton_siguiente"];

// Condición, si apretas el boton...

if(isset($boton_siguiente))
{
   if($imagen == "Imagen_1")
   {
      $imagen = "Imagen_2";
   }
   elseif($imagen == "Imagen_2")
   {
      $imagen = "Imagen_3";
   }
   elseif($imagen == "Imagen_3")
   {
      $imagen = "Imagen_1";
   }
}

?>

<div style="background-image: url(imagenes/<?php echo $imagen; ?>.png); background-position: center top"></div>

<form method="post">



<button style="background-color: gray; border: 0px; width: 25px; height: 25px" type="submit" name="boton_anterior">
</button>



<button style="background-color: gray; border: 0px; width: 25px; height: 25px" type="submit" name="boton_siguiente">
</button>

</form>

</html>

gAb1 · 5 Mayo 2016, 05:02 AM

Lo que estás haciendo es complicarte la vida, enviando una petición por imagen? Además no hace falta reinventar la rueda (una y otra vez...).

Tienes varios plugins JQuery que hacen esto por tí, yo uso FlexSlider (ahí tienes una demo).

Código (html5) [Seleccionar]

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="imagenes/Imagen_1.png" />
    </li>
    <li>
      <img src="imagenes/Imagen_2.png" />
    </li>
  </ul>
</div>

Una vez creado el html inicializas el plugin en el:

Código (javascript) [Seleccionar]

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});

Si no sabes el número de imagenes que vas a tener en la carpeta, puedes buscarlas y crear el html automaticamente:

Código (php) [Seleccionar]

$storeFolder = realpath('/home/usuario/web.com/imagenes');

if ( FALSE !== $storeFolder && is_dir($storeFolder) ) {

    $files  = scandir($storeFolder);

    if ( FALSE !== $files ) {
        foreach ( $files as $file ) {
            if ( '.' != $file && '..' != $file) {
                echo '    <li>
      <img src="', $file, '" />
    </li>';
            }
        }
    }

Este código debería ir entre las etiquetas <ul></ul>.

Si las imagenes las suben los usuarios, debes asegurarte de que el nombre de estas no contenga comilas dobles para evitar ataques XSS.

EDITO: En el segundo ejemplo de la página te dicen como poner botones si no es suficiente con las flechas < y >.

Anonymatrix · 6 Mayo 2016, 00:58 AM

Grax.

Test Foro de elhacker.net SMF 2.1

[Ayuda] PHP anterior siguiente imagen

Anonymatrix

gAb1

Anonymatrix