Ver Mensaje Individual
  #13 (permalink)  
Antiguo 06/01/2010, 14:16
Mr_Raymon
 
Fecha de Ingreso: diciembre-2009
Ubicación: España
Mensajes: 119
Antigüedad: 14 años, 5 meses
Puntos: 2
Respuesta: Combinar Lightbox (jQuery) con datos en XML

Lo suyo seria combinarlo con XML para no tener que escribir todo eso cada vez que subas una foto o lo que sea. Simplemente con modificar la informacion del fichero XML y subirla al servidor.

Pongo parte del codigo XML para ver la estructura:

Código XML:
Ver original
  1. <datos>
  2. <trabajos>
  3. <web>
  4. <proyecto>Proyecto Web 1</proyecto>
  5.       <miniatura>img/trabajos/web/minis/abetal.jpg</miniatura>
  6.       <imagen>img/trabajos/web/original/abetal.jpg</imagen>
  7.       <info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim, mauris sit amet commodo volutpat, orci odio placerat nisl, eu mollis tellus elit sit amet arcu.
  8.         <br/>
  9.         <b>Tecnología PHP</b>
  10.       </info>
  11. </web>
  12. <web>
  13. <proyecto>Proyecto Web 2</proyecto>
  14.       <miniatura>img/trabajos/web/minis/loquesea.jpg</miniatura>
  15.       <imagen>img/trabajos/web/original/loquesea.jpg</imagen>
  16.       <info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim, mauris sit amet commodo volutpat, orci odio placerat nisl, eu mollis tellus elit sit amet arcu.
  17.         <br/>
  18.         <b>Tecnología PHP</b>
  19.       </info>
  20. </web>
  21. <multimedia>
  22. <proyecto>Proyecto Multimedia 1</proyecto>
  23.       <miniatura>img/trabajos/web/minis/m1.jpg</miniatura>
  24.       <imagen>img/trabajos/web/original/m1.jpg</imagen>
  25.       <info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim, mauris sit amet commodo volutpat, orci odio placerat nisl, eu mollis tellus elit sit amet arcu.
  26.         <br/>
  27.         <b>Tecnología PHP</b>
  28.       </info>
  29. </multimedia>
  30. <multimedia>
  31. <proyecto>Proyecto Multimedia 2</proyecto>
  32.       <miniatura>img/trabajos/web/minis/m2.jpg</miniatura>
  33.       <imagen>img/trabajos/web/original/m2.jpg</imagen>
  34.       <info>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim, mauris sit amet commodo volutpat, orci odio placerat nisl, eu mollis tellus elit sit amet arcu.
  35.         <br/>
  36.         <b>Tecnología PHP</b>
  37.       </info>
  38. </multimedia>
  39. </trabajos>
  40. </datos>

La etiqueta <proyecto> seria el titulo de la foto.
La etiqueta <miniatura> seria la ruta de la foto en miniatura.
La etiqueta <imagen> seria la ruta de la foto original.
La etiqueta <info> seria la informacion incluida en cada ventana en prettyPhoto junto con un salto de linea <br/> y justo debajo un texto en negrita que indica la tecnologia utilizada.

Logicamente serviria para todas las secciones de mi proyecto (web, multimedia, dispositivos moviles, etc.).

Imagino que hacer eso seria algo parecido a esto:

Código Javascript:
Ver original
  1. $(".galeria").append('<li><a href="+imagen+" rel="prettyPhoto[fondos]" title="+info+"><img src="+miniatura+" class="imagen_hover" alt="+miniatura+"/></a></li>');

Creo que seria algo asi o incluso mas reducido, como has puesto antes en el primer ejemplo.

Saludos.

Última edición por Mr_Raymon; 12/03/2010 a las 04:21