Galería de imágenes XML y Spray 1 de 2

Como que estaba muy de flojera los primeros temas sobre como iniciarse con Dreamweaver CS 3 así que vamos un paso adelante para hacer ahora una galeria de imagenes con XML, el framework Spry.

Crea un documento XML con el siguiente etiquetado

<fotografias>
<item item_id="1">
<titulo>Elefante</titulo>
<imagen>3elefantealambre_ap.jpg</imagen>
<parrafo>Paquidermo muy grande</parrafo>
</item>
<item item_id="2">
<titulo>Jirafa</titulo>
<imagen>jiraja.jpg</imagen>
<parrafo>Manchada y con un cuello muy grande</parrafo>
</item>
<item item_id="2">
<titulo ..... todas las imágenes .....
<fotografias>

Crea un Data Set con el icono que aparece en el panel Spry XML Data Set

En el panel insertamos los datos necesarios.

Data Set Name: fotos
XML Source: hacemos clic en examinar para localizar en el disco el archivo XML que se creo anteriormente. (fotografias.xml)
Hacemos clic en Get schema se desplegara un arbol del contenido del XML
Data Set Columns: selecciona la columna imagen y en Data Type seleccionamos de la lista Imagen Link.

En la opcion Sort podemos hacer que se muestren los resultados de la consulta por nombre de la imagen, titulo o id_item y en Direction: podemos hacer que se muestre en orden Ascendente o Descendente.

En Options podemos hacer que el XML no se guarde en el cache de la maquina del usuario (Turn XML Data Caching Off) y a la vez podemos hacer que se refresque la información cada cierto tiempo con Auto Refresh Data.

En el panel Spry clic en Spry Region se abrira un panel donde solo haremos clic en OK

Una vez hecho lo anterior se desplegara un panel en Application donde se muestra el árbol del archivo fotos.xml.

hacemos clic en la columna imagen y la arrastramos hasta donde esta el div Content for Spry Region Goes Here

.

Guardamos el documento y hacemo un preview F12 para ver como va quedand. debe de aparecer una imagen en el navegador. ahora que ya podemos ver la imagen. sigue que se muestre todas las imágenes para lo que vamos hacer es seleccionar la imagen de muestra que aparece en Dreamweaver en el panel Spry hacemos clic en Spry Repet se abre el panel de propiedades y solo aceptamos todo “OK”, guardamos el archivo Ctrl+S y un Preview F12.

Ahora vamos a vista codigo Code y en la linea 19 debe de apareceralgo como esto

<div spry:repeat="fotos"><img src="fotos/fotogaleria/{imagen}"/></div>

vamos a agregarle algunos detalles

<div spry:repeat="fotos"><img src="fotos/fotogaleria/{imagen}" class="thumb_img" title="{fotos::titulo}" /></div>

Aplicamos un estilo como este

.thumb_img {
background-color: #FFFFFF; /*Con fondo blanco*/
margin: 5px 10px; /* margen de 5px arriba y bajo y de 10 px en derecha e izquierda*/
padding: 1px; /* espacio de 1px entre la imagen y el borde*/
width: 100px; /* ancho de 100 pixeles */
border: 1px solid #666666; /* borde color gris*/
float: left; /* y se peguen hacia la izquierda*/
}

Hemos terminado hasta aquí pero en el otro tema vamos a darle un efecto a las imágenes y que al hacer clic en una de ellas muestre  la informacion Titulo, imagen y párrafo.