Feedback on the 3.1 preview

[seabasss]

Hey!

3.1 looks awesome! Maybe you know about some of these things already but if not, here are some messages I get:

"SecurityError (DOM Exception 18): Attempt to use history.replaceState() more than 100 times per 30.000000 seconds" (This is in Safari and I used the arrows to navigate like 15 times, not 100)

"TypeError: undefined is not an object (evaluating 'i.current.$content.has')" (might be because of the error above)

"TypeError: a is not an Object. (evaluating '"length"in a')" when trying to open a gallery with buttons set to true. No message and it opens when it's set to false.

[fancyapps]

Hi, Thanks for the feedback!

1. I was not aware of this, I`ll check this, thanks.
2. I added an extra check to avoid this.
3. The logic has been changed in v3.1 - previously used buttons option will be renamed to toolbar and buttons option will be an array containing buttons you want to see in the toolbar, e.g. :

   buttons : [
     'slideShow',
     'fullScreen',
     'thumbs',
     'close'
   ]

   This allows greater customization and, for example, you can have open thumbs without a button.

[seabasss]

Cool!

Also the fancy confirm doesn't work any longer. Maybe you rewrote that? The animation doesn't complete leaving only the overlay visible. When setting it to full opacity (css) it shows up. And also if opening a confirm inside an already opened ajax box it shows up behind the previous one. Z-index somewhere to fix or can you add a parameter for layer?

Another thing. The new url-hashes are cool in galleries but can I navigate to id's instead of 1,2,3...? Like set a data-id to 534 and it will be 534 in the url. The reason is I open things with different orders and if it's 1,2,3 I will get different things to open for the same number.

If that makes any sense.

Thanks!

[fancyapps]

If you refer to custom show/hide animation for html elements, then there have been some improvements since first beta (btw, I updated preview to latest code).

You can use hash option to set custom hash value for each item.

[seabasss]

Thanks for all the help!

I was referring to the Confirm dialog box. The animation started to work again in beta-2 tho (or I messed it up previously)! It's still popping up behind the previously opened fancybox and now am facing problems with the confirm value not having any action. I guess something in here got changed?

afterClose : function( instance, e ) {
	var button = e ? e.target || e.currentTarget : null;
	var value  = button ? $(button).data('value') : 0;

	opts.callback( value );
}

How do I use the hash option? Something like this? hash : $(this).data('hash-id') ?

I tried dblclickOutside : 'close' but it closes it on single click. Am I using this the wrong way? (I like the doubleclick as an option for close because the single click is often by mistake and when using it with ajax content and forms I don't want to loose unsaved data by accidentally singleclicking outside the box)

(I'm not 100% sure but I think the SecurityError in Safari is even worse when using the jumpTo function.) Did you ever include a function to do something like this with a fade transition?...

$(document).on('click', '.class', function () {
	var index = $(this).data('id');
	$.fancybox.getInstance().jumpTo( index, 0 );
});

Edit, I meant:

$(document).on('click', '.class', function () {
	$.get('url', function (data) {
		$.fancybox.getInstance().setContent( $.fancybox.getInstance().current, data );
	});
});

[fancyapps]

Thanks, you are giving me a valuable feedback :)

1. I'm sorry, but I am confused, what do you mean by "fancy confirm" and "Confirm dialog box"?

2. Good question, it was originally created for manual usage, e.g., $.fancybox.open({src:'..', opts: { hash : 'my_hash'}}); For now, can pass it using data-options attribute.

3. I'm suprised you found dblclickOutside option :) To make it work, set dblclickOutside: "close" and clickOutside: false. You see, it is possible to set them to different action:

   // Possible values:
   //   "close"           - close instance
   //   "next"            - move to next gallery item
   //   "nextOrClose"     - move to next gallery item or close if gallery has only one item
   //   "toggleControls"  - show/hide controls
   //   "zoom"            - zoom image (if loaded)
   //   false             - do nothing

4. I have not looked in to this yet. I think that due to this limitation, hash should be changed after some interval.

[seabasss]

Thanks!

I mean the example you have on this site under Advanced Confirm dialog http://fancyapps.com/fancybox/3/

Note I updated the comment above about that...

[seabasss]

I just tried this and it still closes on single click, not double click...

	$("[data-fancybox]").fancybox({
		speed : 330,
		loop : false,
		opacity : 'auto',
		margin : [0, 0],
		gutter : 30,
		infobar : false,
		toolbar : false,
		slideShow  : false,
		fullScreen : false,
		thumbs     : false,
		closeBtn   : false,
		focus      : false,
		smallBtn : 'ajax',
		clickOutside : false,
		dblclickOutside: "close",
		touch : false,
		keyboard : false,
		beforeClose: function( instance, slide) {
			$(this).disposeVideo();
		}
	});

And another thing ;) you see under beforeClose I use a function to destroy video players. I opened another issue about this that it removes the whole thing before the fancybox actually is fully closed making the content jump. It works but is not super pretty. Did you add the onDeactivate as a state inbetween beforeClose and afterClose? The problem I have is that my disposeVideo() function is only working in beforeClose(), not onDeactivate() or afterClose(). It's like it's too late to run the function in those stages.

[fancyapps]

I recreated a "Confirm dialog" demo here - https://codepen.io/fancyapps/pen/PmpePO - works fine. Even double-click to close.

One undocumented (sorry about that) feature is that each slide receives "onReset" event before content is removed from it. The reason this event was created is that iframes on IE need a special care. But you can use it for your purposes.

[seabasss]

Aha, it was the current that needed to be in there. Works now! I wish I was just a tiny bit better at JS :)

The doubleclick only works if touch is not set to false. With touch set to true it works. Any way to fix?

For the confirm not showing up behind my other fancybox I hacked it this way hehe:

.fancybox-can-drag {
	z-index: 999999 !important;
}

Any other ideas of controlling multiple boxes and where they're positioned?

I'll try the onReset and hash next...

[seabasss]

onReset and I also tried onComplete didn't work.

When I close the fancybox I need to remove all video elements, otherwise my videplayer script wont work when I open it up again. The only one working so far is beforeClose() with the drawback of it being removed visually before the fancybox is removed.

I also tried this but it didn't work so I guess it's super time sensitive when to execute it.

beforeClose: function( instance, slide) {
			setTimeout(function() {
				$(this).disposeVideo();
			}, 1000);
}

My function for reference:

	$.fn.disposeVideo = function(e) {
		$('.video-js').each(function(e) {
			var videoID = $(this).attr('id');
			var player = videojs(videoID);
			player.dispose();
		});
	};

Sorry I'm throwing all kinds of things in here now. I'll try to stick to topic.

[fancyapps]

Callbacks have been changed:

beforeMove -> beforeShow
onComplete -> afterShow
afterMove is removed

But onReset is not an option, you have to bind it yourself, something like

afterLoad: function( instance, slide) {

  ... do your stuff here - create video, etc ...

  slide.$slide.one( 'onReset', function () {
          ... probably stop or remove video here ...
  });

});

[fancyapps]

btw, I have fixed the code - click / double click now works as expected.

[seabasss]

Oh great! Works, just tried!

Hm, my script removes all videos so I can't do it afterLoad, I need to do it when I'm closing out of the box.

Do you mind explaining the hash one more time please? I tried this <div fancybox-hash="534"... and this hash : 'hash', in my $("[data-fancybox]").fancybox({ and I also tried<div data-hash="534"...

Or is it meant to be: hash : '534',? I can't wrap my head around how to make that work for multiple items in a gallery. They still open with 1,2,3 no matter what...

[fancyapps]

I`m sorry, my bad. I forgot that option hash means the first part, not the whole value of "actual" hash. E.g., you can change "myHash" in "url.html#myHash-1" and not the "-1" part, it is always the "-" followed by the index.

I`ll think about it later, sorry.

[seabasss]

No worries, it's just a nice bonus if it's possible :)

[seabasss]

Last thing for now, do you also have an update of the Morphing Window Overlay here: http://fancyapps.com/fancybox/3/

It loads the background, but no content or close button shows up for me.
Thanks

$(".fancy-morphing").on('click', function(e) {

	var $that = $(this);
	var $clone;

	e.preventDefault();

	if ( $that.hasClass('to-circle') ) {
		return;
	}

	// Start morphing animation

	$that.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {

		if ( e.originalEvent.propertyName !== 'width' ) {
			return;
		}

		$that.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');

		var scale	= retrieveScale( $that );
		var pos		= $that[0].getBoundingClientRect();

		$clone = $('<div />')
			.addClass('clone')
			.css({
				top			: pos.top  + $that.outerHeight() * 0.5 -  ( $that.outerHeight() * scale * 0.5 ),
				left		: pos.left + $that.outerWidth()  * 0.5  - ( $that.outerWidth()  * scale * 0.5 ),
				width		: $that.outerWidth()  * scale,
				height		: $that.outerHeight() * scale,
				transform	: 'scale(' + 1 / scale + ')'
			})
			.insertAfter( $that );

		// Trigger repaint

		$clone.hide().show(0);

		$clone.addClass('is-visible');

		// Open fancyBox

		setTimeout(function() {

			$.fancybox.open(
				{
					src : $that.data('src') || $that.attr('href')
				},
				{
                     infobar  : false,
                     buttons  : false,
                     smallBtn : false,
                     keyboard : false,
                     touch    : false,
							onInit : function( instance ) {

						instance.$refs.slider_wrap.append('<button class="morphing-close" data-fancybox-close>X</button>');

                         instance.$refs.bg.remove();

                     },

					afterClose : function() {

						// Clean up

						var scale	= retrieveScale( $that );
						var pos		= $that[0].getBoundingClientRect();

						$clone.css({
							top			: pos.top  + $that.outerHeight() * 0.5 -  ( $that.outerHeight() * scale * 0.5 ),
							left		: pos.left + $that.outerWidth()  * 0.5  - ( $that.outerWidth()  * scale * 0.5 ),
							width		: $that.outerWidth()  * scale,
							height		: $that.outerHeight() * scale,
							transform	: 'scale(' + ( 1 / scale ) + ')'
						});

						$clone.removeClass('is-visible');

						$clone.one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {

							$clone.remove();

							$that.removeClass('to-circle');

						});

					}
				}
			);

		}, 350);

	});

     $that.width( $that.width() ).hide().show(0).addClass('to-circle');

 });

[fancyapps]

The layout has been changed a bit. To make it work, replace instance.$refs.slider_wrap with instance.$refs.stage. Also, set z-index for morphing-close a bit higher, 99996 or so.

[seabasss]

Great, thanks! I don't remember if it did this before but I have more text than what fits in the morphing window and when opening it up I'm scrolled down at the bottom by default. Not a huge deal, but is it possible to start at the top of the text instead? I don't know if this is fancybox or something else I have going on.

[Eldenroot]

@fancyapps - where to get v3.1 preview build?

[seabasss]

@Cu8eeeR Here https://codepen.io/fancyapps/pen/ybgpzy

[fancyapps]

@seabasss maybe because it focuses on the button at the bottom? (try to set autoFocus: false).
btw, I have updated beta, fixed safari history API limit.

[seabasss]

@fancyapps Awesome! autoFocus fixed it, and the Safari error is gone! Thanks

[seabasss]

Is the close animation speed a bit slower in 3.1? Can I change that back to what it was in 3.0 with a parameter?

[protoror]

hi all, i think Thumbnails button should be down state when thumbnails showing

[fancyapps]

@seabasss

You can find "Morphing modal overlay" code here - http://codepen.io/fancyapps/pen/rmwyXN

You can change animation speed using animationDuration option.

@Cu8eeeR code is now available here - https://github.com/fancyapps/fancybox/tree/3.1
Work on documentation is in progress.

[seabasss]

@fancyapps Always an answer to everything :) Thanks

[Eldenroot]

Thank you! I will try and let you know if anything

[7iomka]

@Cu8eeeR code is now available here - https://github.com/fancyapps/fancybox/tree/3.1
Can you please tell me which part of the above documentation really applies to the current branch 3.1.2 and which really works?
At me a part of options I work with 3.0 and a part from the new version. It deceives me that I do not know how to finish the project.
I used quietly version 3.0 until suddenly I have not stopped working closeClickOutside, in the official version! I installed version 3.1 and changed the callbacks and everything worked (incl. clickOutside : 'close', - works good) as it should, but these options do not work for me:

transitionEffect : "slide",
spinnerTpl : '<div class="preloader" style="display:block"></div>',

But instead of this

touch : {
vertical : false  // disAllow vertical swipe
},

Works like this:

touch: false,

Internationalization also does not work!

That is my config:

import 'vendors/jquery.fancybox-3.1.2.min.js';

function modalActions() {
  if(!$('.modal-link').length) return;


  $('.modal-link').on('click', function(){
    var $modalTarget = $(this).data('modal-target');
 

    $.fancybox.close();
    $.fancybox.open({
        src  : $modalTarget,
        opts : {
          autoFocus: false,
          clickOutside : 'close',
          animationEffect : "fade", // not working, instead zoom effect works
          touch : false, // works like this
          hash : false,
          transitionEffect : "slide", // not working, instead fade transition when I flip through the slides with the next/prev buttons
         
          spinnerTpl : '<div class="preloader" style="display:block"></div>', // It is shown on the former native preloader
          lang : 'ru', // Still English
        	i18n : {
        		'ru' : {
        			CLOSE       : 'Закрыть',
        			NEXT        : 'Назад',
        			PREV        : 'Вперёд',
        			ERROR       : 'Не удалось установить соединение. <br/> Пожалуйста, попробуйте позднее.',
        			PLAY_START  : 'Начать слайдшоу',
        			PLAY_STOP   : 'Поставить на паузу',
        			FULL_SCREEN : 'На полный экран',
        			THUMBS      : 'Превьюшки'
        		},
          }

        }
    });
  });
domready(function () {
  exports.init = modalActions
})

Thanks!

[fancyapps]

@7iomka Hi, I tried to recreate your issues, but works fine for me - http://codepen.io/anon/pen/KmZxyM?editors=1010
Could you create codepen pen demonstrating your issues?

Maybe it works using the latest version (currently 3.1.3).

[7iomka]

Maybe it works using the latest version (currently 3.1.3).>

Thank you!
I rechecked my code, and came to the conclusion that some of the settings that I entered did not work for dynamically inserted elements in the DOM (I have a slider in each slide that has its own settings that generate the inserted elements of the gallery with different id.
Accordingly, the settings that are specified when loading the page work on visible elements.
And the loadable elements after the initialization of the slider pick up the default fancybox settings, but not the settings I indicated!
So I need to put into the global scope the initialization function fancybox and call it again after the slider is initialized? Thanks again for making an amazing plug-in!

...
More than that, I noticed a difference in the connection for inline modals!
It was:

$.fancybox.open({
        src  : modalTarget, // put id of necessary dom element with modal content
        opts : {..}
)}

Now:

$.fancybox.open(
        $modalTarget, // put dom node ($('.someModalContainerWithContent).get())
        {...Opts}
)

It would be nice to read about it somewhere! ))

[fancyapps]

@7iomka If I understand you correctly, then you are looking for event delegation feature and that has been implemented just now (v3.1.5).

So, instead of initializing the plugin like this:

$('[data-fancybox="images"]').fancybox({
  selector : ,
  thumbs   : false,
  hash     : false
});

you have to pass selector as an option:

$().fancybox({
  selector : '[data-fancybox="images"]',
  thumbs   : false,
  hash     : false
});

fancyBox v2 used to do this automatically, but it is no longer possible, because this feature https://api.jquery.com/selector/ was removed from jQuery 3.

[7iomka]

If you understand you correctly, then you are looking for event delegation feature and that was implemented just now (v3.1.5).

Oh, this progress!!))

was removed from jQuery 3

Did I understand you correctly that jQuery 3 is required for optimal work of the latest version of fancyBox? I'm using jquery 2.2.4)
Since we talked about the future of the functional,
also, in the new version I would like at least some control over ZoomLevel, since in my case, I have full versions of images (scanned copies of documents) very large and increase to the original 100% of the size, instead of a logical increase first to 100 of viewport (As it happens for example in LightGallery (not advertising)), and then the user has control and increase even up to the original size or even more.
This practice is just necessary for me, since the increase in pictures of large original sizes in the latest version has some performance problems (small bugs in the animation). It would be simply cool if you considered in the foreseeable future the option to create an opportunity to build a zoomLevel, or the ability to independently set it, or configure it functionally.
You can verify this problem by opening the gallery (images of schemes) in the slider (you can have the very first slide there 2 photos - select the second and increase)
Here is the technical domain of the future site http://nst.prettysites.ru/
(This can also apply to cars in the gallery, whose original images are too large)

[fancyapps]

@7iomka It is always best to use the latest version of any software (less bugs, faster, etc), but minimum version required for fancyBox is jQuery v1.9.1.
Custom zoom levels are actually planned, but I can not tell you when it will be implemented.

I would suggest you to create multiple sizes for each photo (as there is no sense to load, for example, 4320px X 3240px image on mobile phone) and then use "srcset" to load appropriate image depending on screen size.

[7iomka]

Also, tell me please, if i set

transitionEffect : "slide",

it is possible to prevent fadeOut effect of current slide if i click on the arrows? I need only slide effect, that is, make it work just like if I moved photos with touches!
Thanks!

[fancyapps]

@7iomka You can try something like this:

.fancybox-fx-slide.fancybox-slide--previous,
.fancybox-fx-slide.fancybox-slide--next {
  opacity: 0;
}

or you can simply create your own effect:

.fancybox-fx-NAME.fancybox-slide--previous {
	/* start properties for upcoming slide if user navigates to previous gallery item */
}

.fancybox-fx-NAME.fancybox-slide--next {
	/* start properties for upcoming slide if user navigates to next gallery item */
}

.fancybox-fx-NAME.fancybox-slide--current {
	/* final properties */
}

[7iomka]

Awesome! Thanks!

[7iomka]

and then use "srcset" to load appropriate image depending on screen size.

Tell me please, what am I doing?
I saw an example from the documentation on using srcset, and I do not really understand how it works.
Here is a screenshot of an example of work from the documentation.
My expectations are that when the screen resolution is less than 640px the following instruction will be used

https://placeholdit.imgix.net/~text?txtsize=33&txt=2_small_640%C3%97427&w=640&h=384 640w "

However, as you can see the picture is uploaded to the resolution of 1600px.
I think it works by analogy with the usual srcset without media-query, and it looks not the width of the viewport, but the original screen resolution and the ratio of css-pixels and virtual pixels (x, 2x, 3x ..), and since on my laptop the full-hd resolution, the maximum picture in fancybox will always be displayed.
I also expected to implement a component of adaptive images, which I will use in my projects, so the task within the framework of fancybox galleries is to use the image of the desired sizes depending on the width of the viewport.
That is, in the classical version, such an image would look like this:

<picture>
   <source media="(max-width: 576px)" sizes="100vw"
   srcset="images/e1-sm.jpg 576w">
   <source media="(max-width: 768px)" sizes="100vw"
   srcset="images/e1-md.jpg 768w">
   <source media="(max-width: 992px)" sizes="100vw"
   srcset="images/e1-lg.jpg 992w">
   <source media="(max-width: 1200px)" sizes="100vw"
   srcset="images/e1-lg.jpg 1200w">
   <source media="(max-width: 1200px)" sizes="100vw"
   srcset="images/e1-xl.jpg 1200w">
   <source media="(min-width: 1200px)" sizes="100vw"
   srcset="images/e1-fullhd.jpg 1920w">
   <img src="images/e1-fullhd.jpg" alt="original full-hd image"
   />
</picture

My question to you is: can I somehow interpret the loading of the desired images based on the media-query? I have a 5.5 inch smartphone but with full-hd resolution, because now it loads a large image, but viewport does not require this quality, and my task is to provide more speed (opening a gallery) for clients with a weak 2g Internet, rather than provide them decent image quality. If you have thoughts on this matter, I will be grateful for your recommendations! Thanks in advance!

[fancyapps]

1. It is tricky to test this. Enable "Responsive Design Mode" and then resize window to see effect. The browser will change source according to size (it is a mystery for me how it chooses what to do, but the code syntax generated by the script is correct according to specs).

2. The script supports this syntax only:

<a data-fancybox="gallery"
    data-srcset="large.jpg 2048w, small.jpg 1024w"
    data-width="2048"
    data-height="1365"
    data-caption=""
    href="large.jpg"></a>

Because it is (unfortunately) not possible to determine what to load without parsing the HTML and calculating right source manually.

[7iomka]

Because it is (unfortunately) not possible to determine what to load without parsing the HTML and calculating right source manually.

Ok, thanks for answer!
Somehow at leisure I'll look at the current plug-in code for a more detailed view of how the substitution from data-srcset works now, can come up with some brilliant thoughts)
I tested in adaptive mode and came to the conclusion that the current implementation selects the desired image from srcset, depending not on the size of the viewport(media query like max-width), but on the current resolution (dpi) and density.
I learn about this in particular from the list https://material.io/devices/
This, in principle, will in any case positively affect the optimization of images on devices with a low screen resolution, so thanks for this possibility, as it is not in other similar plug-ins from the box)

[fancyapps]

FYI, v3.1 is now published.

[BernaDemirkiran]

Hi,
I created a slide with video and picture using FancyBox. But I set the slide speed and that speed goes to the other slide without finishing the video. Can you help me with this? @fancyapps