Fancybox爲標題添加左/右按鈕

Question

我現在只需要幫助完成此任務，顯示標題中的prev/next按鈕的if語句無法正常工作。

通過添加額外的左/右按鈕標題喜歡這裏的示例圖像中自定義標準的fancybox：

這是我迄今爲止它增加了圖像計數。這些按鈕可以添加到此，使其更容易風格？

$("a.fancybox").fancybox({ 
      'padding' : 5, 
      'overlayShow' : true, 
      'speedIn' : 600, 
      'speedOut' : 500, 
      'transitionIn': 'elastic', 
      'transitionOut': 'elastic', 
      'easingIn' : 'easeOutBack', 
      'easingOut' : 'easeInBack', 
      'titlePosition' : 'inside', 
      'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { 
       $title = ''; 
       var current = currentIndex + 1; 
       if(current >= currentArray.length){ 
        $title += '<a href="javascript:;" onclick="$.fancybox.prev();" id="fancybox-prev-btn"></a>'; 
       } 
       if(current <= currentArray.length){ 
        $title += '<a href="javascript:;" onclick="$.fancybox.next();" id="fancybox-next-btn"></a>'; 
       } 
       $title += '<span class="fancybox-title">' + title + '<span class="fancybox-title-count">(image ' + (currentIndex + 1) + ' of ' + currentArray.length + ')</span></span><br class="clearBoth"/>'; 
       return $title; 
      } 
     }); 

Answer 1

試試這個（demo）：

'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { 
    $title = ''; 
    var current = currentIndex; 
    if(current > 0){ 
    $title += '<a href="#" onclick="$.fancybox.prev();return false;" id="fancybox-prev-btn"></a>'; 
    } 
    if(current < currentArray.length - 1){ 
    $title += '<a href="#" onclick="$.fancybox.next();return false;" id="fancybox-next-btn"></a>'; 
    } 
    $title += '<span class="fancybox-title">' + title + '<span class="fancybox-title-count">(image ' + (currentIndex + 1) + ' of ' + currentArray.length + ')</span></span><br class="clearBoth"/>'; 
    return $title; 
} 

我改變了鏈接有href="#"，而不是...只是個人喜好，因爲我不喜歡看到「JavaScript的」彈出時，我將鼠標懸停在鏈接上。

---

更新的fancybox 2.1+（demo）

CSS

#fancybox-prev-btn, #fancybox-next-btn { 
    position: absolute; 
    top: 0; 
    width: 30px; 
    height: 30px; 
    margin-left: -50px; 
    cursor: pointer; 
    z-index: 1102; 
    display: block; 
    background-image: url('http://i56.tinypic.com/s5wupy.png'); 
} 

#fancybox-prev-btn { 
    background-position: -40px -30px; 
    left: 0; 
} 
#fancybox-next-btn { 
    background-position: -40px -60px; 
    left: 30px; 
} 

的Javascript

$(selector).fancybox({ 

    beforeLoad: function() { 
     var title = ''; 
     if (this.index > 0) { 
      title += '<a href="#" onclick="$.fancybox.prev();return false;" id="fancybox-prev-btn"></a>'; 
     } 
     if (this.index < this.group.length - 1) { 
      title += '<a href="#" onclick="$.fancybox.next();return false;" id="fancybox-next-btn"></a>'; 
     } 
     title += '<span class="fancybox-title">' + $(this.element).find('img').attr('alt') + '<span class="fancybox-title-count">(image ' + (this.index + 1) + ' of ' + this.group.length + ')</span></span><br class="clearBoth"/>'; 
     this.title = title; 
    } 

});