我在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),右箭头(指向下一图像)也是如此。
谢谢大家!
答案 0 :(得分:0)
基本上你必须验证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
}
注意我分配给箭头图片的名称,这样您就可以知道哪张图片在哪里。