ciclo de jquery: pagerAnchorBuilder

I am using the pagerAnchorBuilder and I want to simply link to a specific image within the slide. So pager link 1,will then link to slide 3, but I just cannot get this working. here is my code which someone setup for me.

Ejemplo de página

<script type="text/javascript">
$(document).ready(function(){
var start;
if(window.location.hash){
    start = window.location.hash.substr(1);
} else {
    start = 0;
}
$('#slideDesign').cycle({
startingSlide: start,
fx: 'fade',
speed: 'fast',
timeout: 0,
next:   '.nextBT', 
prev:   '.prevBT', 
pager: '.navDesign',
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
return '.navDesign li:eq(' + (idx) + ') a';
} 
});

});
</script>

preguntado el 01 de febrero de 12 a las 13:02

1 Respuestas

I just skipped the whole pageanchorbuilder thing, it's way to basic for doing anything fancy. This is what I found worked better.

First build out your Cycle stage and thumb tray like this:

<div class="gallery">
    <div class="stage">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
    </div>
    <div class="thumb-tray">
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
    </div>
</div>

Luego use este JS para vincular las miniaturas a las diapositivas. Básicamente, el pulgar 1 enlaza con la diapositiva 1 y así sucesivamente.

// Start Cycle
jQuery('.stage').cycle({ 
    timeout:  0,
});

// Make the thumbs change the stage
jQuery('.gallery .thumb').click(function(){
    var thumbIndex = jQuery(this).closest('.gallery').find('.thumb').index(jQuery(this));
    jQuery(this).closest('.gallery').find('.stage').cycle(thumbIndex);
});

This will work with multiple Cycle gallery's on a page too.

Now if you want to link thumb 1 to slide 3, then change that last click function to +2 to each thumbIndex. So thumb 1 links to slide 3, and thumb 2 links to slide 4 (which in this case doesn't exist).

// Make the thumbs change the stage, but add 2 to the thumbIndex
jQuery('.gallery .thumb').click(function(){
    var thumbIndex = jQuery(this).closest('.gallery').find('.thumb').index(jQuery(this));
        thumbIndex = thumbIndex+2;
    jQuery(this).closest('.gallery').find('.stage').cycle(thumbIndex);
});

If it was only the first thumb you wanted to add 2 too, then you could do an if statement (keep in ind that this is all 0-based indexing) like this:

// Make the thumbs change the stage
jQuery('.gallery .thumb').click(function(){
    var thumbIndex = jQuery(this).closest('.gallery').find('.thumb').index(jQuery(this));
    if(thumbIndex == 0) {
        thumbIndex = thumbIndex+2;
    }
    jQuery(this).closest('.gallery').find('.stage').cycle(thumbIndex);
});

contestado el 01 de mayo de 12 a las 23:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.