fancyapps / fancybox Goto Github PK
View Code? Open in Web Editor NEWjQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.
Home Page: http://fancyapps.com/
jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.
Home Page: http://fancyapps.com/
Why it became gif with non-soft corners and no opacity?
Some kind of downgrade...
In chrome the background overlay also darkens the picture box so the whole screen is dark for me, it is chrome version 15.0.874.121 on Mac OSX 10.6.8, i do want to add i am using it part of an extension, i don't know if that would make a difference cause it works fine but that one thing
Using the ajax method. Here's the sample code for the target page
<button onclick="return false">Do nothing</button>
Obviously clicking on the button should do nothing. Instead, it closes the lightbox. Frustrating when you're using the button to submit a form or something.
Adding a click event handler to the elements with event.preventDefault(); return false; avoids it, however in my case I want the button to submit its form, with a submit() handler on the form catching it and submitting via ajax.
I don't think the issue is necessarily within fancyBox, however it manifests itself here in a way I've never noticed before.
I would prefer to use the data- attribute like data-fancybox-group="GROUPID" and for older browsers / older html versions a config in the fancybox options fancybox({useRel: true})
Hi!
Can I use Fancybox in a WordPress theme which I sell to my client? In other words, when am I supposed to pay for the thing?
Thanks.
At first I thought it was just my site but it's not working on the FancyBox demos either.
IE9 console reports the following on FancyBox.net
LOG: DivX HiQ Debug: HiQ supported site definition updated 129586 Minutes(s) ago.
LOG: DivX HiQ Debug: Updating...
SCRIPT65535: Invalid calling object
script block (5), line 72 character 4
appendChildOriginal(element);
Looks like it's a conflict with IE9's built in DIVX HTML5 plugin
I want to use fancybox and ajax to display inline HTML. I want to implement cache and manipulate the content before an item is displayed. How about adding a callback that is called before a gallery item is displayed?
Thanks.
I'm trying to use the "afterLoad" Callback, but isn't works. Check it:
$.fancybox({
href: '#tour'
,type: 'inline'
,width: 850
,height: 450
,afterLoad: function() {
console.log('OK');
}
});
We use prototype and jQuery on the same page and for reasons we wrap everything in anonymous functions and pass in jQuery as a parameter. eg (function(
The problem is the thumbnailer outputs a link tag with inline javascript: href="javascript: $.fancybox.jumpto(idx)"
I think it would be better and safer to either wrap it or just change it to jQuery.fancybox.jumpto(idx);
Thanks!
At its very simplest, my script has this html and js:
a href="image1.jpg" class="fancybox"
$(".fancybox").fancybox({
href : 'image2.jpg'
});
Still, image1.jpg is loaded into the fancybox when clicking the link. Seems like the href argument isn't working at all?
(Using fancybox 2.0.3)
When fancybox is used to display a very tall image, you will briefly see a vertical scroll bar. It is caused by the update function in the overlay helper. Below is my HTML code. Try to use a very tall image and you will see the scroll bar.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" href="jquery.fancybox.css?v=2.0.1" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.fancybox.js?v=2.0.1"></script>
</head>
<body>
<a class="fancybox" href="test.jpg">Open Fancybox</a>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
</html>
note: FancyBox version 2.0.0 bug (non-existant in 1.3.4)
I have found that if you specify the "type" as iframe within the options script area (as shown below), the requested iframe location is redirected to the current directory /(null)
For this example, we'll say that the site is located at example.com/index.php
$(document).ready(function() {
$("#more").fancybox({
'width' : 400,
'height' : 1000,
'autoSize' : false,
'type' : 'iframe'
});
});
<a href="http://www.example.com/more/index.php" id="more">More</a>
Then a fancybox will open up that shows a iframe displaying the content (404 page) from example.com/(null)
This problem doesn't exist if you make the following changes:
$(document).ready(function() {
$("#more").fancybox({
'width' : 400,
'height' : 1000,
'autoSize' : false,
});
});
<a href="http://www.example.com/more/index.php" id="more" class="fancybox.iframe">More</a>
I don't like this class solution as I then can't add a different class that I could manipulate differently using css.
I haven't tried specifying other types eg image, ect.
Also on a side note, is it possible to not display the title in the fancy box? (setting to false or '' doesn't seem to work)
Other than this smallest bug, love version 2, great work! Thanks.
Hello everybody.
The "modal" option has been removed?
I need to disable the click outside to close.
How do this in the 2.0 version?
I am using the new Fancybox 2 library and have done a simple implementation whereby the user clicks on a link and a image pops up. It is working fine with the exception of the image displaying roughly 50% larger than the actual file.
I have tried setting autoSize to 'true' but that didn't impact anything, I have also experimented with setting the width and the maxWidth while having autoSize set to 'false'.
Has anyone experienced this problem? With Fancybox 1 there was never an issue.
The base code I'm starting with is:
$(document).ready(function() {
$(".fancybox").fancybox({
autoSize: true
});
});
The links look like this:
a href="http://www.mysite.com/promo-buttons/fees-payment-large.jpg" class="fancybox"
Thanks in advance for the help.
Any reason why in the latest commit the callsback are commented out ?
/* // Callbacks onCancel: $.noop, // If canceling beforeLoad: $.noop, // Before loading afterLoad: $.noop, // After loading beforeShow: $.noop, // Before changing in current item afterShow: $.noop, // After opening beforeClose: $.noop, // Before closing afterClose: $.noop // After closing */
You can see this feature on Facebook when viewing a photo.
All you have to do it's set body overflow:hidden
and wrap #fancybox-wrap into position:fixed
block with overflow:scroll
It`s a cool thing when you have large (larger then page content) ajax or inline content
Hey there,
On my site, i'd like to have a gallery made up of images AND videos (hosted on youtube/vimeo and loaded up through an iframe).
For images, the gallery function works great - but for videos the NEXT/PREV nav buttons hotspots end up covering the video's play button.
In the past, I fixed this by changing some of fancybox's code to make it so that anytime an iframe is launched, the css of .fancybox-prev and .fancybox-next width attribute is changed to be 35px, instead of the usual 40% - keeping the hotspots narrower and on the sides of the video.
I'm trying to figure out how to alter the code in 2.0.3, but having difficulty... maybe it would be a good feature?
It`s not very comfy to search the examply page to find out what parameters can be passed to helpers.
Also there is no a word about openEasing / closeEasing / nextEasing / prevEasing. What values I should pass them?
links look like this:
javascript:$.fancybox.jumpto(0);
instead of this:
javascript:jQuery.fancybox.jumpto(0);
I have this piece of code.
Everything works except the buttons helper template.
Is this the correct way to do it?
$(document).ready(function() {
$(".photogalleryLightbox li a").fancybox({
nextEffect: 'elastic', // elastic, fade or none. default: elastic
prevEffect: 'elastic',
closeBtn: false,
closeClick: false,
tpl: {
closeBtn: '<div title="Close" class="fancybox-item fancybox-close linkedImage"></div>',
next: '<a title="Next" class="fancybox-item fancybox-next linkedImage"><span></span></a>',
prev: '<a title="Previous" class="fancybox-item fancybox-prev linkedImage"><span></span></a>'
},
helpers:
{
title: {
type: 'outside' // float, inside, outside
},
overlay: {
speedIn: 0,
speedOut: 0,
opacity: 0.85,
css: {
cursor: 'pointer',
'background-color': 'rgba(0, 0, 0, 0.85)' //Browsers who don`t support rgba will fall back to default color value defined at CSS file
},
closeClick: true
},
buttons : {
tpl: '<div id="fancybox-buttons"><ul><li><a class="btnPrev linkedImage" title="Previous" href="javascript:$.fancybox.prev();">Previous</a></li><li><a class="btnPlay linkedImage" title="Slideshow" href="javascript:$.fancybox.play();;">Play</a></li><li><a class="btnNext linkedImage" title="Next" href="javascript:$.fancybox.next();">Next</a></li><li><a class="btnToggle linkedImage" title="Toggle size" href="javascript:$.fancybox.toggle();">Toggle</a></li><li><a class="btnClose linkedImage" title="Close" href="javascript:$.fancybox.close();">Close</a></li></ul></div>'
}
},
beforeShow: function()
{
// Get rich titles
var currentElement = this.element;
var next = $(currentElement).next();
if(next.length && next.hasClass('caption')) this.title = next.html();
//var currentIndex = this.index;
}
});
});
I have the ff code but it doen't work. This should be an Ajax.
<script> jQuery(document).ready(function(){ jQuery("#showMap").fancybox( maxWidth : 800, maxHeight : 600, fitToView : false, width : '70%', height : '70%', autoSize : false, closeClick : false, openEffect : 'none', closeEffect : 'none' }); }); </script>The error in Chrome: (Line 17 on jquery.fancybox.pack.js)
Uncaught TypeError: Object /NorgesKart.shtml has no method 'show'
Firebug error: (Line 17 on jquery.fancybox.pack.js)
d.content.show is not a function
error source line: [Break On This Error] a.trigger("beforeShow"),a._setDimensio...iv>').appendTo(e("body")).append(b),
Hi there,
I'm trying out fancybox and I am having an issue for ios devices (tested on my ipad2 and iphone 3GS) ... browser specific obviously.
On a long vertical page, the popup box is always positioned as in the viewport was showing the top of the page. Meaning if I am way down the page, I can see the semi-transparent black overlay over everything upon click, but I actually have to scroll back all the way up the page to see the popup box.
This was tested using fancybox 2.0.3 .
On the desktop, I've tested chrome and FF, on linux and osx and had no problem.
Thanks,
Tim.
Before 2.0 it was possible to do
Now it is not. If this is by design I think it should be stated in docs in red because it can break scripts on upgrade (was my case).
Simply adding
at the end of $.fn.fancybox
looks to solve the issue.
That would be awsome!
If you are zoomed, after of before opening the fancybox. Your image is out of the viewport.
The navigation bar buttons helper are too small in size for mobile devices as iOS and android devices and are not zoomable.
The orignal code is like that:
if ($.inArray(e.target.tagName.toLowerCase, ['input', 'textarea', 'select', 'button']) > -1) {return;}
The function "e.target.tagName.toLowerCase" must be written like this: "e.target.tagName.toLowerCase()"
Otherwise the form element content can not be editable.
Alt-LeftArrow and Alt-RightArrow should not navigate within gallery as they are common shortcuts for history navigation in many browsers.
Hi there,
As i needed very looong html formatted titles, and just din't want to use the href title attribute to hold them (mainly cause it's not that xhtml 1.0 strict), i got a workaround that was perfect for my usage :
Grabbed jquery metadata plugin and got it on the page :
script type="text/javascript" src="inc/jquery.metadata.js"
No change made in the fancybox settings :
<script type="text/javascript"> $(document).ready(function() { $("a.fancy").fancybox({ fitToView : true, openEffect : 'elastic', openSpeed : '800', closeEffect : 'elastic', closeSpeed : '300', closeClick : false, helpers : { title : { type : 'inside' }, overlay : { opacity : 0.8, css : { 'background-color' : '#000' } } } }); }); </script>Then added mysql and php html entities decoded title inserted in the class tag :
class="fancy {title: '<strong>Le Sceau - 2009</strong><br />Dimensions 60 x 50 cm<br />Technique mixte et bourre sur toile<br /><i>Photo : Aïni / Ifran'</i>'}"
I know i could make use of the API call, but i don't find it as customizable as this simple usage that worked like a charm with v2.0 and is just not available when i switch to 2.0.1
With the new version, the actual href title tag is used, no matter what title is defined in fancybox options with metadata as shown above.
Any idea on how getting this back to work ? Or should i stick with 2.0 ?
BTW : including this metadata ability right into fancybox could bring a neat way for users to handle titles and maybe even other options on a per image basis, without having to include html in the title as i've seen suggested on other threads.
Thanks for any help.
Best regards,
Joe.
I'm having problems with the latest version of fancybox 2.0.2 and am wondering if any of you gents (or gals) can help me.
When closing an iframe (YouTube) fancybox window on IE8 with the "closeEasing: easeInBack" option enabled, it doesn't close properly and the youtube video that is called up using fancybox gets blown up to fill the browser window. The only way to get back to the original page is to refresh the browser.
Here's the link: http://kamehamehapublishing.org/kumukahi/
I'm wondering what it could be?
Thanks in advance.
The internal title helper runs after triggering the beforeShow callback. This prevents implementing advanced title generation logic as part of the beforeShow callback (and doing so afterShow causes the generated modal to wiggle due to height changes)
I think the right thing to do is to run the internal title helper prior to triggering the beforeShow callback.
Hi,
fancyapps.com down (dns ?),
What about the licence of fancybox ?
Thanks,
remrem.
When show a form with inputs, checkbox and other elements using fancybox, the arrow keys (left, right) and the backspace button are blocked. Looking into the code, in the line 378 i found an if statement that ignores the key events in form elements, why ?
The partial solution has been comment out this block of code.
Testing in: Firefox 8.0, Chrome 15 and Safari 5.1
Greetings,
The new FancyBox has implemented the button helpers at the top and the left/right buttons respond to a single click.
Can an option be implemented to make the standard buttons (in the left and right area of the image) respond to a single click as well?
On tablets (Ipad) to navigate to the prev/next image requires TWO clicks.
The first click displays the arrow, the second click triggers the load/display of the next image.
I'm using fancybox for images and want to identify which image one is currently loaded in fancyBox so I can run some image specific javascript as part of the beforeShow callback
My initial thought is to add a data-id attribute to the anchor tag and tweak the fancybox's image HtML template to pass data-id onto the rendered image tag. Is there a better way?
Greetings, nice Plugin!
With 2.0;
Initiating the play sequence on a gallery works great the images cycle as expected.
The play flag gets stuck though and subsequent galleries (via ajax calls) do not play.
Also sometimes clicking on an thumbnail to trigger fancybox displays the correct image and then instantly moves to the next image.
Also it is not possible to set closeBtn: false without setting arrows as well.
Great plugin.
I upgraded from 1.3.4 where all worked fine. On 2.0.3 one image has set wrong width and height, rest is fine. Correct image size is 756x105px, fancyBox sets it to 1296x180px. Tried with different options such as autoSize, fitToView, aspectRatio.
Tested on Opera 11.60, Firefox 8, Chrome 15 and IE9 (Windows 7 platform) with latest jQuery 1.7.1.
To reproduce bug enter http://weeb.pl and open SEO Friendly Forum Title's image.
P.S. Thanks for really nice plugin :-)
When I click on the images in my gallery Fancybox duplicates the image and opens one on top of another, two images.
Has anyone else experienced this?
Thanks
Greetings, can a fullscreen button be placed in the button helper toolbar?
Also if fullscreen is implemented, an option to start in fullscreen mode would be great (fullscreen with auto slide show as well).
my bad it does work.
When I try the iframe example at http://fancyapps.com/fancybox/#examples on an iPad, I can't get the content to scroll (using one, two, or more fingers). Do you know why this is?
Image gallery manual call isn't working in new version.. Is there a new API for that?
Hi,
I've spent a few hours trying but can't seem to call an iFrame Fancybox mid-script in 2.0.
The following call works perfectly with 1.3.4 but breaks in 2.0:
$.fancybox( {href : 'blah.php', type : 'iframe'} );
I've tried rejigging the syntax based on the new documentation but nothing seems to work for me.
It works fine when I trigger a fancybox from a link, but I need to call one in a script.
Any ideas?
Thanks.
Am I missing something, or are options that were present in Fancybox 1.x not present in 2.0?
For example, I'm looking for an option to alter the opacity of the overlay (the only opacity-related options in the options list on the Fancybox home page are booleans, so it's not them); and the ability to position the title inside the fancybox wrapper?
I would like to have a callback method before fancybox jumps to a gallery item. This callback method can be used for validation. if the callback returns false, fancybox will stay on the current item.
Thanks!
I wonder if is possible to include "histroy plugin" to fancybox2.
it would be very nice feature
I have a table with images in it. I am trying to open these images with Fancybox, but have determined that when the TD has a class assigned, it prevents Fancybox from working. I appreciate any ideas. Thank you.
Link Code:
CSS assigned to TD:
.ss_leftside {
height: 140px;
vertical-align:top;
border: black;
border-width: 1px;
}
fancybox2.0 something bugs on ie6.0
loading(gif file)( Thumbnail helper's preview image/ button helper's button ) position in html content end, and z-index error.
The button and thumb helpers on fancybox 2.0 use inline javascript such as
<a href="javascript:$.fancybox.jumpto ...>
Nothing wrong with that but the scope is global with such inline script, so it probably shoud be written in the form jQuery.fancybox.* to avoid conflicts.
Trying to display some short, wide images using FB2. Looks like if an image has a height less than around 100px (estimate), it gets completely over-zoomed by about 200% on click.
Looking for a workaround quick! Thanks.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.