Hola a todos!!!
Tengo una duda, a ver si me la podéis resolver: necesito hacer una galería de fotos en la que aparezca una sola imagen en miniatura en un slideviewer, pero que, al hacer click sobre ella se abra una ventana tipo "sexylightbox" con la imagen en grande. Podéis ver un ejemplo de lo que trato de describir aqui: [URL="http://www.shbarcelona.es/piso-alquiler-barcelona-l-eixample-consell-de-cent-entenca-EMP00001_215-1.htm"]http://www.shbarcelona.es/piso-alquiler-barcelona-l-eixample-consell-de-cent-entenca-EMP00001_215-1.htm[/URL]
El problema es que solo sé hacer el slideviewer y el sexylightbox por separado, no sé integrar ambas galerías a la vez como hace la página del enlace.
Estoy usando jqGalScroll y SexyLightbox pero no me importaría usar otro script si me orientais un poco para hacerlo.
Os dejo aquí el código de la galería de prueba que he hecho para que me digais como puedo integrar ambas funciones:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="../slideviewer/jqGalScroll/common/js/jqgalscroll.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#one').jqGalScroll({direction : 'horizontal', height:200,width:200,speed:1000});
$('#two').jqGalScroll({direction : 'vertical',height:200,width:200,speed:1000});
});
</script>
<link href="../slideviewer/jqGalScroll/common/css/jqGalScroll.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="sexylightbox.v2.3.mootools.min.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />
<script type="text/javascript">
window.addEvent('domready', function(){
$('#one').SexyLightbox;
$('#two').SexyLightbox;
SexyLightbox = new SexyLightBox({color:'white', dir: 'sexyimages'});
});
</script>
<style>
.alertbox
{
background : url(../slideviewer/jqGalScroll/slb/images/dialog-help.png) no-repeat scroll left top;
margin : 0 10px;
padding : 0 0 5px 40px;
font-family : Verdana;
font-size : 12px;
text-align : left;
}
.alertbox .buttons
{
text-align : right;
}
</style>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="../imagenes/adosado_fuengirola.jpg" rel="sexylightbox[gal]"><img src="../imagenes/adosado_fuengirola.jpg" /></a></td>
<td><a href="../imagenes/corta.jpg" rel="sexylightbox[gal]"><img src="../imagenes/corta.jpg" /></a></td>
<td><a href="../imagenes/larga.jpg" rel="sexylightbox[gal]"><img src="../imagenes/larga.jpg" /></a></td>
</tr>
</table>
<ul id="one">
<li><a href="../imagenes/adosado_fuengirola.jpg" rel="sexylightbox[gal]"><img src="../imagenes/adosado_fuengirola.jpg" /><img src="adosado_fuengirola.jpg" border="0"/></a></li>
<li><a href="../imagenes/corta.jpg" rel="sexylightbox[gal]"><img src="../imagenes/corta.jpg" /><img src="corta.jpg" border="0"/></a></li>
<li><a href="../imagenes/larga.jpg" rel="sexylightbox[gal]"><img src="../imagenes/larga.jpg" /><img src="larga.jpg" border="0"/></a></li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$("ul.jqGalScroll").jqGalScroll({height:200,width: 200,speed:1000});
});
</script>
<ul id="two">
<li><img src="adosado_fuengirola.jpg" border="0"/></li>
<li><a href="corta.jpg"><img src="corta.jpg" border="0"/></a></li>
<li><a href="larga.jpg"><img src="larga.jpg" border="0"/></a></li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$("ul.jqGalScroll").jqGalScroll({height:200,width: 200,speed:1000});
});
</script>
</body>
</html>
Muchisimas gracias de antemano!!!