没有href的Fancybox画廊? [英] Fancybox gallery without a href?
问题描述
我想在不使用链接(a href)的情况下使用img制作fancybox画廊吗?我该怎么做?
I want to make fancybox gallery with img without using links (a href)? How i can do that?
HTML:
<div id="foo2">
<img src="/images/banners/001.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/002.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/003.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/004.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/005.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/006.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/007.jpg" rel="downslider" alt="" width="80" height="80" />
<img src="/images/banners/008.jpg" rel="downslider" alt="" width="80" height="80" />
.....
</div>
JS(现在它可用于单个图像,没有画廊效果):
JS (now it works with single images, without gallery effect):
$("#foo2 img").click(function(e) {
var url = $(this).attr('src');
var rel = $(this).attr('rel');
var content = '<img src="' + url + '" rel="'+ rel + '" />';
$.fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false,
'content' : content
});
});
推荐答案
除非使用fancybox脚本本身设置画廊的所有元素,否则不能使用手动方法.click()
来拥有画廊:
You cannot have a gallery using the manual method .click()
unless you set all the elements of the gallery inside the fancybox script itself like:
$("#foo2 img").click(function(e) {
$.fancybox([
'images/01.jpg',
'images/02.jpg', // etc
],{
// fancybox options
'type': 'image' // etc.
}); // fancybox
}); // click
但是,要使其按您希望的方式工作并模拟常规的fancybox画廊而不使用链接(具有href
属性的<a>
标签),则需要使用自己的自定义导航方法来创建自己的函数.
However, to make it work the way you want and simulate a regular fancybox gallery without using links (<a>
tags with a href
attributes ), you would need to create your own function with your own custom navigation methods.
不更改您的HTML
,请尝试以下JS
:
Without changing your HTML
, try this JS
:
<script type="text/javascript">
function fancyBoxMe(index){
var gallerySize = $("#foo2 img").size();
if((index+1) == gallerySize){ nexT = 0 } else { nexT = index+1}
if(index == 0){ preV = (gallerySize-1) } else { preV = index-1}
var tarGet = $('#foo2 img').eq(index).attr('src');
$.fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false,
'href': tarGet,
'titlePosition': 'inside',
'titleFormat' : function(){
return 'Image '+(index+1)+' of '+gallerySize+'<a id="preV" href="javascript:;" onclick="fancyBoxMe('+preV+')">prev</a> <a id="nexT" href="javascript:;" onclick="fancyBoxMe('+nexT+')">next</a>';
}
}); // fancybox
} // fancyBoxMe
$(document).ready(function() {
$("#foo2 img").each(function(i){
$(this).bind('click', function(){
fancyBoxMe(i);
}); //bind
}); //each
}); // ready
</script>
这会从<img>
标签创建一个fancybox画廊,并具有不错的循环效果.另外,只需使用CSS
一点,我们就可以使用fancybox箭头图标进行导航控制. 在此处查看有效示例.
That creates a fancybox gallery from the <img>
tags, with a nice cycling effect. Also, with a little of CSS
we can have the navigation controls using the fancybox arrow icons. See a working example here.
由于导航控件是完全手动的,因此实际上不需要<img>
标签上的rel
属性.
Since the navigation control is totally manual, you don't actually need the rel
attribute on the <img>
tag.
请注意,上面的代码适用于Fancybox v1.3.x(由于API选项,我假设您使用的是v1.3.x).
Please notice that the code above is for Fancybox v1.3.x (I assumed you are using v1.3.x because the API options).
这篇关于没有href的Fancybox画廊?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!