Problem z wieloma galeriami Fancybox 2 „rel”
Widziałem kilka pytań dotyczących podobnych problemów, ale żadna z tych poprawek nie wydaje się działać w mojej sytuacji. Zasadniczo mam wiele galerii fantazyjnych na jednej stronie w całej witrynie, a gdy ktoś kliknie jeden pokaz slajdów na stronie, przechodzi z jednej galerii do następnej. Chcę, aby galerie / instancje fancybox były oddzielone od siebie. Zasadniczo potrzebuję kategorii „rel”, aby utrzymać galerie w oddzieleniu i nie wpadać na siebie. Każda pomoc jest bardzo ceniona Próbowałem kilku rzeczy, ale nic nie działa.
Oto jedyny dodatkowy Javascript, który dodałem, aby dodać przyciski mediów społecznościowych:
$(function(){
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
beforeShow: function () {
if (this.title) {
// New line
this.title += '<br />';
// Add tweet button
this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + "http://drewalbinson.com/" + '">Tweet</a> ';
// Add FaceBook like button
this.title += '<iframe src="http://www.facebook.com/plugins/like.php?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
}
},
afterShow: function() {
// Render tweet button
twttr.widgets.load();
},
helpers : {
title : {
type: 'inside'
}
}
});
});
Oto uproszczona wersja mojego HTML:
<!-- Gallery 1 -->
<div class="imagebox">
<a href="g1_img1.png" class="fancybox" rel="gallery1" title="1 of 2">
<img src="g1_img1_small.png" />
</a>
<a href="g1_img2.png" class="fancybox" rel="gallery1" title="2 of 2"></a>
</div>
<!-- Gallery 2 -->
<div class="imagebox">
<a href="g2_img1.png" class="fancybox" rel="gallery2" title="1 of 2">
<img src="g2_img1_small.png" />
</a>
<a href="g2_img2.png" class="fancybox" rel="gallery2" title="2 of 2"></a>
</div>
Dzięki!