I have a primary image you click to open fancybox 3, I also have a thumbnail gallery which is part of the same fancybox group that when you roll over them, they replace the primary image with the one you rolled over - the purpose is to get a "zoom" affect but also offer the fancybox gallery for the rest of the gallery at the same time. Obviously as the primary item is in the group and also in the thumbnails I get a duplicate in the fancybox view.
How do I get round this? Here is my attempt, when I try to manipulate what's in the group using Jquery, however, it seems to be ignored when you reopen the fancybox. I wonder if there is a way to unbind and rebind the group (?) but I just can't find it in the documentation.
<!-- Primary Image -->
<p>
<a href="/image1.jpg?w=800&h=800&scale=both&bgcolor=white" data-fancybox="fancybox-group" class="fancyboxpreviewlink">
<img class="fancyboxpreviewimage" src="/image1.jpg?w=800&h=800&scale=both&bgcolor=white" />
</a>
</p>
<!-- Fancybox Gallery -->
<a href="/image1.jpg?w=800&h=800&scale=both&bgcolor=white" data-fancybox="" class="fancyboxthumb"
data-thumb="image1.jpg?w=62&h=62&scale=canvas&bgcolor=white">
<img src="/image1.jpg?w=62&h=62&scale=canvas&bgcolor=white" />
</a>
<a href="/image2.jpg?w=800&h=800&scale=both&bgcolor=white" data-fancybox="fancybox-group" class="fancyboxthumb"
data-thumb="/image2.jpg?w=62&h=62&scale=canvas&bgcolor=white">
<img src="/image2.jpg?w=62&h=62&scale=canvas&bgcolor=white" /></a>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
//Manipulate group items
$(document).ready(function () {
$('.fancyboxthumb').on("mouseenter", function () {
var $theThumb = $(this);
var thisHref = ($theThumb.attr("href"));
$('.group').unbind('.fancyboxthumb')
$('.fancyboxthumb').each(function (i, obj)
{
console.log($(obj));
console.log("b4: " + $(obj).data("fancybox"));
if (!($theThumb.is($(obj))))
$(obj).data("fancybox", "fancybox-group");
else
$theThumb.data("fancybox", "");
console.log("after: " + $(obj).data("fancybox"));
});
$('.fancyboxpreviewlink').attr("href", thisHref);
$('.fancyboxpreviewimage').attr("src", thisHref);
});
$('.fancyboxthumb').on("click", function (event) {
event.preventDefault();
event.stopPropagation();
});
});
</script>
Something like this, I hope you will get the idea:
var index = 0;
var $thumbs = $('.thumbs').children();
var $primary = $('.primary a');
$primary.on('click', function() {
// Clone thumbs object
var $what = $.extend({}, $thumbs);
// Replace corresponding link inside thumbs with primary
$what[ index ] = this;
// Open fancyBox manually
$.fancybox.open( $what, {}, index );
return false;
});
$thumbs.mouseover(function() {
// Find index
index = $thumbs.index( this );
// Update primary link
$primary.attr('href', $(this).attr('href'));
$primary.find('img').attr('src', $(this).find('img').attr('src') );
});