1

jquery サイクルでコールバック前に使用したい関数が 2 つあります。1 つはユーザーが循環するときにページャーをスライドさせ、もう 1 つは画像を含む div 内で水平方向および垂直方向に中央揃えにします。どちらも個別にうまく機能しますが、コールバック前に両方を一緒に機能させることができるようです。私が持っているものを示す例がありますが、スライド関数はアフターコールバックに設定されています。- http://tinyurl.com/27pmzj5

ここに私がこれまでに持っているコードがあります。

$(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);
        }

    }

});

この 2 つをコールバック前の両方で機能させるための助けをいただければ幸いです。

4

1 に答える 1

1

多分私は質問を誤解しているかもしれませんが、あなたはできません：

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

?? つまり、「before」ハンドラーを、他の 2 つの関数を呼び出す関数に設定するだけです。必要に応じて、別の関数として記述できます。

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

少し醜くするために、これを行うことができます：

function callBoth() {
  align.apply(this, arguments);
  slide.apply(this, arguments);
}
于 2010-07-19T17:27:16.940 に答える