Question

我现在需要帮助完成此操作，显示标题中prev / next按钮的if语句无法正常工作。

通过在标题中添加额外的左/右按钮来自定义标准花式框，如下图所示：

enter image description here

这是我到目前为止增加图像数量的方法。可以将按钮添加到此，使其更容易设计风格吗？

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

});

Fancybox将左/右按钮添加到标题中

1 个答案: