Welcome to Fancyapps UI Discussions!

[fancyapps]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

[P4KM4N]

First thank you for this amazing plugin! And congrats for this new awesome version!

I'm trying to add Fancyapps UI to a a WordPress theme I'm developing with Roots/Sage 10, who using Laravel Mix (webpack).

• I installed it with Yarn (I can see the folder in node_module).
• I setup the import in my app.js (main js file) like so:

import { Fancybox, Carousel, Panzoom } from "@fancyapps/ui";

$(document).ready(() => {

  Fancybox.bind("[data-fancybox]", {
    // Your options go here
  });
  console.log(Fancybox);

});

• In my console I get this message due to the console.log(Fancybox);
  class T extends r{constructor(t,i={}){L=function(){let t=!1;return document.createElement("div").focus({get preventScroll(){return t=!0,!1}}),t}(),super(function(t,i){const s=e(!0,{},t[i.startIndex]||{});r…
  But if I try to write Fancybox in the console I get:

VM767:1 Uncaught ReferenceError: Fancybox is not defined
    at <anonymous>:1:1

I'm clueless how to make it work, I'm trying for help here, sorry if it's not relevant, I will also ask for help on Roots forums, if I get answer I will post it here.

Thanks.

[fancyapps]

Hi,

That is actually how it should be. If you wish to make it accessible from anywhere (including console), simply make it global:

window.Fancybox = Fancybox;

FYI, there is no need to use $(document).ready(() => {}), because Fancybox uses event delegation and it will work for all elements that match the selector, now or in the future.

[P4KM4N]

Wow! Thanks for that super fast answer Jānis!
It work 🙌
I'm a real noob in JS, especially with vanilla.

[serg-by]

Hello!
How to add arrow control to carousel?

[fancyapps]

Keyboard navigation is also enabled by default.

[serg-by]

strange but doesn't work. I cannot switch the slide using the arrows on the keyboard.

[Komarovski]

In my case navigation between slides with keyboard arrows also doesn't work. Here's how I'm implementing my carousel:
new Carousel(document.getElementById("FancyCarouselFlexGallery"), { infinite:false, center:true, slidesPerPage:1, transition:"slide", Dots:false, });

[fancyapps]

@Komarovski Keyboard navigation for the Carousel is not provided "out of the box", you can easily add it yourself, example:

const myCarousel = new Carousel(container, options);

document.addEventListener("keydown", (e) => {
  if (e.key === "ArrowLeft") {
    myCarousel.slidePrev();
  } else if (e.key === "ArrowRight") {
    myCarousel.slideNext();
  }
})

https://jsfiddle.net/g1h204xb/

[Komarovski]

@fancyapps Thank you very much! 👍

[laugepetersen]

How do we overwrite the default options for html instances? I can't make it work with the documentation.

I simply wanna add "MY_CUSTOM_CLASS" class to the "tpl" in the html5video object.

Playground Demo: https://fancyapps.com/playground/DL

[fancyapps]

Options for any plugin are included in the option named after the plugin, example:

Fancybox.bind("[data-fancybox]", {
  Html : {
    // Html plugin optionss
  },
  Image : {
    // Image plugin options
 }
});

[laugepetersen]

Thanks, didn't get that anywhere in docs :)

Another one is how the ScrollLock plugin is activated then?

ScrollLock: true ?

[fancyapps]

ScrollLock is enabled by default, to disable, use ScrollLock: false (it does not work perfectly on iOS, sadly, a trillion dollar company does not care much about their software).

[laugepetersen]

Okay, that’s why it didn’t work.
Fixed with css 👍🏻

[laugepetersen]

Fancybox with Videojs minor bugs.
I've created it before where the fancybox v3 opens a video.js video.
But in this update v4 all the range/sliders input fields on the video such as volume bar and progress bar doesn't work within the fancybox. Any information on that?

[fancyapps]

Any demo?

[laugepetersen]

Yes, just quick sample of same settings as mine.

Fancybox Beta V4 with Video.js 7.15.

Demo: https://codepen.io/laugepetersen/pen/WNOeYqO?editors=1000

[fancyapps]

Add this snippet to disable touch actions:

"Carousel.Panzoom.touchStart": (fancybox, carousel, panzoom, event) => {
  if (fancybox.getSlide().$content.contains(event.target)) {
    return false;
  }
}

See this demo - https://fancyapps.com/playground/FY

btw, play.js is poorly designed, Plyr does not need this, because it uses semantic HTML.

[laugepetersen]

Thanks, worked out.

Do you mean video.js (play.js you wrote).

[fancyapps]

Yes, sorry, it is video.js

[nickelswitte]

Hi,

how do I set the maxScale of my FancyBox to another value? Do I have to do it via PanZoom or via Fancybox?
I find no example in the docs and unfortunately I am not experienced enough to deduce the answer myself.

Thanks!

[fancyapps]

Hi, What exactly do you want to archive? Do you want to increase the size of the image proportionally or do you want to choose custom sizes?

[nickelswitte]

When I open an image with fancybox and then click or touch once, the image is being zoomed in too much, and you completely lose the overview. I'd like to reduce the zoom level on the click / touch.

Thanks for the awesome library!

[fancyapps]

You can use Panzoom.ratio option. Almost any option can be passed as method and it will be executed when needed, therefore you can return value based on your custom logic. See this demo - https://fancyapps.com/playground/1dW - here, image size is limited to max 1.5x of the viewport. Or use maxScale like this - https://fancyapps.com/playground/1dY

[nickelswitte]

Hello,

thanks for the super fast response and the great reply. It works for me, when using this code snippet. There is still a thing I'd wonder if it is possible and that would be the absolute perfect solution:

Is it possible to configure fancybox like so, that the zoom on click or touch zooms in to a specified factor (so that you dont lose the overview of the image), but it is still possible to zoom im further after that using the mouse wheel or the gesture?

With your currently proposed solution, I am zooming in to a much better factor, but can't go any further.

[fancyapps]

Yes, it is possible. Disable default click action and create your own that zooms in to the level you choose. It is very simple, see this demo - https://fancyapps.com/playground/1e8

[minhz]

i already include script to panzoom_plugins_toolbar.lean.js

but i cannot show toolbar panzoom ?
please help how do i show Transformation controls ?
like this: https://fancyapps.com/fancybox/plugins/toolbar/

 <script type="text/javascript">
        Fancybox.bind('[data-fancybox]', {   //[data-fancybox="gallery"]
            Carousel: {
    Navigation: true,
  },
            Toolbar: { 
                display: [ 
                    { id: "counter", position: "center" }, 
                    "download", "zoomIn", "zoomOut", "iterateZoom", "zoom", "slideshow", "fullscreen", "thumbs", "close", 
                    ], 

            },

            Panzoom: {
                click: "toggleCover",
              Toolbar: {
                display: ["zoomIn", "zoomOut"],
              },

            }

        });
        </script>

[fancyapps]

@minhz If you are using v5, the API has completely changed. You can find examples on homepage.

[minhz]

is there anyway that i can add zoomIn zoomOut button ??

[fancyapps]

The link to Fancybox5 JS file is like this - https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js

[fancyapps]

Also, your code is not compatible with v5! The syntax is different, see example I provided previously.

[minhz]

wow amazing, it works now, thanks for great works.

But now i'm trying to convert this from old version fancybox to new V5

    Image: {
    Panzoom: {
      zoomFriction: 0.9,
      maxScale: function () {
        return 8;
      },
    },
  },

[fancyapps]

Replace Image: { with Images: {

[minhz]

perfectly, thanks again for great works