Preview of v3 #1169

Open
fancyapps opened this Issue Dec 12, 2016 · 145 comments

Projects

None yet
@fancyapps
Owner

Hi,

You can take a look at upcoming fancyBox3 here - http://fancyapps.com/fancybox/3/

Putting the finishing touches right now and later will start working on homepage and documentation. There will be a lot to cover as the script has changed completely (for example, it is possible to show more than one modal at a time).

Thanks!

@fancyapps fancyapps referenced this issue Dec 12, 2016
Closed

. #1050

@mjcampagna

Looking very promising. I'll be eager to get my hands on the final version and to put it through its paces.

@TJung1968

Looks great, and works great on touch devices! Can't wait to see the final version! :-)

@overtune

Looks really great! Nice work!

Is there any plans of sometime remove the jQuery dependency?
As the web has evolved today I see less and less need for jQuery.
That would also make it much easier to implement/use Fancybox with other frameworks such as React/Angular.

But again, really nice work!

@fancyapps
Owner

Thanks.

v3 will still be using jQuery. I was just thinking about that lately and decided that v4 will be standalone.

@acidcrash2005

It is awesome! Very cool features! I want to have a try on my projects!

@carlos3duardo

Great! I can hardly wait to use this.
It's so much better and beauty than before. Congrats!

@evgene
evgene commented Dec 27, 2016

can u put button print in right top button panel?

@fancyapps
Owner

Even if there will not be print button by default, you will be able to easily create your own.

@evgene
evgene commented Dec 28, 2016

I newbie, perfect if you write example in new site, how do print button. Thank you.

@mjcampagna

The site is looking good, but the download button isn't hooked up to the downloadable file. An oversight, or have you not launched yet?

@redpik
redpik commented Dec 28, 2016

great news @fancyapps ! looks great.
Can you create a git branch for v3?

@fancyapps
Owner
fancyapps commented Dec 28, 2016 edited

Thanks! @mjcampagna @redpik I am right now testing and cleaning up the code and later will push to GitHub. Then download button will start working :)
@evgene yeah, I`ll make a tutorial

@robfaas
robfaas commented Dec 29, 2016

I use Fancybox on photography sites. It would be great if it is possible to copy-protect the images. I know it always will be possible to copy by printscreen, but still it will prevent a lot of copying.

@fancyapps
Owner

@robfaas You know what, I actually implemented a simple right-click protection. It is disabled by default, and can be enabled like this:

$(".fancybox").fancybox({
	image : {
		protect : true
	}
});
@mromid
mromid commented Dec 31, 2016

image

Thank you for this plugin ,
first , look at the my image , i think problem is z-index
secend after zoom + , i cant see zoom - button

end sorry for my bad english

@fancyapps
Owner
  1. I increased z-index values
  2. So, you really think there should be a "zoom-out" button? Single click (or double tap on touch devices) would zoom image out.

Thanks.

@Reda-Ahmad
Reda-Ahmad commented Dec 31, 2016 edited

I want to say fancybox2 was awesome and cant wait to work with v3.

@mijatovic85

Looks great, is it safe to use the beta version at this point? I want this swipe option on mobile devices and to disable arrow also on mobile devices, because unfortunately, this option is not supported in version 2?

@fancyapps
Owner

Yes, it is ready, working on documentation right now.

@nikas64527

Hey, it's awesome! Thanks, it looks so great!
But docs page returns 404 error, cant use it :(

P.S.
Sorry for my English (not native).

@enenemultimedia

I haven't seen anything like this in a long time.
Can't wait to get my hands dirty with this.

Cheers!

@mjcampagna

Hi Janis,

I've pulled the Fancybox 3 files from your demo site so that I could start messing around with them in my current project, being locally developed, and I'm having a small issue at mobile display sizes. I though you should be aware of it, in case it's something you can fix before full release. I've got this CSS in my basic site styling, standard rules for responsive image handling:

img { height: auto; max-width: 100%; }

So when I load an image in Fancybox at mobile display size, the image is smaller than it should be, and appears in the top-left corner of the display. If I disable these rules, then Fancybox seems to display the image as it should.

As a safety precaution, Fancybox 3's CSS should probably do a reset in its own stylesheet. This seems to do the trick, though maybe you'll want to implement it in a different way:

.fancybox-slide img { max-width: none; }

Cheers,
Matt

@fancyapps
Owner

@mjcampagna Thank you, I really appreciate your help. I did include a fix in the stylesheet.

@mjcampagna

My pleasure to help. I've been using Photoswipe for galleries and Magnific Popup for other modal content. Honestly, was never keen on Fancybox 2 -- before the mobile/touch era, Highslide was my jam -- but this latest version is fantastic, and I'm keen to replace the Photoswipe/Magnific combo with a single, more capable library. Fancybox 3 has the potential to improve my application greatly, so anything I can do to help you make it better, I'm in. =D

@phifa
phifa commented Jan 4, 2017

This looks amazing. Can we use this version or will there be sth else?
http://fancyapps.com/fancybox/3/fancybox/jquery.fancybox.min.js

And another question: How does fancybox 3 differ / compare to photoswipeq? maybe @mjcampagna can weigh in on this as well?

@robfaas
robfaas commented Jan 4, 2017

On my Windows mobile, when I change the orientation from vertical to horizontal, the overlay is reacting strange; only covering a small part at the top of the screen.

@mjcampagna

@phifa I'll lead off with this line from the Photoswipe documentation:

"PhotoSwipe is not a simple jQuery plugin, at least basic JavaScript knowledge is required to install."

So right off the bat, it's not so easy to start using. I've used and customized Photoswipe extensively, and it's fantastic for what it does; but what it does is limited. It's purpose is in the name. It only supports images, and is not a general lightbox. So no inline content, iframe, video, etc.

Using Photoswipe means having to structure your images in a specfic way, or that you have to be well-versed enough with Javascript to write your own init. If you want to customize it, then you always have to edit the script file for the UI. I've done a lot of this, and it's not fun.

I haven't gotten far with Fancybox 3 yet, as I'm still waiting for the final version. But with the tinkering I've done, implementation has been as simple as:

  1. including the js
  2. including the css
  3. adding "data-fancybox" to my elements

It looks like it can be further customized by writing your own JS, but if you want to run it vanilla, you don't even have to initialize the script. It just works, without writing a single line of JS. Frankly, I am amazed at just how simple it is.

Also, Fancybox 3 supports content of all kinds, and you can load content on top of content. So, for example, I can load an image and then call a second popup on top of the image containing its EXIF data. I'm looking forward to playing with such possibilities.

Using Photoswipe, I've been using Magnific Popup (from the same author) for non-gallery modal content. To use the same example, I'm looking at an image, and then click a custom button to view the EXIF data; that button closes Photoswipe, then loads a separate popup of inline content to show the EXIF data using Magnific Popup. It's roundabout, and not great having to move between modals and scripts like this.

@fancyapps
Owner

Nice summary, @mjcampagna, thanks!
Of course, there are other features like automatic content recognition (including YouTube, Google maps and others), "auto-height" for iframes, thumbnails, basic photo copy protection, etc.
It is easy to redesign and create something unique, check out demos at homepage.

I actually have tons of ideas, so, stay tuned!

@fancyapps
Owner

@phifa You can start using it, there will be just minor changes.

@robfaas fancyBox3 supports all modern browsers (surprisingly, even IE9), but it has not been tested on Windows Mobile. And it looks like jQuery supports only Android and Safari - https://jquery.com/browser-support/

@eladnova
eladnova commented Jan 4, 2017
@fancyapps
Owner

@eladnova Thanks!

fancyBox3 is a free upgrade for all license holders.

About these both options - not yet, but it will be possible in the future. I am thinking about rewriting CSS as SCSS, or maybe creating something like a wizard where you would choose layout, colors, etc.

@redpik
redpik commented Jan 4, 2017

SCSS files, great idea for customizations. Can I help?

@phifa
phifa commented Jan 4, 2017

omg scss would be amazing. yeah, anything we can do? when will it be on bower?

@phifa
phifa commented Jan 5, 2017

I installed it and tried it, it kinda works, but I get this weird thing when I click on an image:
http://recordit.co/pMv2qkSWF3

The buttons at the top are working great however.

Windows 10 with Chrome 55 and jquery v2.2.4

@mjcampagna

That's the zooming. Looks to be working as designed.

Click and drag left or right to mimic swiping (as if on a phone), or use the arrow keys or the navigation buttons in the UI to advance.

What type of response were you expecting?

@phifa
phifa commented Jan 5, 2017

Ah got it. It is because of jQuery 2.2.4. When I use 3.1 it works as expected. Too bad my projects still use jquery 2

@harlet
harlet commented Jan 5, 2017

On Android mobile, the "click" event for opening the link with youtube iframe is triggerd to fast! Try to use touchend. Because scrolling the page starts at touchstart.

@adam-shaun

I'm really looking forward to this. I can't wait to implement Fancybox 3 into my website. I really like the new image gallery and the ability to play youtube videos! Hope the set-up is straight forward like fancybox 2! Keep up the amazing work.

@mjcampagna

@fancyapps, @phifa Regarding jQuery, I've only used Fancybox 3 with jQuery 3 so far, as it's what I use for most of my projects. The notable exception here is Wordpress, which currently utilizes jQuery 1.12.4. And as I've learned the hard way, it's usually not a good idea to replace it with a newer version.

So, does Fancybox 3 require jQuery 3? Will there be any way of having it work with older jQuery versions, such as when included in Wordpress themes?

@redpik
redpik commented Jan 6, 2017

@mjcampagna
"it's usually not a good idea to replace it with a newer version"
nope, you can "deregister" jquery 1.x and load another jquery.
example here https://github.com/redpik/Twoobl/blob/master/lib/scripts.php#L17

@mjcampagna

@redpik
Yes, I'm aware of such techniques and have used them in the past. The result, though, was customers attempting to use third-party plugins which broke because of the jQuery version, and so it created plugin compatibility and support issues. It's for reasons such as this that, in Wordpress circles, it's bad practice to deregister Wordpress' packed-in jQuery.

@fengwei77

look like great!
when will release first version!!
want taste it!

@danielnr87

Looking forward to this - much improved and modernised. FancyBox is still my preferred lightbox. Lets hope it arrives very soon! (i've got projects I wanna use it in :))

@mijatovic85

I have one issue, can you help me how to fix when I try to scroll on mobile device, image is full width of the screen, just little edges left and right http://prntscr.com/dtgr14

Please take a look on screenshot. When I try to scroll down in this situation, image opens, instead of scrolling content down. How to fix this issue?

@fancyapps
Owner

Hmm, does your page has something like - <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"> ?

Anyway, I replaced "touchstart" to "touchend" event that triggers opening, maybe that would help, too.

Well, looks like tomorrow will be the launch day.

@mijatovic85

Thanks for your reply, and yes, I already have meta name="viewport" in head tag, but it does not change anything, unfortunately. I am not sure about touchend and touchstart, can you be more specific please? I really need your help.

@adam-shaun

Is there anywhere we can download the v3 preview and test it out?

@fancyapps
Owner

Well, touchstart was used to remove 300ms tap delay on links triggering fancybox, but I changed to touchend event.

So, grab the latest version from the homepage (js: http://fancyapps.com/fancybox/3/fancybox/jquery.fancybox.min.js and css: http://fancyapps.com/fancybox/3/fancybox/jquery.fancybox.min.css)

@mijatovic85

Thank you for your reply, but unfortunately, the same is happening :( When try to scroll content down by touchswipe image on mobile device, image opens instead of scrolling content down. I can only scroll by touchswipe on white space arround the images

I really don't know how to fix this issue. Whether it would solve the problem if I activate tap delay of 300ms, I don't know?

@fancyapps
Owner

@mjcampagna could you give a link to your page or recreate this issue on codepen - http://codepen.io/fancyapps/pen/jyEGGG/ ?
btw, do you experience the same issue when viewing http://fancyapps.com/fancybox/3/ ?

@adam-shaun

So all I need to demo this?

jquery.fancybox.min.js
jquery.fancybox.min.css

Thanks for the help.

@fancyapps
Owner

@adam-shaun yes, just two files :)

@mijatovic85
mijatovic85 commented Jan 9, 2017 edited

Woow, no I don't have the same experince when viewing http://fancyapps.com/fancybox/3/ on mobile device. I can scroll content by swipedown on image. What's the difference?

@adam-shaun

@fancyapps Thanks!

@mjcampagna

@mjcampagna could you give a link to your page or recreate this issue on codepen - http://codepen.io/fancyapps/pen/jyEGGG/ ?
btw, do you experience the same issue when viewing http://fancyapps.com/fancybox/3/ ?

@fancyapps, I'm not sure which issue you're referring to. Can you point me to the post to which this is a reply?

@mijatovic85

@fancyapps please tell me what's the difference between image gallery on http://fancyapps.com/fancybox/3/ and js code that you send just before. Because it works well on mobile and it can be scroll down over the image

@fancyapps
Owner

Sorry, @mjcampagna, it was meant for @mijatovic85 !

@mijatovic85

Woow, no I don't have the same experince when viewing http://fancyapps.com/fancybox/3/ on mobile device. I can scroll content by swipedown on image. What's the difference?

@fancyapps please tell me what's the difference between image gallery on http://fancyapps.com/fancybox/3/ and js code that you send just before. Because it works well on mobile and it can be scroll down over the image

@fancyapps
Owner

There is no difference, it is the same code, therefore I asked for a link to your page to look for a clue, because it works fine for me.

@mijatovic85

http://mile.x3.rs/apartment/apartment1.html

You will noticed that you can not scroll content down by swipedown over image.

@fancyapps
Owner

Your page is not responding for me. btw, what device/browser are you using?

@jarred-cz

@mijatovic85 I can reproduce what you mean. But it has to be something wrong with your code, because original preview on http://fancyapps.com/fancybox/3/ works OK in this case.

@mijatovic85

@fancyapps Google chrome, samsung galaxy s5

@TJung1968

mijatovic85, you don't have the same jquery.fancybox.min.js file that is currently available at http://fancyapps.com/fancybox/3/ – apparently, some changes were made after you downloaded that file.

@adam-shaun
adam-shaun commented Jan 9, 2017 edited

Hey @mijatovic85 I noticed that when you open a image on your site with the new fancybox that your navigation will jump to the right and then back in place. Is there a fix for this? I have a feeling it might happen when I try and implement fb3 to my website.

@mijatovic85

@TJung1968 regardless of whether or not, the same happens again. Now I have the same code such as available at http://fancyapps.com/fancybox/3/

@adam-shaun, you will noticed when you open image on my site, vertical scroll bar disappear, then navigation jump little bit to the right, that's ok

@mijatovic85

Guys, I think I'm a bit closer to solution, in my css file I have body, html { height: 100%; }

When I get rid of that line of code , now I can scroll on image too, but after hald second, images over which I swipedown appear.

@jarred-cz

@mijatovic85 its because "touchend" instead of "touchstart" I guess

@mijatovic85

@jarred-cz Thank you for your reply, do you know how to change touchend to touchstart in this situation when we use fancybox?

@jarred-cz

@mijatovic85 its the event which Janis changed few hours ago - its doesnt work with touchstart in your case neither

@mijatovic85

So what do we do then? Could this constitute as a bag or...?

@adam-shaun
adam-shaun commented Jan 9, 2017 edited

@mijatovic85 Is there a fix for the jumping? I expect that I will get the same sort of issue when I add the new Fancybox3 to my website.

I had to disable the 'overlay: lock' on Fancybox2 to stop my navigation from jumping to the right (although this allowed the website behind the image to be scrollable, which caused some issues on iOS and Android).

It appeared to be related to the positioning, and the ease in and out CSS code of the navigation hiding when scrolling down the page.

@mikhailrepka

http://fancyapps.com/fancybox/3/docs/ — not found, download button not working =/ I want to download fancybox3 and test it.

@mjcampagna

@mikhailrepka Fancybox 3 has not been officially released yet. If you want to test it, you can download the files from the preview link's source code. Otherwise, you should wait for the official launch to download the release package.

@mijatovic85

Guys, I want to tell you what it was a mistake, instead of parent div "gallery", I used a[data-fancybox="gallery"]

Wrong $(document).ready(function() { $('a[data-fancybox="gallery"]').fancybox(); });

Correct $(document).ready(function() { $("gallery").fancybox(); });

@TJung1968

On Fancybox 2 (and the old Fancybox 3 beta) I used two things from the "Tips & tricks" section, namely "Use element instead of attribute" as shown in this fiddle: http://jsfiddle.net/cWNw9/, and "Add something to the title (add download link)" http://jsfiddle.net/zAe6Z/. Both of them don't seem to work anymore in Fancybox 3. Do I have to change something in the code, or are things like this no longer supported at all in Fancybox 3?

@fancyapps
Owner

I`m not that good at writing documentation, but I hope this makes sense - http://fancyapps.com/fancybox/3/docs/

@mijatovic85 : try updating to the latest.

@adam-shaun : simply add compensate-for-scrollbar to your fixed positioned element (http://fancybox.docs/3.0/#faq)

@mjcampagna

I'm not that good at writing documentation, but I hope this makes sense...

Looks good go me. I'll be sure to let you know if I have any feedback once I start getting my hands dirty.

@d3rson
d3rson commented Jan 10, 2017

Very Nice update from FancyBox2. There is a way to make the Thumbnails be opened by Default ?

@adam-shaun
adam-shaun commented Jan 10, 2017 edited

Hello! I implemented fancybox 3 into my website, however, I am experiencing some issues that I do not know how to fix.

Firstly, when I click an image or video the navigation and body will jump slightly, even though I have included 'compensate-for-scrollbar' in my navigation class.

Secondly and finally, when clicking an image or video to open fancybox the scroll bar is still visible and you can scroll behind whilst the image / video is up. I have attempted to use the overlay helper and set it to 'lock' but it isn't affecting it.

I would be really grateful for any help that can be provided to help me fix these problems.

Example of issues: http://codepen.io/adam94/pen/rjxGxM

I have also set up test pages if you wish to see the problems:
http://adamthomasportfolio.com/a2_test.html (VFX Comp + Dr Who Vortex)
http://adamthomasportfolio.com/d2_test.html (Hand Video + images)
http://adamthomasportfolio.com/p2_test.html (All images)

@fancyapps or anyone else :)

Update: I think it might be something with Headroom.js but not sure how to fix it

Update 2: So managed to fix the disable the scrollbar. But the jumping appears to still be happening. If I completely remove the hiding navigation then it will fix the issue, but I'd rather find a work-around if possible.

@mjcampagna

@adam-shaun On p2_test.html, my console is showing syntax error on line 222. Looks to me like you need to check your matching pairs of brackets, as I think you've got too many closures.

On d2_tesxt.html, I'm seeing a lot of red in my console. You'll want to resolve these errors.

Do you know how to use the console to troubleshoot errors? Can point you in the right direction if necessary.

@mjcampagna

@fancyapps

I've now gone through most of the documentation. A few remarks/questions.

You've got a typo here: "Enable questures (tap, zoom, pan and pinch)"; should be "gestures".

The option "infobar" works as described, but "buttons" doesn't seem to do anything.

Rather than sourcing captions from "data-caption", I would very much like to be able to pull image captions from a figcaption element on my page. Is this possible in the current build, or can we get this in an update? I'd be totally fine with having to do something like:

caption : $(this).next("figcaption"),

Just so long as I have an option, or some way of defining the caption location. Or maybe this is already possible using callbacks?

Finally, now that Fancybox 3 is released, would you like us to start opening new issues for this type of thing, or keep conversation going in this thread?

Thanks,
Matt

@fancyapps
Owner
fancyapps commented Jan 11, 2017 edited

@mjcampagna Hi, thanks for your effort, I really appreciate your help!

I`ll update documentation and will include some missing parts too.

About caption: the "caption" option is somehow special, because it accepts function and return value is used as actual content of caption area.

Depending on your markup, you can use it like this -

$( '[data-fancybox]' ).fancybox({
  caption : function( instance, item ) {
      return $(this).find('figcaption').html();
  }
});

http://codepen.io/fancyapps/pen/EZPpRG?editors=1010

And yes, you can start opening new issues about v3.

@redpik
redpik commented Jan 11, 2017

Hi @fancyapps , I think it's urgent to create a branch for v3. some people (like me) want to help.

@mjcampagna

@fancyapps That works perfectly for my captions. Thanks! I made just one small change:

return $(this).closest('figure').find('figcaption').html();

@fancyapps
Owner

@redpik a new branch can be found there - https://github.com/fancyapps/fancyBox/tree/3.0

@robfaas
robfaas commented Jan 11, 2017

I think an optional download button in the toolbar would be a useful feature.

@redpik
redpik commented Jan 11, 2017

yay! thank you @fancyapps !

@mjcampagna
mjcampagna commented Jan 11, 2017 edited

@robfaas

I think an optional download button in the toolbar would be a useful feature.

You should be able to add one easily.

Using the baseTpl option, use the default code in the documentation. Inside of the div .fancybox-buttons, add this:

'<a class="fancybox-download" download>Download</a>' +

Then set a callback as follows:

onComplete : function( instance, item) { $('.fancybox-download').attr('href', item.src); }

@robfaas
robfaas commented Jan 11, 2017

Thanks @mjcampagna, I am going to try that solution.

@mjcampagna

@robfaas

Also, if you'd rather not mess with the baseTpl option, you can add the button via callback:

onInit : function( instance, item) { $("<a class='fancybox-download' download>Download</a>").appendTo( ".fancybox-buttons" ); }

That'll save you some bytes of code if you're not otherwise changing the template.

@fancyapps
Owner
fancyapps commented Jan 11, 2017 edited

@mjcampagna be careful with that, if there are multiple instances on the page, then your code would append link to all of them. There is a handy collection of commonly used elements :
instance.$refs and an element containing buttons is instance.$refs.buttons.

There are two possible solutions to create a download button:

  1. Create <button> element and use click event to force downloading current image: http://codepen.io/fancyapps/pen/QdyzWm

  2. Create link and use callback to change its target:
    http://codepen.io/fancyapps/pen/dNGapJ

@fancyapps
Owner

@adam-shaun that jumping is caused by your CSS transition rule:
transition: all 0.4s ease-out. Since you are animating only top value, you could easily fix this by changing that rule to transition: top 0.4s ease-out;

@fancyapps
Owner

@d3rson It is not currently possible, but I`ll implement that.

@adam-shaun

@fancyapps that solved it. Thanks!
@mjcampagna Hey! It might be helpful for me to know how to fix the syntax errors correctly in Dreamweaver. Any help would be most welcome. Thanks. 👍

@mjcampagna

@adam-shaun

Open your pages in Chrome, and press Cmd-Opt-I (on Mac) to bring up the developer tools; I'm not sure about the Windows keys, but probably Ctrl-Alt-I? Click on "Console"; errors will show up in red. You'll want to clear these up to ensure your pages are properly running scripts, etc.

On p2_test.html, it looks like you need to delete line 222 altogether. It contains only "});", which appears to be a duplicate of line 221.

a2_test.html looks clean, but d2_test.html has numerous errors before fancybox runs, and those errors are killing the script entirely.

@mjcampagna

@fancyapps I think I've found a bug. When the modal is open, focus remains on the trigger element. After opening Fancybox, press Return on your keyboard a few times to trigger the element multiple times ... you'll open the same modal again and again, and will have to close each individually.

I can prevent this by adding this to the onInit callback, but I probably shouldn't have to:

instance.$lastFocus.blur();

@anonle
anonle commented Jan 11, 2017
  1. How disable zoom for images?
  2. How make fancyBox to be closed instead of zooming when clicking outside of the image?
@fancyapps
Owner

@mjcampagna Thanks. Fixed in the latest commit.

@anonle There are currently no options for that, but I`m thinking about adding them.

btw, any ideas about naming? Something like closeWhenClickedOutsideOfImage : true would be self explaining, but somehow does not look right ... :)

@Luderee
Luderee commented Jan 11, 2017

Loving the new version so far! However, it doesn't work with filtering anymore. I use Isotope for this, and in fancybox v2 I used something like the following code to switch the group:

$(".filter-button-group").on("click", "div", function() {
	var filterValue = $(this).attr("data-filter");
	$iso.isotope({
		filter: filterValue
	});
	
	if (filterValue == "*") {
		$(".fancybox").attr("data-fancybox", "gallery");
	} else {
		$(filterValue).attr("data-fancybox", filterValue);
		//Update fancybox or something
		console.log("Filtered");
	}
});

Now, once a fancybox is opened, it sticks to that selection no matter the filtering. So if you open on pageload, it will display all pictures, even after filtering. If you first filter, then open a fancybox, it will display the correct selection. Going back to all pictures will not open a fancybox.

Probably I need to reinitialize fancybox somehow after each filter is applied. How can I accomplish this?

@fancyapps
Owner

@Luderee Easy - just create custom click handler for your links and open fancyBox manually - http://codepen.io/fancyapps/pen/EZKYPN?editors=1010

$('.fancybox').on('click', function() {
  $.fancybox.open( $('.fancybox:visible') );
  
  return false;
});
@mjcampagna

btw, any ideas about naming? Something like closeWhenClickedOutsideOfImage : true would be self explaining, but somehow does not look right ... :)

bgClick: 'close'

clickBackground: 'close'

closeBackground: true

backgroundOnClick: 'close'

backgroundOnClickX: true

@nikas64527
nikas64527 commented Jan 12, 2017 edited

btw, any ideas about naming? Something like closeWhenClickedOutsideOfImage : true would be self explaining, but somehow does not look right ... :)

Maybe closeClickOutside? It's not necesserily only for image. And set "true" by default.

@robfaas
robfaas commented Jan 12, 2017

Or closeOnClickOutside / closeOnClickOutsideImage

@fancyapps
Owner

OK, closeClickOutside has been implemented.

@HelgVolkov

Thanks a lot! Really good job. I'm still use jquery 2.2.4 for a lot projects (some plugins require it). And there are some problems with image zoom in opened fancybox item. If I try zoom image by click, it jumps, not zoom.

@mjcampagna

Just sharing. I've been customizing the UI, and this positioning technique for the buttons spares having to fiddle with specific pixel values when changing the size of buttons. Whatever the button size, the icons will remain centered.

.fancybox-button::before,
.fancybox-button::after {
	top: 50%;
	left:50%;
	-webkit-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}

.fancybox-button--close::before {
  -webkit-transform: translate(-50%,-50%) rotate(45deg);
      -ms-transform: translate(-50%,-50%) rotate(45deg);
          transform: translate(-50%,-50%) rotate(45deg);
}

.fancybox-button--close::after {
  -webkit-transform: translate(-50%,-50%) rotate(-45deg);
      -ms-transform: translate(-50%,-50%) rotate(-45deg);
          transform: translate(-50%,-50%) rotate(-45deg); 
}

.fancybox-button--left::after {
  -webkit-transform: translate(-50%,-50%) rotate(-135deg);
      -ms-transform: translate(-50%,-50%) rotate(-135deg);
          transform: translate(-50%,-50%) rotate(-135deg);
}

.fancybox-button--right::after {
  -webkit-transform: translate(-50%,-50%) rotate(45deg);
      -ms-transform: translate(-50%,-50%) rotate(45deg);
          transform: translate(-50%,-50%) rotate(45deg);
}
@phifa
phifa commented Jan 13, 2017

@fancyapps thank you again for your great plugin. Will you make it available on bower soon? thanks!

@fancyapps
Owner
fancyapps commented Jan 13, 2017 edited

@phifa Thanks. I have to do some stuff first (finish working on homepage, licensing, etc) and I`ll take a look at bower afterwards.

btw, author of npm "fancybox" package messed up versioning and I do not know what to do about that.

@Reda-Ahmad

can I put only numbers in the caption field, because it wont show anything if I do not put any alphabets.

@fancyapps
Owner

@Reda-Ahmad Looks like you have found a bug. It will be fixed in the next commit.

@saltnpixels

OMG!! I just discovered this!!! when's it gonna be done!!

@Luderee
Luderee commented Jan 15, 2017

@fancyapps Thanks for the solution! Only now, since no start slide is specified, it always opens on the first image of the array. How to make it so that it opens the image which is clicked?

@fancyapps
Owner

@Luderee I have updated the snippet:

// Custom click event - open fancyBox manually
$('.fancybox').on('click', function() {
  var visibleLinks = $('.fancybox:visible');
  
  $.fancybox.open( visibleLinks, {}, visibleLinks.index( this ) );
  
  return false;
});
@saltnpixels
saltnpixels commented Jan 15, 2017 edited

@fancyapps I love the new plugin. it works great. But is there an easy way to add more images to a gallery AFTER its been opened, so im not loading tons of images unless necessary?

Update: Actually it doesnt seem to load extra images until the box is opened... Is this correct?
It looks like those resources are not loaded till click...

@fancyapps
Owner
fancyapps commented Jan 15, 2017 edited

@saltnpixels : Well, sometimes people ask me about this but I have never understand why would you need this and how would you use that.

Anyway, each instance has group object containing gallery items. You can add/remove items if you wish. You would need to call instance.updateControls(); to refresh interface afterwards. But it depends on the usage.

Example on appending one extra image after opening a gallery:

$("[data-fancybox]").fancybox({
	onInit: function( instance ) {

		instance.group.push({
			index : instance.group.length, 
			opts  : instance.opts,
			src   : 'https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150',
			type  : 'image'
		});

	}
});

http://codepen.io/fancyapps/pen/ggwmbb?editors=1010
In this case you would not need to update interface, because it will be created later anyway.

Maybe you are looking for something like infinite loader that would create and load prev/next gallery item after user clicks on pev/next button? ¯\_(ツ)_/¯

@saltnpixels

@fancyapps

Maybe I should explain my use case. Perhaps I don't need this.

My example is this:
I have a dating site. There is a grid of users with images. When you click one user, it opens in fancybox and you can see other images of same person (each user has his own gallery of up to 4 images).
I don't want to load all 4 images of a person unless you click the main one in the grid.

@fancyapps
Owner

I think you have two options

  1. Open fancybox manually after user clicks on the link
  2. Simply hide the rest of the group images - http://codepen.io/fancyapps/pen/KagWmX - but I think in this case the browser will load thumbs anyway.
@saltnpixels

Im using option number two. Seems easier and Im not sure how to do option 1. Does that mean using an event to open fancybox rather than have data-fancybox on the element?

anyways with option 2, from what I see in safari under the resources tab, the images are not being loaded until you click the non hidden image.

@saltnpixels
saltnpixels commented Jan 15, 2017 edited

@fancyapps
it wont load the other images if you dont put an img tag in the anchors. And you dont need them if they are hidden...
http://codepen.io/anon/pen/MJjprG

@fancyapps
Owner
fancyapps commented Jan 15, 2017 edited

Manual opening is very easy, for example, see this link I posted previously:
http://codepen.io/fancyapps/pen/EZKYPN?editors=1010
Just call $.fancybox.open( your-elements, your-options ); anywhere in the code.

About image loading - it depends on the browser.

@saltnpixels
saltnpixels commented Jan 15, 2017 edited

Interesting demo!

Alright, thanks a lot. So I'll see which way I do it.
For now it looks like most browsers don't load an anchor's link even if its an image.
Basically just dont add thumbnails. just anchors.

And your plugin seems to make the img element, only after its been opened so thats good.
Safari and Chrome don't load it till its clicked.
I'll probably stick with hidden links for now. I'll keep this here for documentation!

Lastly on safari I had weird ajax scrolling issue with fancybox 3. I fixed by scrolling to top when the ajax loads in. Else it opened the ajax page but scrolled to bottom.
#1187

@saltnpixels

eh...
how can I open an ajax page manually? and with a selector?

@brunushky

Hi, I has been using this plugin almost since version 1, and I found it very helpful, thanks for your effort!!!.

Now I was playing around with version 3 and found that changing background color through "helper" option don't work, or others like thumbs size.... helpers is still working or has been deprecated??, I don't found any reference in source code too. thanks.

helpers: { thumbs : { width: 10, height: 10 }, overlay : { css : { 'background' : 'rgba(255,255,255,0.5)' } } },

@mjcampagna
mjcampagna commented Jan 16, 2017 edited

Is there some way to check the group name? I'm digging into the instance, but only seeing the array and id. If I've got something like data-fancybox="gallery", I'd like some way of getting the value of "gallery".

Update: I'm able to get it using this in onInit:
$.fancybox.getInstance().group[0].opts.$orig.attr('data-fancybox')

Is there a more direct way, or should I just keep using this method?

@jarred-cz
jarred-cz commented Jan 16, 2017 edited

One bug maybe - if AJAX response contains HTML comment (etc. <!-- content - start -->), the "close button" won't show and following error in JS console appears:
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. (jquery-3.1.1.min.js:3)

@saltnpixels

@fancyapps Thanks for making this. I am having a lot of fun.
Here I have profile images and tapping just selects them (this will be used for a different functionality)

But taphold opens fancybox ajax and shows a users full profile. Swipe right and it gets thrown away!
:)

giphy

@saltnpixels

@fancyapps
if I change the href attribute with js I lose the fancybox ability because of no delegation. Why cant fancybox have the event on document by default?
$(document).on('click', '[data-fancybox'], ....

Otherwise I have to do this myself manually.

@fancyapps
Owner

@saltnpixels very nice effect :)

Sorry, I did not quite understand your last comment. Take a look at the bottom of core.js -
$(document).on('click.fb-start', '[data-fancybox]', _run);
Does this not work for you?

@saltnpixels
saltnpixels commented Jan 16, 2017 edited

@fancyapps
during my code I change href attribute on a data-fancybox element. But it continues to open the old href value.

But you are binding it to the document? hmmm... so why wont it change.

@fancyapps
Owner

@jarred-cz the script appends close button to the first element. I did not want to over-complicate and did not implement any checking (like, what if there is no containing element and what if the first element, for example, is heading).

@fancyapps
Owner

@mjcampagna yeah, that value is not stored anywhere and that is correct way to get it by yourself.

@fancyapps
Owner

@saltnpixels are you sure you are actually changing it? Are you using attr() method?

@fancyapps
Owner

@brunushky there is currently no such property, but you can change it using CSS or use onInit callback if JS is needed.

@saltnpixels

@fancyapps
It works on images. It's not working when I change attr('data-src'...
For ajax...

I see the change in inspector.

@fancyapps
Owner

@saltnpixels I have no idea, this
$('[data-fancybox]').attr('data-src', 'https://c2.staticflickr.com/6/5761/30508382101_fdff890a83_h.jpg');
works fine for me.

@saltnpixels

@fancyapps it works until you open the fancybox. If you then close it and try to change the attribute it stops working. At least for me...

@fancyapps
Owner

Yes, the script gathers all links at the beginning. This is because we need all of them to do some calculations and, for example, create thumbnails.

@saltnpixels

@fancyapps
http://codepen.io/saltnpixels/pen/pREGMM

See the data-src changes but once the link is opened, it cannot be changed. How can I fix this? Or do I have to make a manual fancybox that changes each time?

@fancyapps
Owner

Oh, you should have started this conversation with that example :)
You can change these values like this:

$('button').on('click', function() { 
    $('.changeable').data('type', 'image').data('src', 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg')
    
});
@saltnpixels

@fancyapps :/ why does .data() work but not atrr()?

im always confused between these because sometimes attr() works and soemtimes data works.
Let me try data in my code and cross my fingers....
Works...

im officially confused

@saltnpixels

Ok, so that works... somehow...
But here:
http://codepen.io/saltnpixels/pen/jyMJvW
You cannot change the fancybox group! :D

@brunushky

Thanks, I found the problem... I followed the GitHub link from http://fancyapps.com/fancybox/3/, and it's linking to the main fancybox branch, so the instructions were for v2.x .
I think that link should point maybe to https://github.com/fancyapps/fancyBox/tree/3.0, just in case somebody like me miss this detail. :)

@peeter2
peeter2 commented Jan 17, 2017 edited

Hello,

Very nice. Just one suggestion/bug. On mobile I can't close a youtube/vimeo video by swiping ON IT. It's only functional when I swipe on the edges (overlay) of the lightbox, not on the video itself. So it is really painful to close it. If it's not possible to fix it, I would prefer being able to close it by swiping left/right instead of up/down (unless there's an option for the video to slide in from top/bottom instead of fading in?)
Also on desktop I can close the lightbox by clicking on the background overlay, but on mobile it does not close. When I tap on the overlay the only thing that happens is that the X button disappears from the corner. When I tap again, it reappears.

I hope these things will be fixed, then it would be superb.

Even better if there was be an option that a back button would close the lightbox on mobile because otherwise my site gets too high bounce rate. People confuse the lightbox with a new page and try to get back but they get back to the google results page when clicking back on mobile.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment