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

问题描述

我现在只需要帮助就可以完成此操作，显示标题中的上一个/下一个按钮的if语句无法正常工作.

I just need help finishing this off now, the if statement that displays the prev/next buttons in the title are not working correctly.

通过在标题上添加额外的向左/向右按钮来自定义标准的花式框，如此处的示例图片所示:

Customising the standard fancybox by adding extra left / right buttons to the title like in the example image here:

到目前为止，这是我添加的图像数量.可以将按钮添加到此，以使其更容易样式化吗?

This is what I have so far which adds the image count. Can the buttons be added to this, making it easier to style?

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

推荐答案

试试看(演示):

'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".

I changed the links to have a href="#" instead... just personal preference since I don't like seeing "javascript" pop up when I hover over a link.

针对FancyBox 2.1+的更新(演示)

Update for 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

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在标题中添加左/右按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！