"lanzar" una función para dos div diferentes para que se comporten igual

[catpaw]

Ta' feo contestarse uno mismo, pero en fin, aca esta la solucion:

Galería (hecha con jquery cyrcle) dos divs diferentes, uno con las imagenes, el titulo correspondiente de la imagen (traído del alt) los controles next, prev y la paginacion con bullets y el otro div con la una descripción de la imagen correspondiente; todo controlado por los mismos controles de navegacion:

Código Javascript:

$(function() {
    $('#deptos').cycle({ /*instancia para el efecto de las imagenes*/
        fx: 'fade',
        speed: 4000,
        next:   '#next', 
            prev:   '#prev',
        pager: '#buttonContainer',
        pagerAnchorBuilder: function(i) {
            return '<a href="#"></a>';
        }
    });
    $('#caja_deptos').cycle({ /*instancia para el efecto de las descripciones*/
        fx: 'fade',
        speed: 4000,
        next:   '#next', 
            prev:   '#prev',
        pager: '#buttonContainer',
        pagerAnchorBuilder: function(i) {
            return $('#buttonContainer a:eq('+i+')');
        }
    });
    $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>');
    });
 

html:

Código HTML:

<div id="deptos">
        <a href="#"><img src="image1.jpg" alt="titulo1"/></a>
        <a href="#"><img src="image2.jpg" alt="titulo2"/></a>
        <a href="#"><img src="image3.jpg" alt="titulo3"/></a>
        <a href="#"><img src="imageN.jpg" alt="tituloN"/></a>
</div>
<div id="buttonContainer"></div>
<div id="next"></div>
<div id="prev"></div>
<div id="caja_deptos">
       <div>Descripcion1</div>
       <div>Descripcion2</div>
       <div>Descripcion3</div>
       <div>DescripcionN</div>
</div>
 

el css es "al gusto" XD

solo les pongo lo basico para la navegacion:

Código CSS:

#buttonContainer{
    position:absolute;
    z-index:100;
    margin:-25px 0 0 250px;
}
#buttonContainer a{ 
    display:inline-block;
    margin:0 0 0 5px;
    padding:11px 0 0 11px;
    background:url(images/transicion/bullet_p.png) no-repeat;
}
#buttonContainer a.activeSlide{
    background:url(images/transicion/bullet_a.png) no-repeat;
}
#buttonContainer a:hover{
    background:url(images/transicion/bullet_h.png) no-repeat;
}
#buttonContainer a:focus{
    outline: none;
}
 

Saludos!!