Ya me había tardado con la segunda parte de este tutorial por lo que les pido una disculpa.
El la primera parte vimos como crear la galería usando XML y SPRY lo que vamos a hacer ahora es que los datos se visualicen al mismo tiempo sin tener que recargar la pagin. para eso vamos a agregar unas lineas de codigo.
Arriba de la galleria <div> y entre <body>
Ponemos <h1 spry:detailregion=”fotos”></h1> y desde el panel de Bindings arrastramos {titulo} para que el html quede <h1 spry:detailregion=”fotos”>{fotos::titulo}</h1> de igual manera creamos un Spry Region y dentro de esa capa arrastramos el item imagen desde el panel Bindings de igual manera que hicimos con el titulo <h1> lo haremos con el párrafo descripción al final obtendremos algo como esto.
<h1 spry:detailregion="fotos">{fotos::titulo}</h1>
<div spry:detailregion="fotos"><img src="fotos/fotogaleria/{imagen}" class="imagen" title="{titulo}" /></div>
<p spry:detailregion="fotos">{fotos::parrafo}</p>
Aqui es donde le vamos a poner unos efectos los thumbails para que se vea mas efectivo para lo que vamos a abrir el Panel de Behaviors / Effects / Appear Fade. despues de que agregaste el efecto en el mismo panel aparecerá como Onclick para cambiar la propiedad ahi mismo para que se despliegue el panel y lo cambies por onmouseover lo que quiere decir al pasar el mouse por encima del objeto. Recuerda poner el Effect duration a 500 milisegundos para que no se vea tan lento.
Volvemos a hacer lo mismo solo que invertimos el Fade From por Fade To y desactivamos la casilla del Toggle Effect. Como también va a volver a aparecer por defecto onclick vuelves a repetir la operación pero ahora le cambias a onmouseout lo que quiere decir que al quitar el mouse del objeto se ejecuta la función.
.
Se ve bien pero ahora hay que ajustar los ultimos detalles que al hacer clic sobre el thumbail muestre la informacion sin recargar la pagina para lo que nos tenemos que pasar a vista codigo y seleccionamos la imagen pequeña y dentro de la misma etiqeuta IMG ponemos onclick=”fotos.setCurrentRow(‘{ds_RowID}’)” , puedes hacer un preview con F12 para ver el resultado.
Por ultimo para no crear enlaces falsos <a href=”#”> vamos al panel CSS Styles y selecciona la clase thumb hacemos clic en el icono del lapiz que es Editar y dentro del panel de la definición de las reglas vamos a la opción Extensions y donde dice cursor escribimos pointer. hacemos clic en ok y ya tenemos lista la galería.
El código final quedo así.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Galeria</title>
<script src="js/xpath.js" type="text/javascript"></script>
<script src="js/SpryData.js" type="text/javascript"></script>
<script src="js/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var fotos = new Spry.Data.XMLDataSet("fotografias.xml", "fotografias/item");
fotos.setColumnType("imagen", "image");
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//-->
</script>
<style type="text/css">
body{ font-family:Georgia, "Times New Roman", Times, serif}
h1{ margin:0 ; font-size:22px; color:black}
p{ font-size:12px}
.thumb{
width:5%;
margin:2px;
cursor: pointer;
-moz-opacity:.50;
opacity:.50;
}
.imagen{ width:450px}
</style>
</head>
<body>
<h1 spry:detailregion="fotos">{fotos::titulo}</h1>
<div spry:detailregion="fotos"><img src="fotos/fotogaleria/{imagen}" class="imagen" title="{titulo}" /></div>
<p spry:detailregion="fotos">{fotos::parrafo}</p>
<div spry:repeat="fotos" spry:region="fotos"><img src="fotos/fotogaleria/{imagen}" class="thumb" onclick="fotos.setCurrentRow('{ds_RowID}')" onmouseover="MM_effectAppearFade(this, 500, 50, 100, true)" onmouseout="MM_effectAppearFade(this, 500, 100, 50, false)" /></div>
</body>
</html>
Para ver el resultado final puedes descargar aquí todos los archivos, ustedes disculparan las fotografías y los textos pero se tomaron completamente al azar de la pagina de eluniversal.com.mx.
