fancybox标题导航箭头

时间:2011-12-09 02:32:23

标签: 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>';
}

如何格式化箭头以使左箭头(指向前一图像)变为不同的图像,并且当第一图像在屏幕上时不可点击(即&lt;图像1的3&gt; )?此外,当第三图像在屏幕上时(即&lt;图像3的3),右箭头(指向下一图像)也是如此。

谢谢大家!

1 个答案:

答案 0 :(得分:0)

基本上你必须验证3个状态并相应地返回你的(箭头)图像:

  1. currentIndex = 0时,第一张图片出现在屏幕上,然后返回一张不包含<a>标记的左箭头图像。

  2. currentIndex = (currentArray.length - 1)时,最后一张图片出现在屏幕上,然后返回一个不包含<a>标记的右箭头图像。

  3. 否则显示两个可点击的箭头。

  4. 顺便说一下,你上面发布的脚本有一些语法错误,所以我纠正了它。

    对于带有此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
    }
    

    注意我分配给箭头图片的名称,这样您就可以知道哪张图片在哪里。