fancybox v3 opens and then closes almost simultaniously

[raynbow2411]

Hi,

Love fancybox v3 but have 2 questions that you may be able to help me with:

1) I am using fancybox v3 to popup a group images ([data-fancybox="images"] ) which are sitting in the jquery slick gallery plugin. This works well when clicking on an image in the slick gallery but I also use a button to popup the same gallery by calling : $('[data-fancybox="images"]').trigger('click'); This also works on the first few images but if I click on next a few times on the slick gallery and then click the button I see the popup open and then close almost simultaneously.

This is the setup for the fancybox:

$('[data-fancybox="images"]').fancybox({ loop : true, thumbs : { showOnStart : true }, margin : [ 44, 0, 90, 0 ] });

2) When I try to create an instance of my fancybox using:
var $instance = $("[data-fancybox]").fancybox();

and then try to active it using: $instance.activate();

I receive the error message: Uncaught TypeError: $instance.activate is not a function

I took this piece of code out of your documentation and am perplexed as to why it doesn't work.

Any guidance would be great!

Best Regards!

[fancyapps]

Hi, Thanks!

1) Should work fine - https://codepen.io/fancyapps/pen/gWvorB?editors=1010

2) Sorry about that, I only recently discovered that documentation contained wrong snippet. The docs for v3.1 have correct info - https://github.com/fancyapps/fancybox/tree/3.1

[raynbow2411]

Thanks for the quick reply.

For #1) I agree that the part you show me in CodePen works well. It's when I try to access the same gallery using a button that I encounter a problem.

See commentary within the code below:

$( ".productMainTextButtonsGrey" ).on( "click", function() {

var indSlide = $slideshow[0].slick.slickCurrentSlide();

if(indSlide == "undefined"){ indSlide =1; }

$('[data-fancybox="images"]').eq(indSlide).trigger("click");

-- The result is if I don't do .eq(1) then it doesn't open even if I have more than 6 images --

---------  OR I DO -----------------

var $instance = $("[data-fancybox]").fancybox({ loop : false, thumbs : { showOnStart : true }, margin : [ 44, 0, 90, 0 ],

       onComplete: function( instance, slide ) {
         wheelzoom(document.querySelectorAll('.fancybox-image'));
       }

});

$instance.activate();

-- I get the activate() is not a function error --

---------  OR I DO -----------------

$("[data-fancybox='images']").trigger("click");

-- this works but when I click on the close button, on an empty area or ESC it won't close until it cycles all the images in the gallery

});

Hope you can help.

Thanks!

[fancyapps]

I have no idea what are you trying to describe.

You could just fork any fancybox demo to create new one demonstrating your problem.

[raynbow2411]

Hi and thanks again for taking the time to look at this issue. You can see the issue I am describing in my fork of your fancybox demo:  https://codepen.io/raynbow/pen/vZYJPE 

On 2017-06-03 3:38:23 AM, Jānis Skarnelis notifications@github.com wrote: Closed #1462 [https://github.com/fancyapps/fancybox/issues/1462]. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [https://github.com/fancyapps/fancybox/issues/1462#event-1108768661], or mute the thread [https://github.com/notifications/unsubscribe-auth/AbzNnSOrnpmQlf3XzCPbMnXVjIudub3vks5sAQ1tgaJpZM4NunST].

[fancyapps]

You should have started with that! :)

When you do this -

$('[data-fancybox="images"]').trigger("click");

you are trigering click event on all links. So, to trigger only the first one, it would be like this:

$('[data-fancybox="images"]').eq(0).trigger("click");

https://codepen.io/anon/pen/VWwMba

[raynbow2411]

Sorry should have :)

I should have know that !  I did however notice that the thumbnails no longer show on initial start even if add this code:

 thumbs : { showOnStart : true  }

see here: https://codepen.io/raynbow/pen/XgWeqv

Thanks again for your help! On 2017-06-03 7:29:44 AM, Jānis Skarnelis notifications@github.com wrote: You should have started with that! :) When you do this - $('[data-fancybox="images"]').trigger("click"); you are trigering click event on all links. So, to trigger only the first one, it would be like this: $('[data-fancybox="images"]').eq(0).trigger("click"); https://codepen.io/anon/pen/VWwMba [https://codepen.io/anon/pen/VWwMba] — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [https://github.com/fancyapps/fancybox/issues/1462#issuecomment-305969166], or mute the thread [https://github.com/notifications/unsubscribe-auth/AbzNnUg0hy7oxsJLlKkqZPxh6QaE3Nmaks5sAUOngaJpZM4NunST].

[fancyapps]

That option has been renamed to "autoStart", so that all modules now have same option name for that.

On Sat, 3 Jun 2017 at 15:00, raynbow2411 notifications@github.com wrote:

Sorry should have :)

I should have know that ! I did however notice that the thumbnails no longer show on initial start even if add this code:

thumbs : { showOnStart : true }

see here: https://codepen.io/raynbow/pen/XgWeqv

Thanks again for your help! On 2017-06-03 7:29:44 AM, Jānis Skarnelis notifications@github.com wrote: You should have started with that! :) When you do this - $('[data-fancybox="images"]').trigger("click"); you are trigering click event on all links. So, to trigger only the first one, it would be like this: $('[data-fancybox="images"]').eq(0).trigger("click"); https://codepen.io/anon/pen/VWwMba [https://codepen.io/anon/pen/VWwMba] — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [ https://github.com/fancyapps/fancybox/issues/1462#issuecomment-305969166], or mute the thread [ https://github.com/notifications/unsubscribe-auth/AbzNnUg0hy7oxsJLlKkqZPxh6QaE3Nmaks5sAUOngaJpZM4NunST].

— You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub https://github.com/fancyapps/fancybox/issues/1462#issuecomment-305970659, or mute the thread https://github.com/notifications/unsubscribe-auth/ABAbZV87dJ0M_oNRUgx00PxTBTVTCUkHks5sAUrngaJpZM4NunST .

-- Janis Skarnelis fancyapps.com

[raynbow2411]

Ok thank you for all your support which is really great! I will be using Fancy Apps for all my projects whenever possible!  On 2017-06-03 8:21:18 AM, Jānis Skarnelis notifications@github.com wrote: That option has been renamed to "autoStart", so that all modules now have same option name for that.

On Sat, 3 Jun 2017 at 15:00, raynbow2411 notifications@github.com wrote:

Sorry should have :)

I should have know that ! I did however notice that the thumbnails no longer show on initial start even if add this code:

thumbs : { showOnStart : true }

see here: https://codepen.io/raynbow/pen/XgWeqv

Thanks again for your help! On 2017-06-03 7:29:44 AM, Jānis Skarnelis notifications@github.com wrote: You should have started with that! :) When you do this - $('[data-fancybox="images"]').trigger("click"); you are trigering click event on all links. So, to trigger only the first one, it would be like this: $('[data-fancybox="images"]').eq(0).trigger("click"); https://codepen.io/anon/pen/VWwMba [https://codepen.io/anon/pen/VWwMba] — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [ https://github.com/fancyapps/fancybox/issues/1462#issuecomment-305969166], or mute the thread [ https://github.com/notifications/unsubscribe-auth/AbzNnUg0hy7oxsJLlKkqZPxh6QaE3Nmaks5sAUOngaJpZM4NunST].

— You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub https://github.com/fancyapps/fancybox/issues/1462#issuecomment-305970659, or mute the thread https://github.com/notifications/unsubscribe-auth/ABAbZV87dJ0M_oNRUgx00PxTBTVTCUkHks5sAUrngaJpZM4NunST .

-- Janis Skarnelis fancyapps.com

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [https://github.com/fancyapps/fancybox/issues/1462#issuecomment-305971706], or mute the thread [https://github.com/notifications/unsubscribe-auth/AbzNnb_5vTje_f4dYrz7bgGqpRwPr6Qdks5sAU-9gaJpZM4NunST].

[raynbow2411]

Hi,

One more question if you can help me. I am trying to use image zoom using a mouse wheel :http://www.jacklmoore.com/wheelzoom/

When I add the code if works on the first slide but when I click on the next arrow the next slide shows up small and then disappears. There seems to be a conflict! I have added this to Codepen: https://codepen.io/raynbow/pen/XgWeqv 

Do you know of any issue that way be causing this?

Best Regards, Ray On 2017-06-03 8:45:52 AM, Ray Developer rayvdev@gmail.com wrote: Ok thank you for all your support which is really great! I will be using Fancy Apps for all my projects whenever possible!  On 2017-06-03 8:21:18 AM, Jānis Skarnelis notifications@github.com wrote: That option has been renamed to "autoStart", so that all modules now have same option name for that.

On Sat, 3 Jun 2017 at 15:00, raynbow2411 notifications@github.com wrote:

Sorry should have :)

I should have know that ! I did however notice that the thumbnails no longer show on initial start even if add this code:

thumbs : { showOnStart : true }

see here: https://codepen.io/raynbow/pen/XgWeqv

Thanks again for your help! On 2017-06-03 7:29:44 AM, Jānis Skarnelis notifications@github.com wrote: You should have started with that! :) When you do this - $('[data-fancybox="images"]').trigger("click"); you are trigering click event on all links. So, to trigger only the first one, it would be like this: $('[data-fancybox="images"]').eq(0).trigger("click"); https://codepen.io/anon/pen/VWwMba [https://codepen.io/anon/pen/VWwMba] — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [ https://github.com/fancyapps/fancybox/issues/1462#issuecomment-305969166], or mute the thread [ https://github.com/notifications/unsubscribe-auth/AbzNnUg0hy7oxsJLlKkqZPxh6QaE3Nmaks5sAUOngaJpZM4NunST].

— You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub https://github.com/fancyapps/fancybox/issues/1462#issuecomment-305970659, or mute the thread https://github.com/notifications/unsubscribe-auth/ABAbZV87dJ0M_oNRUgx00PxTBTVTCUkHks5sAUrngaJpZM4NunST .

-- Janis Skarnelis fancyapps.com

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [https://github.com/fancyapps/fancybox/issues/1462#issuecomment-305971706], or mute the thread [https://github.com/notifications/unsubscribe-auth/AbzNnb_5vTje_f4dYrz7bgGqpRwPr6Qdks5sAU-9gaJpZM4NunST].

[raynbow2411]

Hi,

Never mind I found the solution to my issue which was to apply the mouse wheel zoom to the currently active image's class (.fancybox-slide--current .fancybox-image) in the afterShow event.

Best Regards, Ray On 2017-06-04 5:56:24 PM, Ray Developer rayvdev@gmail.com wrote: Hi,

One more question if you can help me. I am trying to use image zoom using a mouse wheel :http://www.jacklmoore.com/wheelzoom/

When I add the code if works on the first slide but when I click on the next arrow the next slide shows up small and then disappears. There seems to be a conflict! I have added this to Codepen: https://codepen.io/raynbow/pen/XgWeqv 

Do you know of any issue that way be causing this?

Best Regards, Ray On 2017-06-03 8:45:52 AM, Ray Developer rayvdev@gmail.com wrote: Ok thank you for all your support which is really great! I will be using Fancy Apps for all my projects whenever possible!  On 2017-06-03 8:21:18 AM, Jānis Skarnelis notifications@github.com wrote: That option has been renamed to "autoStart", so that all modules now have same option name for that.

On Sat, 3 Jun 2017 at 15:00, raynbow2411 notifications@github.com wrote:

Sorry should have :)

I should have know that ! I did however notice that the thumbnails no longer show on initial start even if add this code:

thumbs : { showOnStart : true }

see here: https://codepen.io/raynbow/pen/XgWeqv

Thanks again for your help! On 2017-06-03 7:29:44 AM, Jānis Skarnelis notifications@github.com wrote: You should have started with that! :) When you do this - $('[data-fancybox="images"]').trigger("click"); you are trigering click event on all links. So, to trigger only the first one, it would be like this: $('[data-fancybox="images"]').eq(0).trigger("click"); https://codepen.io/anon/pen/VWwMba [https://codepen.io/anon/pen/VWwMba] — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [ https://github.com/fancyapps/fancybox/issues/1462#issuecomment-305969166], or mute the thread [ https://github.com/notifications/unsubscribe-auth/AbzNnUg0hy7oxsJLlKkqZPxh6QaE3Nmaks5sAUOngaJpZM4NunST].

— You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub https://github.com/fancyapps/fancybox/issues/1462#issuecomment-305970659, or mute the thread https://github.com/notifications/unsubscribe-auth/ABAbZV87dJ0M_oNRUgx00PxTBTVTCUkHks5sAUrngaJpZM4NunST .

-- Janis Skarnelis fancyapps.com

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [https://github.com/fancyapps/fancybox/issues/1462#issuecomment-305971706], or mute the thread [https://github.com/notifications/unsubscribe-auth/AbzNnb_5vTje_f4dYrz7bgGqpRwPr6Qdks5sAU-9gaJpZM4NunST].

[raynbow2411]

Hi,

Is there a way to stop the slides from being swipe vertically on both smartphones and desktops (mouse movement dragging)?

Regards, Ray On 2017-06-04 11:18:05 PM, Ray Developer rayvdev@gmail.com wrote: Hi,

Never mind I found the solution to my issue which was to apply the mouse wheel zoom to the currently active image's class (.fancybox-slide--current .fancybox-image) in the afterShow event.

Best Regards, Ray On 2017-06-04 5:56:24 PM, Ray Developer rayvdev@gmail.com wrote: Hi,

One more question if you can help me. I am trying to use image zoom using a mouse wheel :http://www.jacklmoore.com/wheelzoom/

When I add the code if works on the first slide but when I click on the next arrow the next slide shows up small and then disappears. There seems to be a conflict! I have added this to Codepen: https://codepen.io/raynbow/pen/XgWeqv 

Do you know of any issue that way be causing this?

Best Regards, Ray On 2017-06-03 8:45:52 AM, Ray Developer rayvdev@gmail.com wrote: Ok thank you for all your support which is really great! I will be using Fancy Apps for all my projects whenever possible!  On 2017-06-03 8:21:18 AM, Jānis Skarnelis notifications@github.com wrote: That option has been renamed to "autoStart", so that all modules now have same option name for that.

On Sat, 3 Jun 2017 at 15:00, raynbow2411 notifications@github.com wrote:

Sorry should have :)

I should have know that ! I did however notice that the thumbnails no longer show on initial start even if add this code:

thumbs : { showOnStart : true }

see here: https://codepen.io/raynbow/pen/XgWeqv

Thanks again for your help! On 2017-06-03 7:29:44 AM, Jānis Skarnelis notifications@github.com wrote: You should have started with that! :) When you do this - $('[data-fancybox="images"]').trigger("click"); you are trigering click event on all links. So, to trigger only the first one, it would be like this: $('[data-fancybox="images"]').eq(0).trigger("click"); https://codepen.io/anon/pen/VWwMba [https://codepen.io/anon/pen/VWwMba] — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [ https://github.com/fancyapps/fancybox/issues/1462#issuecomment-305969166], or mute the thread [ https://github.com/notifications/unsubscribe-auth/AbzNnUg0hy7oxsJLlKkqZPxh6QaE3Nmaks5sAUOngaJpZM4NunST].

— You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub https://github.com/fancyapps/fancybox/issues/1462#issuecomment-305970659, or mute the thread https://github.com/notifications/unsubscribe-auth/ABAbZV87dJ0M_oNRUgx00PxTBTVTCUkHks5sAUrngaJpZM4NunST .

-- Janis Skarnelis fancyapps.com

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [https://github.com/fancyapps/fancybox/issues/1462#issuecomment-305971706], or mute the thread [https://github.com/notifications/unsubscribe-auth/AbzNnb_5vTje_f4dYrz7bgGqpRwPr6Qdks5sAU-9gaJpZM4NunST].

[raynbow2411]

Hi again, I did find how to stop the slides from moving vertically by using:

touch : { vertical : false,  // Allow to drag content vertically momentum : false   // Continue movement after releasing mouse/touch when panning }

However what I consider a bug and FYI  the afterShow event is firing each time you grab-drag-release a slide. This causes the slide attached to Wheelzoom to disappear. I had to create a workaround to stop this undesired effect.  You should possibly modify your code so that the afterShow doesn't fire multiple times for the same slide.

You can look at my code: https://codepen.io/raynbow/pen/XgWeqv and check the console to view the multiple firing of this event.

Regards, Ray