Hola!!
llevo un gran avance ya pude controlar ambos divs con los mismo "botones"
de hecho mi galeria esta casi lista, excepto por un detalle
agregue que por cada imagen me aparezca un bullet (bolita) en lugar que me apareciera el boton con el numero de imagen,
le quiero agregar que cuando pase la imagen el bullet sea de otro color, es decir, el bullet correspondiente a la imagen "activa" (que se esta mostrando en ese momento) sea de otro color.
este es mi script:
Código Javascript
:
Ver original$(document).ready(function() {
/*trasicion de imagenes*/
$(function() {
var bc = $('#buttonContainer'); /*contenedor de bullet's de navegacion*/
var $imagenes = $('#deptos').cycle({ /*instancia para el efecto de las imagenes*/
fx: 'fade',
speed: 3000,
next: '#next',
prev: '#prev'
});
var $descripciones = $('#caja_deptos').cycle({ /*instancia para el efecto de las descripciones*/
fx: 'fade',
speed: 3000,
next: '#next', /*al poner los mismos id me controla los dos divs*/
prev: '#prev'
});
$imagenes.children().each(function(i) { /*funcion hace que por cada imagen se asigne un bullet*/
// $('<input type="button" value="'+(i+1)+'" />')
$('<img src="images/bullet_p.png" />')
.appendTo(bc).click(function() {
$imagenes.cycle(i); /*aqui y la linea de abajo me permite que al oprimir cualquier bullet se cambien los 2 divs correspondientes*/
$descripciones.cycle(i);
return false;
});
});
$imagenes.children().each(function() { /*funcion que me muestra los titulos de las imagenes*/
alternate = $(this).find('img').attr('alt');
$(this).append('<div id="caption">'+alternate+'</div>');
});
});
});
el html:
Código HTML:
<div id="deptos">
<a href="#"><img src="ruta.imagen1.jpg" alt="imagen 1" /></a>
<a href="#"><img src="ruta.imagen2.jpg" alt="imagen 2" /></a>
<a href="#"><img src="ruta.imagen3.jpg" alt="imagen 3" /></a>
<a href="#"><img src="ruta.imagenn.jpg" alt="imagen n" /></a>
</div>
<div id="buttonContainer"></div>
<div id="next"></div>
<div id="prev"></div>
<div id="caja_deptos">
<div>Descripcion de la imagen 1</div>
<div>Descripcion de la imagen 2</div>
<div>Descripcion de la imagen 3</div>
<div>Descripcion de la imagen n</div>
</div> Estuve leyendo los ejemplos y las faqs de jquery cyrcle y me encontre esta funcion que creo que me puede ayudar pero no se como aplicarla:
Código Javascript
:
Ver originalfunction onAfter(curr,next,opts) {
var info = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
$('#info').html(info);
}
<div id="info"></div>
lo que hace es poner en en el div info
Imagen 1 de 10 obviamente dependiendo de la imagen en la que se encuentre la transicion, si esta en la 5 dice Imagen 5 de 10
mi idea es aprovechar que identifica en que imagen "se encuentra" con esto
(opts.currSlide + 1) y de alguna manera asignarle mi imagen de bullet de diferente color,
pero como les comento no se como hacer esto.
Si alguien me puede aconsejar se lo agradecería mucho