Question

I have two functions I would like to use in my before callback with jquery cycle. One slides the pager over as the user cycles through, and other other centers the image horizontally and vertically inside the containing div. Both work great separately, yet I can seem to get them to work together both on the before callback. I have an example that shows what I’ve got yet the slide function is set on the after callback. – http://tinyurl.com/27pmzj5

Here is the code I have so far.

$(function() {

$('#photo-slideshow').cycle({ 
    timeout: 0,
    next: '#next-btn', 
    prev: '#prev-btn',
    before: align,
    after: slide,
    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="75" height="75" /></a></li>'; 
    } 
});


//Play and Pause
$('#pause-btn').click(function() { $('#photo-slideshow').cycle('pause'); return false; });
$('#play-btn').click(function() { $('#photo-slideshow').cycle('resume'); return false; });


//Align Image       
function align(curr,next,opts) {

    //center the image
    var $slide = $(next);
    var w = $slide.outerWidth();
    var h = $slide.outerHeight();
    $slide.css({
        marginTop: (800 - h) / 2,
        marginLeft: (800 - w) / 2
    });


    //centers the DIV vertically!!!!    
    var divHeight = 800;
    var theImageHeight = $slide.outerHeight();
    var newTopMargin = (divHeight - theImageHeight) / 2;
    if(theImageHeight > 800){
        $('#photo-slideshow').css({
            marginTop: newTopMargin
        });
    }


    //Adds caption and credit line
    $('#photo-info').html(this.title) 
        .append('<p>' + "Credit: "  + this.alt + '</p>'); 


}


//Slide Pager
function slide(a,b,c,d) {
    if ( c.currSlide < c.slideCount-3 || c.nextSlide == 0 ){
            var p = ( c.nextSlide - 2 < 0 ) ? 0 : -(75*(c.nextSlide-2));
            $("#nav").animate({"left":p+"px"},500);
        }

    }

}); 

Any help on getting this two to both work on the before callback would be greatly appreciated!

Answer 1

Maybe I’m misunderstanding the question, but can’t you just do:

before: function(a, b, c, d) {
  align(a, b, c);
  slide(a, b, c, d);
}

?? In other words, just set the “before” handler to a function that calls your other two functions. You could write it as a separate function if you like:

function callBoth(a, b, c, d) {
  align(a, b, c, d);
  slide(a, b, c, d);
}

To make it a little less ugly you could do this:

function callBoth() {
  align.apply(this, arguments);
  slide.apply(this, arguments);
}