In Fancybox2 it seemed to disable the loop function also disabled the previous button on the first image and the next button on the last one.
In Fancybox3 that doesn't work. I am searching for some hours now and find nothing (ok, an entry here in the forum but that only confused me).
The developer said we should ask on Stackoverflow. Has someone an idea what I could do to make those arrows disappear and reappear at the correct locations?
Simply use CSS to hide disabled buttons:
.fancybox-navigation .fancybox-button[disabled] {
display: none;
}
https://codepen.io/anon/pen/ZNyEVB
Edit: The reason why they are not hidden by default is that when user clicks fast enough and does not notice that he has reached last image, next click would be on background and that would close gallery. And that could be annoying.
Related
Having changed every instance of clickoutside to "true" in my jquery.fancybox.js for my site https://byjohan.se, Fancybox still won't close when clicking outside the image. I first thought it had to do with me opening Fancybox by default in fullscreen but after changing that the problem still persists. What am I missing or doing wrong?
I'd be happy with every bit of help I could get :)
//Johan
Looks like you have to use clickSlide option, because clickOutsideoption defines action when clicked outside the slide (if you have not resized and/or repositioned slider area, then you actually can not click outside).
First timer here!
Fancybox is just what I need, amazing.
I have set it up on one of my web pages but I can't get the next arrows or any buttons to go.
I have a temp page set up at www.burnmoorcc.org.uk/2bfit/index.html and the image is bottom left under gallery.
Also incidentally the page has for some reason moved to the left!
Thank you for any help,
Best wishes
Graeme
The problem is that my like button is quite at the bottom at the page,
And when someone clicks the like button, the dialog just gets cropped,
and I just can't do anything with it.
Did anyone have a similar problem?
The only way to fix this is by using some CSS to your page to move the dialog box. This is kind of a hack, but its the only way to really do what you want. The only downside is that the tiny triangle in the top left corner of the dialog will seem out of place.
One other option that does not involve moving the dialog is to make your page slightly longer.
As you may know not long time ago facebook added several new features. One of them was a "New Stories" button which when clicked expands (with what I guess is a slideToggle effect) and shows new stories.
Here is the button I am talking about:
I would like to know How to achieve same slide / toggle effect and fade in effect that comes in after this button is clicked, with a help of jQuery.
I tried searching for this on internet, but all effects I found were regular slideToggle effects, I mean they started showing div from top and slided down to it's bottom (here is what I mean by regular content http://jsfiddle.net/TwxB4/), where as one facebook uses starts from the bottom of the hidden div and sort of slides to the top of it. (You will see what I mean if you check it on facebook).
Edit: I am only looking for a slideToggle effect and nothing else, I want to be abble to expand and shrink hidden div when user clicks on the link that lunches the effect.
Edit: Here is an illustration of the effect I'm looking for:
This example works the way you described, showing bottom content first:
http://jsfiddle.net/SBLNn/16/
Also full screen view here:
http://jsfiddle.net/SBLNn/16/embedded/result/
They may also do it by having the overflow of the feed hidden, and then setting a negative margin on the inner feed wrapper, then when you click they just animate that negative margin down to 0.
Does this works for you
http://jsfiddle.net/wb7h6/1/
updated version
http://jsfiddle.net/wb7h6/9/ I hope this is what you need
You want slideToggle() I think. See this jsFiddle.
When testing the like button on my page - I notice once pressed it shows a white box under it (where photos should be - although i have diabled that function). It can be removed by refreshing the page but i find this unsightly and covers vital content from the page.
Is there a way of stoping this happening?
Most likely relates to this known issue: http://developers.facebook.com/bugs/293075054049400.