Slideshow en Javascript.

mastermp2 · #1 (**permalink**) 23/07/2010, 08:53

Hola

Yo no soy programador, tampoco se mucho de java y necesito hacer un slideshow en javascript el cual tome las imagenes de una carpeta de images y las vaya rotando y stuff..... es para hacer un web banner como los que se hacen en flash y se les da un cliente o 3rd party, para que solo copie y pegue un simple codigo en su pagina. No tiene que ser nada muy complejo, los unico detalles son los siguientes:

-Debe ser en javascript (nada de flash)
-Debe tomar las imagenes de una carpeta
-No requiere declaracion o cambio en el codigo cada vez que se desea insertar mas imagenes o eliminar imagenes o cambiar el nombre.

Actualmente estoy revisando varios codigos en internet y consegui un codigo que hace esto "pero", el unico problema que le consigo es que se debe declarar en el script, la cantidad de imagenes que hay en la carpeta y ademas de eso, las imagenes deben seguir un formato en su nombre...... o sea me gustaria que a un usuario X (alguien que no tiene ni idea de programacion, a diferencia de mi que se un poco y stuff) se le haga sencillo a la hora de anadir imagenes o eliminar y stuff.

Agradeceria toda la ayuda que puedan darme.

El codigo que estoy revisando es el siguiente

Código:

<html>
<head>

<title>Experimental</title>


<SCRIPT LANGUAGE="JavaScript">
<!--

var dimages=new Array();
var numImages=4;

for (i=0; i<numImages; i++)
{
  dimages[i]=new Image();
  dimages[i].src="media/image"+(i+1)+".jpg";
}
var curImage=-1;

function swapPicture()
{
  if (document.images)
  {
    var nextImage=curImage+1;
    if (nextImage>=numImages)
      nextImage=0;
    if (dimages[nextImage] && dimages[nextImage].complete)
    {
      var target=0;
      if (document.images.myImage)
        target=document.images.myImage;
      if (document.all && document.getElementById("myImage"))
        target=document.getElementById("myImage");
  
      // make sure target is valid.  It might not be valid
      //   if the page has not finished loading
      if (target)
      {
        target.src=dimages[nextImage].src;
        curImage=nextImage;
      }

      setTimeout("swapPicture()", 5000);

    }
    else
    {
      setTimeout("swapPicture()", 500);
    }
  }
}

setTimeout("swapPicture()", 5000);

//-->
</SCRIPT>								

</head>



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

<IMG WIDTH=940 HEIGHT=350 ID="myImage" NAME="myImage" SRC="media/image1.jpg"></IMG>




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

  
</html>

Como veran, es solo cuestion de colocar algo como:

Código:

<SCRIPT SRC="http://www.tusitioweb.com/uploads/js/cmscommon.js" type="text/javascript"></SCRIPT>

En el head y luego en el body se colocaria:

Código:

<IMG WIDTH=940 HEIGHT=350 ID="myImage" NAME="myImage" SRC="http://www.tusitioweb.com/media/image1.jpg"></IMG>

.... o sea,,, le das esos 2 pedazos de codigo a tu amigo/cliente/loquesea y con eso el puede colocar tu webbanner en su pagina y stuff.... saben,,, como lo hace la gente del marketing (solo que ellos lo hace con flash)

BONUS: Estoy averiguando como se anaden los efectos en java, pero si alguien sabe seria genial sin me lo puede decir.... cosas sencillas nada muy complicado (quizas un efecto el de esta pagina: http://www.actena.fr/)

El link de donde saque ese codigo es el siguiente: http://www.permadi.com/tutorial/jsImgSlide/index.html

(esta en ingles.... sorry dudes)

caricatos · #2 (**permalink**) 23/07/2010, 10:19

Hola:

javascript no tiene que saber nada de las carpetas de los clientes, pero si lo que necesitas son datos del servidor, puedes usar un lenguaje del ídem y pasar esos datos a javascript.

Saludos

EroChvc · #3 (**permalink**) 24/07/2010, 01:30

Cita:

Iniciado por caricatos

Hola:

javascript no tiene que saber nada de las carpetas de los clientes, pero si lo que necesitas son datos del servidor, puedes usar un lenguaje del ídem y pasar esos datos a javascript.

Saludos

lo que dice es cierto, te recomiendo PHP aunque va a ser un poco largo si no manejas nisiquiera javascript bien

mastermp2 · #4 (**permalink**) 26/07/2010, 06:08

Bueno.

Estuve revisando en internet y consegui otros codigos que me permiten hacer lo que necesito pero usando adicionalmente archivos PHP.

Gracias por su ayuda de todas formas.

Sin embargo, si saben como mejorar el codigo que coloque anteriormente para que cumpla con lo que necesitaba seria util para asi tener otra alternativa (en caso de que por alguna razon no disponga de un web server que tenga php instalado y stuff,,, cosa que es rara en estos tiempos donde todo el mundo tiene lo mejor y stuff, pero que a veces pasa)

caricatos · #5 (**permalink**) 26/07/2010, 08:24

Cita:

Iniciado por mastermp2

Bueno.

Estuve revisando en internet y consegui otros codigos que me permiten hacer lo que necesito pero usando adicionalmente archivos PHP.

Gracias por su ayuda de todas formas.

Sin embargo, si saben como mejorar el codigo que coloque anteriormente para que cumpla con lo que necesitaba seria util para asi tener otra alternativa (en caso de que por alguna razon no disponga de un web server que tenga php instalado y stuff,,, cosa que es rara en estos tiempos donde todo el mundo tiene lo mejor y stuff, pero que a veces pasa)

Código:

...pero usando adicionalmente archivos PHP.

¿Y eso no equivale a obtener datos del servidor...

?

REPITO (odio usar mayúsculas...)

Código HTML:

pero si lo que necesitas son datos del servidor, puedes usar un lenguaje del ídem y pasar esos datos a javascript.

... Puedes volver a hacer lo que hiciste...

Código:

revisando en internet

, y re-ratificar las respuestas de este foro <enojado>

</enojado>

Saludos

mastermp2 · #6 (**permalink**) 28/07/2010, 08:00

Disculpa la pregunta pero que quieres decir con "lenguaje del idem"? (busque en internet y no consegui su significado)

La programacion no es mi fuerte, por lo cual estoy en busqueda de ayuda, ya que hay muchas cosas que no se (como lenguaje idem, javascript, etc), por lo cual escribo en este foro ya que usualmente los usuarios de los foros saben explicar mejor y de manera mas detallada las cosas.

Actualmente estoy realizando una pasantia (como asistente del jefe de proyectos web) y una de las cosas que me estan pidiendo que investigue es la posibilidad de hacer un slideshow que solo utilice javascript y que permita tomar las imagenes de un directorio sin necesidad de hacer nada mas, de forma facil.

Usualmente este tipo de slideshows se hacen en flash pero quieren ver la posibilidad de hacerlo en Javascript en caso de que el usuario que llegue a la pagina no tenga flash instalado

(Aunque el usuario podria tener en su navegador web javascript inabilitado, pero ya eso es otro escenario)

La opcion de hacerlo con Javascript y PHP es la que mas se le acerca (aunque aquellos usuarios que tenga su pagina en un hosting gratuito como Tripod, el cual no cuenta con PHP, no podran utilizar el banner)

Agradezco toda ayuda posible

caricatos · #7 (**permalink**) 28/07/2010, 09:34

Hola:

"Lenguaje del ídem", si se trata de un contexto en el que se habla del servidor, evidentemente ese ídem debes reemplazarlo por servidor... y php es un lenguaje del servidor.

.... en los foros, como tu dices, explicamos las cosas... y más detallada que afirmar que "no es posible", no se me ocurre.

Código:

javascript no tiene que saber nada de las carpetas de los clientes,

Como javascript no corre en el servidor, tampoco puede saber los datos del servidor.

Verás, lo que tienes que hacer es que el lenguaje del servidor que tiene el que aloje tu script, devuelva un array en formato javascript, a partir de ahí puedes plantear más cosas.

No se puede hacer sin el servidor, salvo manualmente cada vez que subas una imágen... pero eso es otra cosa.

Saludos

mastermp2 · #8 (**permalink**) 29/07/2010, 05:02

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)
	}