Problema con jQuery plugin de ciclo, como rotador de imagen y un localizador
-
06-09-2019 - |
Pregunta
Estoy tratando de usar jQuery para hacer un localizador de tumbas y las imágenes grandes y no tienen éxito.
Estoy utilizando este ejemplo desde el sitio de jQuery, creo que he seguido la dirección pero no parece ser worknig.
hago ver sólo la primera imagen y no todos ellos, pero sin buscapersonas. Me estoy perdiendo algo?
Así que aquí está mi HTML:
<!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 runat="server">
<title></title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.cycle.all.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').before('<ul id="nav">').cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav',
// callback fn that creates a thumbnail to use as pager anchor
pagerAnchorBuilder: function(idx, slide)
{
return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
}
});
});
</script>
<style type="text/css">
#slideshow { left: 20px }
#nav { width: 300px; margin: 15px }
#nav li { width: 50px; float: left; margin: 8px; list-style: none }
#nav a { width: 50px; padding: 3px; display: block; border: 1px solid #ccc; }
#nav a.activeSlide { background: #88f }
#nav a:focus { outline: none; }
#nav img { border: none; display: block }
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="slideshow" >
<img src="http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg" />
<img src="http://www.cssnz.org/flower.jpg" />
<img src="http://www.global-b2b-network.com/direct/dbimage/50322257/Sun_Flowers.jpg" />
</div>
</form>
</body>
</html>
Solución
Es necesario añadir un contenedor
Ex
<body>
<form id="form1" runat="server">
<ul id="nav"></ul> <!-- You need this -->
<div id="slideshow">
<img src="http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg" />
<img src="http://www.cssnz.org/flower.jpg" />
<img src="http://www.global-b2b-network.com/direct/dbimage/50322257/Sun_Flowers.jpg" />
</div>
</form>
</body>
Actualización:
Para horizontal en la parte inferior de la página debajo de la secuencia de imágenes
Es necesario añadir este CSS
#nav li{
float: left;
}
Y el cambio a HTML
<form id="form1" runat="server">
<div id="slideshow">
<img src="http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg" />
<img src="http://www.cssnz.org/flower.jpg" />
<img src="http://www.global-b2b-network.com/direct/dbimage/50322257/Sun_Flowers.jpg" />
</div>
<ul id="nav"></ul> <!-- You need this -->
</form>
Otros consejos
¿Se supone que comenzar el ciclo cuando el documento está lista? Estoy familiarizado con el ciclador, pero trata de esta forma:
<script type="text/javascript">
$(function() {
$('#slideshow').before('<ul id="nav">').cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav',
// callback fn that creates a thumbnail to use as pager anchor
pagerAnchorBuilder: function(idx, slide)
{
return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
}
});
});
</script>
Tal vez estuviera tratando de ejecutar un termociclador en un elemento que no existía todavía, porque el documento no estaba listo. Además, creo que la sintaxis para la creación de elementos les obliga a ser de cierre, es decir, debe tener .before('<ul id="nav" />').cycle()
..., pero no estoy muy familiarizado con los pormenores de jQuery todavía.