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; 
    } 

});