Buenos días, llevo unos cuantos días intentando que un scroll vertical que me ha gustado llame a lightbox (osea que esas miniaturas que se ven, cuando selecciono la que quiero, lightbox me empieze la presentación. Lo siento, pero no lo consigo :(
Os pongo el codigo a ver si estoy haciendo mal la llamada, ya que no tengo ni idea de js o simplemente es que no son compatibles, habia probado con mootols, pero al incluir en el html esos scripts se me iba toda la configuracion (deduje que por que eran incompatibles al usar acciones con los mismos valores (o que se yo...) con lightbox parece que eso no pasa, ya que visualmente nada da error, simplemente eso, que no se "arranca", bueno os pongo el codigo
Os pongo el codigo a ver si estoy haciendo mal la llamada, ya que no tengo ni idea de js o simplemente es que no son compatibles, habia probado con mootols, pero al incluir en el html esos scripts se me iba toda la configuracion (deduje que por que eran incompatibles al usar acciones con los mismos valores (o que se yo...) con lightbox parece que eso no pasa, ya que visualmente nada da error, simplemente eso, que no se "arranca", bueno os pongo el codigo
<!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>jQuery thumbnail scroller</title>
<style type="text/css">
<!--
body {margin:0; padding:0; background:#222;}
.info{position:absolute; right:0; top:0; width:200px; background:#fff; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:5px;}
-->
</style>
<!-- "Llamada al nuevo visor" -->
<link rel="stylesheet" href="css/reset.css" media="all" />
<link rel="stylesheet" href="css/estilos.css" media="all" />
<!--[if IE]>
<link rel="STYLESHEET" type="text/css" href="css/estilos-ie.css" />
<![endif]-->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<link href="jquery.thumbnailScroller.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script language="JavaScript" type="text/javascript">
function llamarGaleria(){
document.getElementById("vaimagen").innerHTML
}
</script>
</head>
<body>
<!--<div class="info">jQuery thumbnail scroller plugin<br /><em>Vertical scroller demo</em><br /><a href="http://manos.malihu.gr/jquery-thumbnail-scroller">plugin homepage</a></div>-->
<!-- thumbnail scroller -->
<DIV id="logotipo">
<img src="objetos/logotipo3.png" border="0">
</DIV>
<div id="tsvf_container">
<div class="thumbScroller">
<div class="container">
<div class="content">
<div><a href="#"></a></div>
<a href="thumbs/big01.jpg" rel="lightbox[roadtrip]"><img src="thumbs/small01.jpg" title="The path" alt="The path" class="thumb" /></a>
</div>
<div class="content">
<div><a href="#"></a></div>
<a href="thumbs/big02.jpg" rel="lightbox[roadtrip]"><img src="thumbs/small02.jpg" title="The path" alt="The path" class="thumb" /></a>
</div>
<div class="content">
<div><a href="#"></a></div>
<a href="thumbs/big03.jpg" rel="lightbox[roadtrip]"><img src="thumbs/small03.jpg" title="The path" alt="The path" class="thumb" /></a>
</div>
<div class="content">
<div><a href="#"></a></div>
<a href="thumbs/big04.jpg" rel="lightbox[roadtrip]"><img src="thumbs/small04.jpg" title="The path" alt="The path" class="thumb" /></a>
</div>
<div class="content">
<div><a href="#"></a></div>
<a href="thumbs/big05.jpg" rel="lightbox[roadtrip]"><img src="thumbs/small05.jpg" title="The path" alt="The path" class="thumb" /></a>
</div>
<div class="content">
<div><a href="#"></a></div>
<a href="thumbs/big06.jpg" rel="lightbox[roadtrip]"><img src="thumbs/small06.jpg" title="The path" alt="The path" class="thumb" /></a>
</div>
<div class="content">
<div><a href="#"></a></div>
<a href="thumbs/big07.jpg" rel="lightbox[roadtrip]"><img src="thumbs/small07.jpg" title="The path" alt="The path" class="thumb" /></a>
</div>
<div class="content">
<div><a href="#"></a></div>
<a href="thumbs/big08.jpg" rel="lightbox[roadtrip]"><img src="thumbs/small08.jpg" title="The path" alt="The path" class="thumb" /></a>
</div>
<div class="content">
<div><a href="#"></a></div>
<a href="thumbs/big09.jpg" rel="lightbox[roadtrip]"><img src="thumbs/small09.jpg" title="The path" alt="The path" class="thumb" /></a>
</div>
<div class="content">
<div><a href="#"></a></div>
<a href="thumbs/big10.jpg" rel="lightbox[roadtrip]"><img src="thumbs/small10.jpg" title="The path" alt="The path" class="thumb" /></a>
</div>
</div>
</div>
</div>
<div id="vaimagen" style="border: 2px solid white;position:absolute;top:50px; left:265px;height:570px; width:850px;">
<a href="#"><img src="thumbs/byn35.jpg" title="Dusk" alt="Dusk" class="thumb" /></a>
</div>
<script>
$(window).load(function() {
/*
ThumbnailScroller function parameters:
1) id of the container (div id)
2) thumbnail scroller type. Values: "horizontal", "vertical"
3) first and last thumbnail margin (for better cursor interaction)
4) scroll easing amount (0 for no easing)
5) scroll easing type
6) thumbnails default opacity
7) thumbnails mouseover fade speed (in milliseconds)
*/
ThumbnailScroller("tsvf_container","vertical",30,0,"easeOutCirc",0.4,600);
});
</script>
<script type="text/javascript" src="jquery.thumbnailScroller.js"></script>
</body>
</html>