Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Como usar jqGal Scroll y SexyLightbox

Estas en el tema de Como usar jqGal Scroll y SexyLightbox en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/07/2011, 13:31
 
Fecha de Ingreso: abril-2011
Mensajes: 3
Antigüedad: 9 años, 6 meses
Puntos: 0
Como usar jqGal Scroll y SexyLightbox

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!!!

Etiquetas: foto, galeria, javascript, jqgalscroll, sexylightbox
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:00.