jquery - Fancybox 在标题中添加左/右按钮

Question

我现在只需要帮助完成此操作，在标题中显示上一个/下一个按钮的 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;
    }

});