Foro de elhacker.net

Programación => PHP => Mensaje iniciado por: Anonymatrix en 5 Mayo 2016, 04:25 am



Título: [Ayuda] PHP anterior siguiente imagen
Publicado por: Anonymatrix en 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">

<!--(anterior)-->

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

<!--(siguiente)-->

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

</form>

</html>


Título: Re: [Ayuda] PHP anterior siguiente imagen
Publicado por: gAb1 en 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 (http://flexslider.woothemes.com/) (ahí tienes una demo).

Código
  1. <div class="flexslider">
  2.  <ul class="slides">
  3.    <li>
  4.      <img src="imagenes/Imagen_1.png" />
  5.    </li>
  6.    <li>
  7.      <img src="imagenes/Imagen_2.png" />
  8.    </li>
  9.  </ul>
  10. </div>

Una vez creado el html inicializas el plugin en el:

Código
  1. $(window).load(function() {
  2.  $('.flexslider').flexslider({
  3.    animation: "slide"
  4.  });
  5. });

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

Código
  1. $storeFolder = realpath('/home/usuario/web.com/imagenes');
  2.  
  3. if ( FALSE !== $storeFolder && is_dir($storeFolder) ) {
  4.  
  5.    $files  = scandir($storeFolder);
  6.  
  7.    if ( FALSE !== $files ) {
  8.        foreach ( $files as $file ) {
  9.            if ( '.' != $file && '..' != $file) {
  10.                echo '    <li>
  11.      <img src="', $file, '" />
  12.    </li>';
  13.            }
  14.        }
  15.    }

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


Título: Re: [Ayuda] PHP anterior siguiente imagen
Publicado por: Anonymatrix en 6 Mayo 2016, 00:58 am
Grax.