Pasar imagen sin recargar página...

Usa_Firefox · #1 (**permalink**) 14/04/2009, 08:03

¡Hola!

Este es mi primer mensaje en el foro.... y es una duda:

En mi página saco el nombre de una imagen de una BD MySQL y muestro las imánes paginadas (paginador de jpinedo) que saco haciendo esto:

Código PHP:

  while()){ 
echo '<img src="../imgs/' . $imgname . '>'; 
}

Bueno, he puesto la estructura solo, está claro que hay mucho más... PEro el problema es que quiero que en lugar de paginar los resultados para mostrar pags, se me paginen las imágenes y aparezcan los enlaces"siguiente" y "anterior"... Y que al pulsar se realice la acción, pero sin recargar TODA la página....

Saludos!

David · #2 (**permalink**) 14/04/2009, 08:15

Eso lo debes hacer con Javascript (y dependiendo del caso, AJAX).

Hay galerías de fotos prefabricadas que ya traen esas opciones, si no tienes muchos conocimientos de Javascript, es cuestión de buscar uno que se adecue a tus necesidades.

Básicamente, lo que debes hacer es una petición al servidor (AJAX) por la URL de la siguiente imagen y cambiar el src del img.

GatorV · #3 (**permalink**) 14/04/2009, 08:17

Para no recargar toda la pagina tienes que usar AJAX, no lo puedes hacer solamente con PHP.

Por otro lado, lo que tienes que haces aparte de aprender AJAX es hacer una pagina donde te entregue el URL de la pagina para irla cambiando desde AJAX, por lo que no es necesario que uses el paginador de JPinedo, ya que es algo mas sencillo, solo vas poniendo los links de atras / siguiente.

Saludos.

Usa_Firefox · #4 (**permalink**) 14/04/2009, 08:38

Encontré esto ['LO PONGO PARA QUE LE SIRVA A ALGUIEN: No es para alcanzar el mínimo de mensajes ni nada ehh XD']

Código PHP:

  <HTML> 
<HEAD> 
 
<TITLE>Visor de imagenes</TITLE> 
 
 
</HEAD> 
 
<BODY bgcolor="white"> 
 
<table border="0" cellpadding="0"> 
  <tr> 
    <td width="100%"><img src="x1.jpg" width="240" height="160" name="photoslider"></td> 
  </tr> 
  <tr> 
    <td width="100%"><form method="POST" name="rotater"> 
<script type="text/javascript"> 
var photos=new Array() 
var which=0 
 
  ////cambia las variables necesarias 
photos[0]="x1.jpg" 
photos[1]="x2.jpg" 
photos[2]="x3.jpg" 
photos[3]="x4.jpg" 
photos[4]="x5.jpg" 
 
 
function backward(){ 
if (which>0){ 
window.status='' 
which-- 
document.images.photoslider.src=photos[which] 
} 
} 
 
function forward(){ 
if (which<photos.length-1){ 
which++ 
document.images.photoslider.src=photos[which] 
} 
else window.status='End of gallery' 
} 
</script><!--webbot 
      bot="HTMLMarkup" endspan --><input type="button" value="<<Back" name="B2" 
      onClick="backward()"> <input type="button" value="Next>>" name="B1" 
      onClick="forward()"><br> 
      </center></div> 
    </form> 
    </td> 
  </tr> 
</table> 
 
 
</body> 
</html>

Lo saqué de este foro... pero lo he pegado aquí, y luego edito el mensaje con un script que pueda mostrar las imgs de una base de datos.

Solo tenes q modificar las varibles:
photos[0]="x1.jpg"
photos[1]="x2.jpg"
photos[2]="x3.jpg"
photos[3]="x4.jpg"
photos[4]="x5.jpg

x1.jpg, x2.jpg, x3.jpg y etc, por las imagenes q necesites.

Me surgió la duda 1:

¿Cómo hago para cambiar esta línea?

Código HTML:

document.images.photoslider.src=photos[which]

Es decir, que me aparezca algo así

document.images.photoslider.src=../carpetaimgs/photos[which]

Ya que no sé mostrar el texto en javascript... (traslado de tema porfa)

Saludos

David · #5 (**permalink**) 14/04/2009, 08:50

Sólo tienes que concatenar:

Código javascript:

Ver originaldocument.images.photoslider.src = '../carpetaimgs/' + photos[which];

GatorV · #6 (**permalink**) 14/04/2009, 10:03

Tema trasladado desde PHP.

Usa_Firefox · #7 (**permalink**) 14/04/2009, 12:02

Gracias

Nueva duda... bueno... no es una duda, pero necesito saber si esto está bien así porque no encuentro el fallo:

Código:

<script type="text/javascript">
var photos=new Array()
var which=0

  ////cambia las variables necesarias

<?php
$arraynum=0;
while($img=mysql_fetch_assoc($sql)){
$name=$sql['nombre'];
?>

photos[<?php echo $arraynum; ?>]=<?php echo $name; ?>

<?php
$arraynum++;
}
?>

David · #8 (**permalink**) 14/04/2009, 12:07

Te faltan las comillas para envolver el valor del string:

Código php:

Ver originalphotos[<?php echo $arraynum; ?>] = "<?php echo $name; ?>";

Usa_Firefox · #9 (**permalink**) 14/04/2009, 12:19

Hola!

Lo siento... pero sigue sin funcionar.... (Solo meustra la primera imagen)

Edito: Ya funciona... Tenía una variable sin definir... Ahora mismo preparo el código y lo pongo, para que pueda servirle a alguien...

Saludos!

David · #10 (**permalink**) 14/04/2009, 12:20

Muéstranos la salida que te genera (Ejecuta tu página en el navegador > Ver Código Fuente), ya que mezclado con PHP es más difícil precisar la causa del error.

Usa_Firefox · #11 (**permalink**) 14/04/2009, 12:43

Hola! Aquí lo dejo, es una tontería de código... pero todo el mundo empieza por abajo

:

Código HTML:

<?php
//SOLO EDITA ESTA INFORMACION
$relatividad="."; //mofica la relatividad a las imgd... Por defecto está así si lo tienes en tu carpeta de imágenes
$urlinicial="/fotoinicio.jpg"; //Foto inicial...
$mysql_a="tu_direccion_mysql";
$mysql_b="Tu_base_de_datos_mysql";
$mysql_c="tu_pass_mysql";

$sql_imagenes_bd="SELECT * FROM `tablaconlosnombres`";
$mysql_campo_nombreimg="nombre_que_tiene_el_campo_que_almacena_el_nombre_de_img";
//DESDE AQUI EN ADELANTE NO MODIFIQUES NADA... A nO SER QUE SEPAS LO QUE HACES
?>

<html>
<head>

<title>Pasar im&aacute;genes</title>
</head>

<body>
<img src="./humorgrafico/cagando" width="240" height="160" name="photoslider">

<script type="text/javascript">
var photos=new Array()
var which=0

  ////cambia las variables necesarias

<?php
// nos conectamos a la BD GENRAL
$con = mysql_connect(mysql_a,mysql_b,mysql_c) or die (mysql_error());

mysql_select_db(mysql_b,$con) or die (mysql_error());

//Sacar resultados
$sql=$sql_imagenes_bd;
$arraynum=0;
while($img=mysql_fetch_assoc($sql)){
$name=$img[$mysql_campo_nombreimg];
?>

photos[<?php echo $arraynum; ?>]="<?php echo $name; ?>";

<?php
$arraynum++;
}
?>


function backward(){
if (which>0){
window.status=''
which--;
document.images.photoslider.src=photos[which];
}
}

function forward(){
if (which<photos.length-1){
which++;
document.images.photoslider.src='./humorgrafico/' + photos[which];
}
else window.status='No hay m&aacute;s fotos... Pulse enviar para mandar una nueva.'
}
</script><!--webbot
      bot="HTMLMarkup" endspan --><br /><input type="button" value="<<Back" name="B2"
      onClick="backward()"> <input type="button" value="Next>>" name="B1"
      onClick="forward()"><br /><strong>
	  <?php
	  echo "Actual: " . $name;
	  ?>
	  </strong>
</body>
</html>

Espero que sirva a alguien