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>
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).
<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:
$(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:
$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 >.
Grax.