Navigation fancybox标题导航箭头

我在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>';
}

如何设置箭头的格式，使指向前一个图像的左箭头更改为不同的图像，并且当第一个图像出现在屏幕上（即）时不可单击？同样，当第三个图像出现在屏幕上时，指向下一个图像的右箭头也是如此，即

---

谢谢大家

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

当currentIndex=0时，第一个图像显示在屏幕上，然后返回一个不同的左箭头图像，没有标记将其环绕

当currentIndex=currentArray.length-1时，屏幕上显示最后一个图像，然后返回一个不同的右箭头图像，该图像没有标记

否则，显示两个可单击箭头

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

因此，对于使用此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>

以及修改后的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
}

---

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

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

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
}