花式框标题导航箭头答案

【问题标题】：fancybox title navigation arrows花式框标题导航箭头
【发布时间】：2011-12-09 02:32:23
【问题描述】：

我在fancybox 窗口中插入了基于图像的小导航箭头，一旦打开fancybox，用户就可以导航到相关图像。

代码如下：

function formatTitle(title, currentArray, currentIndex, currentOpts) {
    return '<div id="tip7-title"> (title && title.length ? '<b>' + title + '</b>' : '' ) + '<a href="javascript:;" onclick="$.fancybox.prev();"><img class="left" src="" /></a>' + ' Image ' + (currentIndex + 1) + ' of ' + currentArray.length + ' <a href="javascript:;" onclick="$.fancybox.next();"><img class="right" src="" /></a> </div>';
}

如何设置箭头的格式，以便将左箭头（指向上一张图像）更改为不同的图像，并且当第一张图像出现在屏幕上时不可点击（即）？此外，当第三张图像出现在屏幕上时（即），右箭头（指向下一张图像）也是如此。

谢谢大家！

【问题讨论】：

我假设您使用的是 Fancybox v1.3.x，不是吗？
是的，很抱歉没有包括在内。

标签： navigation fancybox

【解决方案1】：

基本上，您必须验证 3 个状态并相应地返回您的（箭头）图像：

当currentIndex = 0 时，第一个图像在屏幕上，然后返回一个不同的左箭头图像，没有<a> 标记。
当currentIndex = (currentArray.length - 1)，最后一个图像出现在屏幕上时，返回一个不同的右箭头图像，没有<a>标签包裹它。
否则显示两个可点击的箭头。

顺便说一句，您上面发布的脚本有一些语法错误，所以我更正了它。

因此，对于具有此 html 的示例库：

<a class="fancyLink" rel="gallery" href="images/01.jpg">open gallery</a>
<a class="fancyLink" rel="gallery" href="images/02.jpg"></a>
<a class="fancyLink" rel="gallery" href="images/03.jpg"></a>

我将使用这个脚本（Fancybox v1.3.x）：

$(document).ready(function() {
    $('.fancyLink').fancybox({
      'titleFormat': formatTitle,
      'showNavArrows': false,
      'titlePosition': 'inside'
    }); // fancybox
}); // ready

以及您的（修改后的）“formatTitle”函数：

function formatTitle(title, currentArray, currentIndex, currentOpts) {
    if(currentIndex == 0) {
        return '<div id="tip7-title">'+ (title && title.length ? '<b>' + title +'</b>' : '' ) + '<img class="left" src="leftNoClick.png" />' + ' Image ' + (currentIndex + 1) + ' of ' + currentArray.length + ' <a href="javascript:;" onclick="$.fancybox.next();"><img class="right" src="rightYesClick.png" /></a></div>';
    }else if (currentIndex == (currentArray.length - 1)){
        return '<div id="tip7-title">'+ (title && title.length ? '<b>' + title +'</b>' : '' ) + '<a href="javascript:;" onclick="$.fancybox.prev();"><img class="left" src="leftYesClick.png" /></a>' + ' Image ' + (currentIndex + 1) + ' of ' + currentArray.length + ' <img class="right" src="rightNoClick.png" /></div>';
    } else {
        return '<div id="tip7-title">'+ (title && title.length ? '<b>' + title +'</b>' : '' ) + '<a href="javascript:;" onclick="$.fancybox.prev();"><img class="left" src="leftYesClick.png" /></a>' + ' Image ' + (currentIndex + 1) + ' of ' + currentArray.length + ' <a href="javascript:;" onclick="$.fancybox.next();"><img class="right" src="rightYesClick.png" /></a> </div>';
    } // if
}

注意我为箭头图像指定的名称，以便您知道图像的位置。

【讨论】：