Ver Mensaje Individual
  #8 (permalink)  
Antiguo 29/07/2010, 05:02
mastermp2
 
Fecha de Ingreso: junio-2010
Mensajes: 13
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: Slideshow en Javascript.

Aaaah ya veo. En pocas palabras no es posible debido a que Javascript no puede leer datos del servidor y para esto se usa PHP.

Estuve explorando la posibilidad de usar un archivo PHP ubicado en la carpeta de imagenes, el cual obtiene los nombres de los archivos de imagenes y produce como salida un array en javascript. Luego un script en java lo que hace es rotar las imagenes.

Hasta ahora no tengo problemas, lo probe en un hosting que no tiene PHP (tripod), mediante el uso de "src" y funciona a la perfeccion (pueden verlo aqui):

http://mastermp2.tripod.com/banner/experimental.html

Lo que hice fue que el script en PHP estuviera en un server que cuenta con PHP de manera de que el se encarge de hacer lo del array en javascript y lo que hace el cliente es solo correr el script en java.

Tenia algunas dudas ya que cuando probe algo similar pero no funcionaba y pense que era necesario que el sitio donde se encuentre el banner tenia que tener servidor PHP, pero con lo que me dijistes, revise bien algunas cosas y me funciono.

Gracias.

Ahora, lo unico que me falta es explorar la posibilidad de anadir animacion y links a las imagenes. (debo iniciar otro tema o lo puedo hacer en este?)

---------------------------------------------------------------------------------------------------------

Para los que quieran ver el codigo:

Pagina donde se encontrara el slideshow:

Código:
<html>
<head>

<title>Experimental (with Zymic src)</title>

<!-- Script 2************************************************************************************** -->

	<script src="http://testingsite.zymichost.com/banner/media/getimages.php"></script>
	
	<script src="http://testingsite.zymichost.com/banner/script2.js"> </script>

<!-- Script 2************************************************************************************** -->

</head>



<!-- BODY ****************************************************************************************************** -->


<p> Script 2 (All images, no animation. PHP inside folder + javascript calls. No links yet. Works on sites without php server.... like tripod). Source: http://www.javascriptkit.com/javatutors/externalphp2.shtml </p>

<div style="width: 940px; height: 350px">
	<img id="slideshow" src="http://testingsite.zymichost.com/banner/media/image1.jpg" />
</div>


<!-- BODY ****************************************************************************************************** -->

</html>

Como veran el objetivo era hacer un codigo simple que solo se le den unas pocas lineas a alguien de manera que pueda colocar el slideshow en su pagina para hacer publicidad o algun anuncio, etc. (sin flash), y al mismo tiempo dejar que un "usuario no programador", pueda administrar facilmente el contendido del slideshow (anadiendo o quitando imagenes al directorio sin tener que complicarse con codigo).

Claro que esto algunas personas lo hacen con CMS (content management system), pero ya esa es otra historia







Archivo PHP que extrae el array (getimages.php)

Código:
<?
//PHP SCRIPT: getimages.php
Header("content-type: application/x-javascript");

//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'galleryarray['.$curimage.']="'.$file .'";';
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo 'var galleryarray=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>

Script que rota las imagenes (script2.js)

Código:
var curimg=0
	function rotateimages(){
	document.getElementById("slideshow").setAttribute("src", "media/"+galleryarray[curimg])
	curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
	}
	
	window.onload=function(){
	setInterval("rotateimages()", 2500)
	}