Nadja Voss
Nadja Voss

Reputation: 11

Buttons for Fancybox & Elevatezoom

I'm trying to make a gallery, with 90 images, and each image must have a set of buttons: (i) open a fancybox gallery with detailed images; (ii) open a fancybox with the large image; (ii) activate/deactivate elevatezoom. I think that the elevate zoom act/deact could be inside the fancybox with the large image, but I couldn't manage that either. The activate/deactivate elevatezoom was working, then broke, and the gallery button show all the images with rel="gallery", what is right, but not what I was looking for. I don't know how to make different galleries for different buttons, and how to target the fullscreen button to the specific image.

FIDDLE

$(".fancybox").fancybox();
$(".launchergallery").on("click", function(){
$(".fancybox").eq(0).trigger("click");
});

$(".fancyboxfull").fancybox();
$(".launcherfull").on("click", function(){
$(".fancyboxfull").eq(0).trigger("click");
});

$(document).on('click','.elevatezoom-gallery',function(e){
  e.preventDefault();
  var dataZoomImg = $(this).attr('data-zoom-image');
  var dataImg = $(this).attr('data-image');
  //alert(dataImgg + dataZoomImg);
  var mainImg = $('.imgzoom');
  //mainImg.attr('src',dataImg).attr('data-zoom-image',dataZoomImg).elevateZoom();
// $("#img_01").data('zoom-image',dataZoomImg).elevateZoom();
  mainImg.attr('src',dataImg);
 mainImg.data('zoom-image',dataZoomImg).elevateZoom();
});

$(document).on('click','.zoomin',function(e){
  e.preventDefault();
  $("#main01").elevateZoom();
    $("#main02").elevateZoom();
})

$(document).on('click','.zoomout',function(e){
  e.preventDefault();
         $('.zoomContainer').remove();
         })

Upvotes: 1

Views: 588

Answers (0)

Related Questions