Fancybox - 将功能应用于多个元素 [英] Fancybox - apply a function to several elements
问题描述
以下源代码由Cristiano G. Carvalho在回答以下问题时发布：
< div
< a href =＃class =manualfancybox>手动呼叫Fancybox< / a>
< div class =details_gallery_min>
< a rel =detailshref =max / 1.jpgclass =fancybox>< img src =min / 1.jpgalt =/><一个>
< a rel =detailshref =max / 2.jpgclass =fancybox>< img src =min / 2.jpgalt =/><一个>
< a rel =detailshref =max / 3.jpgclass =fancybox>< img src =min / 3.jpgalt =/><一个>
< a rel =detailshref =max / 4.jpgclass =fancybox>< img src =min / 4.jpgalt =/><一个>
< / div>
< / div>
< script>
$（document）.ready（function（）{
$（。manualfancybox）。click（function（）{
var photos = new Array（）;
$（。details_gallery_min a）。each（function（）{
href = $（this）.attr（href）;
title = $（this）.attr（title）;
photos.push（{'href'：href，'title'：title}）
}）;
jQuery.fancybox（照片，
{'transitionIn'：'elastic'，
'easingIn'：'easeOutBack'，
'transitionOut'：'elastic'，
'easingOut'：'easeInBack'，
'opacity'：false，
'titleShow'：true，
'titlePosition'：'over'，
'type'：'image '，
'titleFromAlt'：true
}
）;
}）;
}）;
< / script>
如果您只有一个图库（ .details_gallery_min em>）。
我试图改变
$（。details_gallery_min a）。each（function（）{
to
$（。galleryone a，.gallerytwo a）。each（function（）{
但它只适用于.galleryone a，当我点击名为gallerytwo的链接时，它会打开galleryone。我的HTML代码是正确的。
我的问题是：
如果我有多个链接打开不同的画廊，我想对所有图库使用相同的行为（过渡，缓动等）？
.each（）方法将会有一个（n）（可争论的）内存和性能方面的成本很高，如果你在图库中有多个图像，就更多了。
我没有看到任何理由来遍历每个元素并构建如果一个简单的fancybox代码和手动事件处理程序可以解决这个问题，那么fancybox gallery（再次）会在数组中。但这完全是我个人的看法。例如，如果你有这样的html：
< h3> gallery one< / h3>
< div id =gallery_one>
< a rel =galleryoneclass =fancyboxhref =http://fancyapps.com/fancybox/demo/1_b.jpg>< img src =http：// fancyapps。 com / fancybox / demo / 1_s.jpgalt =/>< / a>
< a rel =galleryoneclass =fancyboxhref =http://fancyapps.com/fancybox/demo/2_b.jpg>< img src =http：// fancyapps。 com / fancybox / demo / 2_s.jpgalt =/>< / a>
...等
< / div>
< h3> gallery two< / h3>
< div id =gallery_two>
< a rel =gallerytwoclass =fancyboxhref =http://fancyapps.com/fancybox/demo/3_b.jpg>< img src =http：// fancyapps。 com / fancybox / demo / 3_s.jpgalt =/>< / a>
< a rel =gallerytwoclass =fancyboxhref =http://fancyapps.com/fancybox/demo/4_b.jpg>< img src =http：// fancyapps。 com / fancybox / demo / 4_s.jpgalt =/>< / a>
...等。
< / div>
重写我的自己的回答，我会设置任何需要的手动链接：
< a class =manualfancyboxdata-gallery =gallery_onehref =＃nogo>手动拨打第一个图库< / a>
< a class =manualfancyboxdata-gallery =gallery_twohref =＃nogo>手动拨打第二个图片库< / a>
注意我添加了一个HTML5 然后，为所有画廊添加fancybox代码 并将事件处理程序绑定到手动fancybox调用，如： data- gallery 属性，用于指示链接所针对的图库（ data-gallery 值与每个图库的父容器的ID匹配） p>
$（。 fancybox）。fancybox（{
// API options here
}）;
$ （click，function（）{
var gallery =＃+ $（this）.data（）。b $ b
$（。manualfancybox）。 （gallery）;
$（gallery）.find（。fancybox）。eq（0）.click（）;
return false;
}）;
设置 .eq（）取决于画廊应该从哪个图像开始。
$ b
注意： .on（）需要jQuery v1.7 +
This source code below was posted by Cristiano G. Carvalho in answer to the question: calling fancybox gallery with other link made by another user.
<div class="details_gallery">
<a href="#" class="manualfancybox">Manual Call Fancybox</a>
<div class="details_gallery_min">
<a rel="details" href="max/1.jpg" class="fancybox"><img src="min/1.jpg" alt="" /></a>
<a rel="details" href="max/2.jpg" class="fancybox"><img src="min/2.jpg" alt="" /></a>
<a rel="details" href="max/3.jpg" class="fancybox"><img src="min/3.jpg" alt="" /></a>
<a rel="details" href="max/4.jpg" class="fancybox"><img src="min/4.jpg" alt="" /></a>
</div>
</div>
<script>
$(document).ready(function(){
$(".manualfancybox").click(function() {
var photos = new Array();
$(".details_gallery_min a").each(function(){
href = $(this).attr("href");
title = $(this).attr("title");
photos.push({'href': href, 'title': title})
});
jQuery.fancybox(photos ,
{ 'transitionIn' : 'elastic',
'easingIn' : 'easeOutBack',
'transitionOut' : 'elastic',
'easingOut' : 'easeInBack',
'opacity' : false,
'titleShow' : true,
'titlePosition' : 'over',
'type' : 'image',
'titleFromAlt' : true
}
);
});
});
</script>
And it DOES work... if you have ONLY ONE gallery (.details_gallery_min in the example).
I've tried to change
$(".details_gallery_min a").each(function(){
to
$(".galleryone a, .gallerytwo a").each(function(){
but it only works for ".galleryone a", when I click on the link that calls "gallerytwo" it opens "galleryone". My HTML code is correct.
My question is:
What if I have multiple links opening different galleries and I want to use the same behaviors (transition, easing, etc.) to all galleries?
Well, while Cristiano G. Carvalho's answer works, I think it is overdoing things. The array() + the .each() method will have a(n) (arguable) high cost in terms of memory and performance, much more if you have several images in your galleries.
I don't see any reason to iterate through every element and build the fancybox gallery (again) inside an array if a simple fancybox code and manual event handlers can tackle the issue. But that is entirely my personal opinion.
So for instance, if you have an html like this :
<h3>gallery one</h3>
<div id="gallery_one">
<a rel="galleryone" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<a rel="galleryone" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
... etc.
</div>
<h3>gallery two</h3>
<div id="gallery_two">
<a rel="gallerytwo" class="fancybox" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a>
<a rel="gallerytwo" class="fancybox" href="http://fancyapps.com/fancybox/demo/4_b.jpg"><img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt=""/></a>
...etc.
</div>
Rewriting my own answer to the same question, I would set any manual links I need like :
<a class="manualfancybox" data-gallery="gallery_one" href="#nogo">manual call to first gallery</a>
<a class="manualfancybox" data-gallery="gallery_two" href="#nogo">manual call to second gallery</a>
Notice that I added an HTML5 data-gallery attribute that indicates what gallery the link is targeting to (the data-gallery value matches the ID of the parent container of each gallery)
Then, add the fancybox code for all galleries
$(".fancybox").fancybox({
// API options here
});
and bind the event handler to the manual fancybox calls like :
$(".manualfancybox").on("click", function(){
var gallery = "#" + $(this).data("gallery");
$(gallery).find(".fancybox").eq(0).click();
return false;
});
Set the value of .eq() depending on what image the gallery should start from.
See JSFIDDLE
NOTE : .on() requires jQuery v1.7+
这篇关于Fancybox - 将功能应用于多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
