У меня есть этот проект, где я не могу комбинировать изображения в один композитный, поэтому у меня должно быть 2 изображения на один оверлей. До сих пор эта скрипка ниже делает трюк, но я не могу для жизни меня понять, как получить спину и следующие кнопки, чтобы связать их друг с другом.
http://jsfiddle.net/PFVxK/1344/
HTML
<div class="image">
<div rel="gallery1">
<img src="http://placehold.it/300x300/B7AF90/FFFFFF&text=Before" />
<img src="http://placehold.it/300x300/B7AF90/FFFFFF&text=After" />
<p class="title">Title Goes Here</p>
</div>
<br style="clear:both;" />
</div>
<div class="image">
<div rel="gallery1">
<img src="http://placehold.it/300x300/B7AF90/FFFFFF&text=Before2" />
<img src="http://placehold.it/300x300/B7AF90/FFFFFF&text=After2" />
<p class="title">Title Goes Here</p>
</div>
<br style="clear:both;" />
</div>
JQuery
$(".image").click(function () {
$.fancybox({
type: 'html',
content: $(this).children().html()
}).attr('rel', 'gallery1');
});
Проблема в том, что вы запускаете fancybox с помощью ручного метода (click
), чтобы вы не могли иметь галерею таким образом, если вы не установите элементы галереи внутри самого скрипта.
Попробуйте вместо этого вариант:
var images = [];
$(".image").each(function(i){
images[i] = $(this).children().html();
$(this).on("click", function(){
$.fancybox(images,{
index: i,
type: 'html'
});
})
});
Обратите внимание, что .on()
требует jQuery v1. 7+
См. JSFIDDLE