Foros del Web » Programando para Internet » PHP »

completar codigo javascript

Estas en el tema de completar codigo javascript en el foro de PHP en Foros del Web. mi codigo no hace la dinamica que quiero ya que trata de mostrar las imagenes que tengo en mi db en dos en dos hasta ...
  #1 (permalink)  
Antiguo 26/05/2011, 18:21
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años
Puntos: 10
completar codigo javascript

mi codigo no hace la dinamica que quiero ya que trata de mostrar las imagenes que tengo en mi db en dos en dos hasta recorrer todas las imagenes que hay en la tabla y cuando acabe volver a empezar.
hasta ahora con el codigo que tengo solo consigo mostrar un numero determinado de imagenes pero yo quiero realmente recorrer todas las imagenes de mi db en dos en dos esto se puede hacer con javascript ya que el campo donde guardo las imagenes se va incrementando comforme van enviando archivos a traves de un formulario
muestro codigo
Código Javascript:
Ver original
  1. <div id="1" style="">
  2.     <?php
  3.     while($row=mysql_fetch_array($registro){
  4.       echo "<img src="imagenes/$row['file_one']">";
  5.     }
  6.       ?>
  7. </div>
  8. <div id="2" style="display: none; ">
  9.     <?php
  10.     while($row=mysql_fetch_array($registro2){
  11.       echo "<img src="imagenes/$row['file_one']">";
  12.     }
  13.       ?>
  14. </div>
no se si con javascript puedo hacer esto o necesito ajax
espero que me podais ayudar
  #2 (permalink)  
Antiguo 26/05/2011, 18:48
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 9 meses
Puntos: 1532
Respuesta: completar codigo javascript

amigo usted lo que necesita es implementar un paginador, y existen muchas clases genéricas para hacerlo

PD: este tema corresponde a PHP, ya solicite que muevan el tema
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 26/05/2011, 19:13
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años
Puntos: 10
Respuesta: completar codigo javascript

maycolalvarez gracias por contestar pero no me has entendido yo lo que quiero es mostrar en pantallas dos imagenes y que se alternen en un periodo de tiempo para mostrar otras dos y asin relativamente este codigo javascript ya me funciona pero no como a mi me gustaria ya que las imagenes las recojo de una base de datos y las muestro en dos en dos pero quiero mostrarlas todas osea mostrar dos despues las dos siguientes despues las dos siguientes asin hasta acabar de recorrer todo el campo donde guardo las imagenes y claro necesitaria ajax ya que quiero que si publican mas imagenes que se incluyan y las muestre tambien en pantalla

me entendistes ahora en resumen a traves de un formulario guarda imagenes en db y las quiero mostrar todas pero no de golpe si no dos que se alternen con otras dos asin hasta recorrer toda las imagenes y si envian nuevas imagenes tambien y vuelta a empezar mostrar dos otras dos asin siempre
  #4 (permalink)  
Antiguo 27/05/2011, 00:57
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: completar codigo javascript

Hola:

Aún no me entero del problema, pero en principio no valen los id's empezados por números.

Una solución podría ser volcar el array de imágenes php a un array javascript, y activar un temporizador al cargarse la página...

Tal vez la idea se parezca a un slideshow mio: Galería... en este caso las imágenes se eliminan del array y se hace una llamada ajax cuando quedan unas pocas (no recuerdo cuantas) volviendo a incrementar ese array.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 27/05/2011, 02:37
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años
Puntos: 10
Respuesta: completar codigo javascript

caricatos en primer lugar un saludo y gracias por intervenir en mi problema

mas o menos es como el slideshow de tu galeria pero con algunos cambios como por ejemplo mostrar en dos en dos las imagenes o mejor dicho en tres en tres bueno eso es indiferente ya que luego es facil adaptarlo.
Otro cambio seria (que no se como lo tienes en tu galeria) el slideshow lo quedria con las imagenes almacenadas en mi db exactamente en el campo imagen_1 y cuando acaba de mostrarlas volver a empezar del principio pero claro a todo este codigo abria que añadirle ajax para recargar el array cada vez que publiquen nuevas imagenes y no se ni por donde empezar te muestro algun codigo para que me puedas orientar segun lo que posteastes arriba:

recoger las imagenes del campo imagen_1 en un array.
Código PHP:
Ver original
  1. //aqui codigo para crear el array del campo imagen_1
  2.  <?php
  3.  $registros=mysql_query ("SELECT * FROM tabla_archivos order by id_noticias desc",$conexion);
  4.    $imagenes = array();
  5.    while ($row = mysql_fetch_assoc($registros)){
  6.    $imagenes = $row['imagen_1'];
  7.     }
  8.  ?>
despues ese array php pasarlo a un array javascript
Código Javascript:
Ver original
  1. <script>
  2. var x = new Array();
  3. <?php
  4. for ($i = 0, $total_imagenes = count($array_php); $i < $total_imagenes; $i ++)
  5. echo "\nx[$i] = '$array_php[$i]';";
  6. ?>
  7. </script>

y la verdad es que no se ni por donde seguir me faltaria crear el codigo javascript para mostrar los array y ajax para actualizar los array.

espero que me puedas enseñar hacer esto ya que llevo tiempo con el tema y nada un saludo y gracias de todas formas

Última edición por pithon; 27/05/2011 a las 08:32
  #6 (permalink)  
Antiguo 27/05/2011, 10:20
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: completar codigo javascript

Hola:

Vamos a terminar con la parte html/javascript.

En principio tienes que crear las dos imágenes con html para que se vean al principio, poniéndole dos id's distintos, y puedes quitarlas del array:

list($primera, $segunda) = $array_php;
array_unshift($array_php); array_unshift($array_php);


<img src="$primera" id="primera" />
<img src="$segunda" id="segunda" />...

Y luego con el array javascript sería:

window.onload = function() {
setInterval(cambiar, 10000)
}

function cambiar() {
prime = x.unshift();
segu = x.unshift();
document.getElementById("primera").src = prime;
document.getElementById("segunda").src = segu;
if (x.length < 5) byscar_imagenes()

}

Ahora falta la búsqueda de imágenes con Ajax...

Cuéntanos como lo llevas...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #7 (permalink)  
Antiguo 27/05/2011, 11:01
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años
Puntos: 10
Respuesta: completar codigo javascript

caricatos perdona pero no entendi bien lo que tengo que hacer si me puedes ser mas expecifico para poder entenderlo
  #8 (permalink)  
Antiguo 27/05/2011, 17:56
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: completar codigo javascript

Hola:

¿Qué es lo que no entiendes?

Con esto
Código:
list($primera, $segunda) = $array_php;
array_unshift($array_php); array_unshift($array_php);
quitas las dos primera imágenes del array y las guardas en dos variables que luego deberás usar en dos tags img.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #9 (permalink)  
Antiguo 28/05/2011, 02:27
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años
Puntos: 10
Respuesta: completar codigo javascript

hola caricatos yo entendi esto aunque la variable de las imagenes la puse mal no se ponerla y por lo otro no se si es lo bien lo que me dijistes
Código Javascript:
Ver original
  1. <script language="javascript">
  2. <!--
  3.  <script type="text/javascript">include 'rotar.php';</script>
  4.  
  5. list($primera, $segunda) = $array_php;
  6. array_unshift($array_php); array_unshift($array_php);
  7.  
  8.  
  9. <img src='../archivos/$primera' id="primera" />
  10. <img src='../archivos/$segunda' id="segunda" />
  11. window.onload = function() {
  12. setInterval(cambiar, 10000)
  13. }
  14.  
  15. function cambiar() {
  16. prime = x.unshift();
  17. segu = x.unshift();
  18. document.getElementById("primera").src = '../archivos/$primera';
  19. document.getElementById("segunda").src = '../archivos/$segunda';
  20. if (x.length < 5) byscar_imagenes()
  21.  
  22. }
  23. //-->
  24. </script>

Última edición por pithon; 28/05/2011 a las 03:08
  #10 (permalink)  
Antiguo 28/05/2011, 03:48
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: completar codigo javascript

Hola:

Las líneas de php son para que obtengas las 2 primeras fotos y las quites del array_php...

Código:
<?php
list($primera, $segunda) = $array_php;
array_unshift($array_php); array_unshift($array_php);
?>
Luego creas el array javascript (ya no necesitas las dos primeras y por eso las 2 instrucciones array_unshift.
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #11 (permalink)  
Antiguo 28/05/2011, 04:20
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años
Puntos: 10
Respuesta: completar codigo javascript

caricatos entonces seria asin
codigo php
Código PHP:
Ver original
  1. <?php
  2.  
  3.  
  4. //aqui ago la conexion con db
  5. //el array php
  6.  
  7. ?>
  8. <scrip languahe="javascript">
  9. <!--
  10.  
  11. var x = new Array();
  12. <?php
  13. for ($i = 0, $total_imagenes = count($array_php); $i < $total_imagenes; $i ++)
  14. echo "\nx[$i] = '$array_php[$i]';";
  15. list($primera, $segunda) = $array_php;
  16. array_unshift($array_php); array_unshift($array_php);
  17. ?>
  18.  
  19. window.onload = function() {
  20. setInterval(cambiar, 10000)
  21. }
  22.  
  23. function cambiar() {
  24. prime = x.unshift();
  25. segu = x.unshift();
  26. document.getElementById("primera").src = prime;
  27. document.getElementById("segunda").src = segu;
  28. if (x.length < 5) byscar_imagenes()
  29. }
  30. <div>
  31. <img src="$primera" id="primera" />
  32. <img src="$segunda" id="segunda" />
  33. </div>
  34.  
  35. //-->
  36.  
  37. </scrip>

aunque de todas formas en la variable de php $imagenes guardo el nombre y el archivo en una carpeta llamada archivos

Última edición por pithon; 28/05/2011 a las 05:16
  #12 (permalink)  
Antiguo 28/05/2011, 10:48
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: completar codigo javascript

Hola:

Pensaba que el array era $array_php, pero eso es lo de menos. y si el nombre está sin la ruta, evidentemente debes "fabricarla" cuando heces la asignación... o sea en la temporización javascript, o cuando creas el array javascript, y en la parte html.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #13 (permalink)  
Antiguo 28/05/2011, 11:07
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años
Puntos: 10
Respuesta: completar codigo javascript

no entiendo la parte de mostrar las dos imagenes.
que tendria que ser mostradas con php?
ya que luego el resto del array lo mostrare con javascript si me lo pudieras explicar

bueno mejor dicho no entiendo toda la parte esa

Última edición por pithon; 28/05/2011 a las 18:36
  #14 (permalink)  
Antiguo 28/05/2011, 20:09
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años
Puntos: 10
Respuesta: completar codigo javascript

caricatos para quitar las dos imagenes del array no seria esta linea
no entiendo como funciona bien el codigo javascript que posteastes
Código Javascript:
Ver original
  1. window.onload = function() {
  2. setInterval(cambiar, 10000)
  3. }
  4.  
  5. function cambiar() {
  6. prime = x.unshift();
  7. segu = x.unshift();
  8. document.getElementById("primera").src = prime;
  9. document.getElementById("segunda").src = segu;
  10. if (x.length < 5) byscar_imagenes()
  11.  
  12. }

bueno si quieres que postees mis dudas ya sabes admelo saber un saludo

Última edición por pithon; 28/05/2011 a las 20:53
  #15 (permalink)  
Antiguo 29/05/2011, 04:33
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: completar codigo javascript

Hola:

Tienes razón en array_shift, siempre me equivoco... entonces:

Código:
<?php
$primera = array_shift($array_php);
$segunda = array_shift($array_php);
?>
Con estas 2 líneas quitas del array php las dos primeras imágenes que luego deberías asignar a los respectivos tags, y con el resto del array volcarlo al array javascript. Luego en la parte javascript, recuerda que también se usa shift...

Después te quedaría la implementación ajax.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #16 (permalink)  
Antiguo 29/05/2011, 07:53
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años
Puntos: 10
Respuesta: completar codigo javascript

caricatos creo tenerlo todo bien ya, aunque el codigo no funciona ya que ahora falta la parte de buscar las imagenes y inclementar el array con ajax, eso si me gustaria que el array se recargara cuando ha recorrido todas las imagenes de la tabla si es posible claro osea cuando muestre la ultima dos imagenes del array espero que esto se pueda.

cuando quieras seguimos espero intrucciones maestro pero recuerda que soy novato saludos.

Última edición por pithon; 29/05/2011 a las 09:58
  #17 (permalink)  
Antiguo 29/05/2011, 10:15
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: completar codigo javascript

Hola:

En principio, al usar setInterval, por las dudas deberías comprobar el tamaño del array...

Código:
function cambiar(){
if (x.length > 0) {
 prime = x.shift;
 document.getElemenById("primera").src = prime;
}
if (x.length > 0) {
 segu = x.shift;
 document.getElemenById("segunda").src = segu;
}
if (x.length == 0) buscar_imagenes();
}
Ahora la parte Ajax... simplemente tienes que generar con php una cadena con las imágenes (decide si con o sin la ryta), separadas por una coma (por ejemplo), y convertirla en array con la función split:

Código:
Ajax = objetoAjax();
Ajax.open("get", "buscar_php", true);
Ajax.onreadystatechange = function() {
if (Ajax.readyState == 4 && (Ajax.status == 200 || Ajax.status == 501)) x.responseText.split(",");
		
}
Ajax.send(null);
Ahora te quedaría depurarlo...

Tal vez te interese esta página sobre Ajax: Destripando objetos Ajax

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #18 (permalink)  
Antiguo 29/05/2011, 10:49
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años
Puntos: 10
Respuesta: completar codigo javascript

Caricatos no se si te entendi bien yo hice la parte de ajax asin con un script llamado buscar.php en la misma carpeta con una cadena con todos los nombres de las imagenes como me dijistes esa cadena la hice con un while y el campo del nombre de las imagenes le hice un echo para mostrar en pantalla todos los nombres y luego hice lo que me dijistes de ajax.

hice esto
Código Javascript:
Ver original
  1. <script language='javascript'>
  2. Ajax = objetoAjax();
  3. Ajax.open("get", "buscar.php", true)
  4. Ajax.onreadystatechange = function() {
  5. if (Ajax.readyState == 4 && (Ajax.status == 200 || Ajax.status == 501)) x.responseText.split(",");
  6. }
  7. Ajax.send(null);
  8. </script>

Última edición por pithon; 29/05/2011 a las 23:26
  #19 (permalink)  
Antiguo 30/05/2011, 00:08
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: completar codigo javascript

Hola:

Lo importante es que uses un delimitador que luego puedas revertir con javascript...

Te he propuesto hacerlo con comas, pero no sé si una cadena muy larga pueda darte problemas. También podrías usar saltos de línea, pero ese mismo delimitador usado tal vez con un implode, debes luego usarlo como parámetro del split...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #20 (permalink)  
Antiguo 30/05/2011, 01:49
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años
Puntos: 10
Respuesta: completar codigo javascript

Hola caricatos esa cadena puede contener mas o menos 60 nombres de imagenes pero creo que lo cambiare con un delimitador de salto de linea entonces el vuelco del array a javascript lo hice asin:

Código Javascript:
Ver original
  1. var x = '<?php echo implode("\n", $imagenes); ?>'

y el delimitador de salto de linea lo use para el parametro de split asin
Código Javascript:
Ver original
  1. Ajax = objetoAjax();
  2. Ajax.open("get", "buscar.php", true)
  3. Ajax.onreadystatechange = function() {
  4. if (Ajax.readyState == 4 && (Ajax.status == 200 || Ajax.status == 501)) x.responseText.split("\n");
  5. }
  6. Ajax.send(null);

pero la parte de mostrar las dos primeras imagenes lo hice con php y html era lo correcto o tenia que mostrarlo con javascript?
otra cosita caricatos la ruta no la estoy poniendo ya que quiero ponerla cuando muestre las imagenes osea en la parte html

Última edición por pithon; 30/05/2011 a las 04:24
  #21 (permalink)  
Antiguo 30/05/2011, 07:47
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: completar codigo javascript

Hola:

Que pongas las dos primeras imágenes con html me parece correctísimo, porque siempre pueden desactivar javascript, y al menos así se verán... por eso también la hemos descartado del primer array... y sobre lo segundo, espero que me puedas sorprender...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #22 (permalink)  
Antiguo 30/05/2011, 08:18
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años
Puntos: 10
Respuesta: completar codigo javascript

Hola caricatos bueno realmente tengo dudas con lo de generar la cadena de imagenes con php
creo que lo hice mal no lo entendi si me pudieras explicar un poco es una tonteria pero no lo entiendo de verdad

y si te refieres con lo de lo segundo a la ruta yo la puse en esta linea corrigeme porfavor
Código Javascript:
Ver original
  1. document.getElemenById('primera').src = '../archivos/'prime;
  #23 (permalink)  
Antiguo 30/05/2011, 08:31
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: completar codigo javascript

Hola:

No sé si el editor te quitó algún carácter, pero la concatenación en javascript se hace con el signo "+"...

Código:
document.getElemenById('primera').src = '../archivos/' + prime;
Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #24 (permalink)  
Antiguo 30/05/2011, 08:42
 
Fecha de Ingreso: mayo-2011
Mensajes: 1.201
Antigüedad: 13 años
Puntos: 10
Respuesta: completar codigo javascript

caricatos no consigo hacer funcionar el codigo tampoco la parte javascript y menos la parte de ajax probe con otro codigo parecido con javascript y si funciono aunque es mas sencillo y realmente no me sirve para nada ya que no es eficaz como el que queria, si me quieres dar alguna ajuda si no pues nada a estudir el tema a fondo saludos.

y gracias por todo aunque no lo parezca he aprendido mucho contigo todo se debe a que eres un buen colaborador un saludo.

Última edición por pithon; 31/05/2011 a las 04:57

Etiquetas: javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:36.