Album de fotos

iWeb · #1 (**permalink**) 16/08/2007, 08:16

hola queria saber como puedo hacer un album de fotos con PHP o JAVASCRIPT

lo unico que tiene q tener es la posibilidad de navegar entre las fotos y lo mas importante que carge las fotos al album automaticamente cuando yo las coloque en una carpeta

...

gracias.

GatorV · #2 (**permalink**) 16/08/2007, 08:45

Puedes usar opendir junto con readdir para poder leer los archivos de una carpeta asi creas tu galeria.

Saludos.

eybel · #3 (**permalink**) 31/08/2007, 07:34

hola tenes algun codido de esos php para hacer la galeria a mi tambien me interesa, pero de php no se mucho como pasa desarollarlo...

gracias

sisoma2 · #4 (**permalink**) 31/08/2007, 07:42

Aqui tienes un código Javascript:

Código:

<script type="text/javascript" src="http://sisoma2.webspacemania.com/dhtml.js"></script> 
   <script type="text/javascript"> 
   var Bild = new Array(); 
   Bild[0] = new Image(); 
   Bild[0].src = "http://www.palimpalem.com/4/sisoma2/userfiles/banner_imageshare.gif"; 
   Bild[1] = new Image(); 
   Bild[1].src = "http://img455.imageshack.us/img455/2132/sisomawx0.gif"; 
   Bild[2] = new Image(); 
   Bild[2].src = "url de tu imagen"; 
   Bild[3] = new Image(); 
   Bild[3].src = "url de tu imagen"; 
   Bild[4] = new Image(); 
   Bild[4].src = "url de tu imagen"; 
   Bild[5] = new Image(); 
   Bild[5].src = "url de tu imagen"; 
    
   var bildbereich; 
   var zeige = 0; 
   var Breite = 500; 
   var aktuelleBreite = 0; 
   var Schrittweite = 6; 
   var Schrittverzoegerung = 1; 
    
   function Blaettern (Richtung) { 
     zeige = zeige + Richtung; 
     if (zeige > Bild.length - 1) { 
       zeige = 0; 
     } else if (zeige < 0) { 
       zeige = Bild.length - 1; 
     } 

     if (DOM || MSIE4) { 
       //bildbereich.style.clip = "rect(0 0 225px 0)"; 
      //bildbereich.style.border = "1px solid black"; 
     } else if (NS4) { 
       //bildbereich.clip.right = 0; 
     } 
     if (DOM && bildbereich.firstChild) { 
       bildbereich.firstChild.src = Bild[zeige].src; 
       bildbereich.firstChild.width = Bild[zeige].width; 
       bildbereich.firstChild.height = Bild[zeige].height; 
     } else if (MSIE4) { 
       bildbereich.innerHTML = '<img src="' + Bild[zeige].src + '">'; 
     } else if (NS4) { 
       bildbereich.visibility = "hide"; 
       setContent("id", "Bildbereich", null, 
         '<img src="' + Bild[zeige].src + '">'); 
       bildbereich.visibility = "show"; 
     } 
     BildAufbauen(); 
   } 
    
   function BildAufbauen () { 
     if (aktuelleBreite <= Breite) { 
       if (DOM || MSIE4) { 
         //bildbereich.style.clip = "rect(0 " + aktuelleBreite + "px 225px 0)"; 
       } else if (NS4) { 
         //bildbereich.clip.right = aktuelleBreite; 
       } 
       aktuelleBreite = aktuelleBreite + Schrittweite; 
       window.setTimeout("BildAufbauen()", Schrittverzoegerung); 
     } else { 
       aktuelleBreite = 0; 
       if (DOM || MSIE4) { 
         //bildbereich.style.clip = "rect(0 " + Breite + "px 225px 0)"; 
       } else if (NS4) { 
         //bildbereich.clip.right = Breite; 
       } 
     } 
   } 
    
   function Init () { 
     bildbereich = getElement("id", "Bildbereich"); 
     if (DOM && document.createElement && bildbereich.appendChild) { 
       var img = document.createElement("img"); 
       img.setAttribute("src", Bild[0].src); 
       img.setAttribute("border", "1"); 
       img.setAttribute("width", Bild[0].width); 
       img.setAttribute("height", Bild[0].height); 
       bildbereich.appendChild(img); 
     } else if (MSIE4) { 
       bildbereich.innerHTML = '<img border="1" src="' + Bild[0].src + '">'; 
     } else if (NS4) { 
       setContent("id", "Bildbereich", null, 
         '<img border="1" src="' + Bild[0].src + '">'); 
     } 
   } 
   </script> 
   <style type="text/css"> 
   body { color:#c0c0c0; background-color:#00000; } 
   #Bildbereich { padding:0; clip:rect(0 500px 500px 0); visibility:show; } 
   #Navigationsbereich { width:250px;  } 
   </style> 
</head> 

<BODY onload="Init()" text=#c0c0c0 vLink=#c0c0c0 aLink=#c0c0c0 link=#c0c0c0 bgColor=#000000> 
   <div align="center"> 
         <FONT size="+1" face="Georgia, Times New Roman, Times, serif"><STRONG><em>Fotos</em></STRONG></FONT> 
   </div> 
   <br> 
   <div style="" align="center"> 
       
      <font size="+1"> 
      <a href="javascript:Blaettern(-1)">Anterior</a> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
      <a href="javascript:Blaettern(1)">Siguiente</a> 
      </font> 
       
   </div> 
   <br> 
   <div id="Bildbereich" align="center" style="height:425px"></div> 
<div align=center></div>

Puedes modificar el Estilo CSS y las urls de las imagenes :D

eybel · #5 (**permalink**) 31/08/2007, 07:46

Como hago para probarlo??? donde lo meto???, asi empiezo a ver como funciona!!

desde ya muchas gracias......

sisoma2 · #6 (**permalink**) 31/08/2007, 07:49

Pues si tienes Frontpage o dreamweaver creas un archivo HTML y lo pruebas en el navegador.
Si no tienes esos programas lo editas en BLoc de Notas y lo guardas en extensión .html y ya está :D

GatorV · #7 (**permalink**) 31/08/2007, 07:51

Eso me supongo en un archivo HTML para que lo puedas probar.

Te traslado al foro de Javascript ya que esto no es PHP.

Saludos.