fancybox interview questions
Top fancybox frequently asked interview questions
Is it possible with Fancybox 2.0 to always keep the image gallery navigation arrows visible? Rather than just visible on hover.
Source: (StackOverflow)
this is driving me nuts. Iv'e created a simple test page..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../admin/UI/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="admin/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#foo").fancybox({
'autoDimensions': false,
'width' : '750',
'height' : '90%',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true,
'hideOnOverlayClick' : false
});
});
</script>
<title>Untitled Document</title>
</head>
<body>
<a rel='nofollow' href="foo.php" id="foo">test</a>
</body>
</html>
when clicking the link i get `d.onCleanup is not a function !!! does anyone know where this error is coming from!!
or on the unpacked version:
currentOpts.onCleanup is not a function on fancybox/jquery.fancybox-1.3.4.js Line 324
Source: (StackOverflow)
I would like to launch a Fancybox (e.g. Fancybox's version of a modal or light box) on page load. I could bind it to a hidden anchor tag and fire the click event of that anchor tag via JavaScript, but I would rather just launch the Fancybox directly and avoid the extra anchor tag.
Source: (StackOverflow)
How to position the fancybox 100px from top by default it is center aligned.
I believe there is no api settings for that. Can anyone help me out in doing it on the actual script.
Source: (StackOverflow)
The new license for Fancybox 2 states we cant use this plugin for commercial purposes.
I'm a web developer and always promoted this plugin to my costumers. Does this mean I need to find or write a new plugin with a more free license?
Maybe I just don't understand the noncommercial word correct, if so pleas correct me.
But what I can find around the internet it's states I cant use a software with this license on a webpage where the business is making money.
Source: (StackOverflow)
I would like to use jQuery Fancybox or Lightbox to load a contact form from a standard link in a web page. I have reviewed the documents at http://fancybox.net/example but the closest option is the iFrame one and it doesn't work with a standard page link.
My heart is not set on using Fancybox so if there is a better way to have the lightbox effect with a contact form I would appreciate someone pointing me in the right direction.
thanks.
Source: (StackOverflow)
I'm using fancyBox to create a gallery with the following code:
<a class="fancybox" rel="group1" rel='nofollow' href="img/work/1.jpg"></a>
<a class="fancybox" rel="group1" rel='nofollow' href="img/work/2.jpg"></a>
<a class="fancybox" rel="group1" rel='nofollow' href="img/work/3.jpg"><img src="img/th/thumb.jpg" alt="Thumb" /></a>
But I'm getting errors while validating the code. It says:
Bad value group1 for attribute rel on element a: Keyword group1 is not registered.
How do I fix this issue? Am I not writing the code out correctly? I basically wanted one thumbnail, with 3 photos to scroll through.
Thank you.
Source: (StackOverflow)
I am creating a one-page website in HTML5 using the Unsemantic framework, linking to hidden divs that display in Fancybox 2 and am having trouble getting all the different types of content to size correctly.
There are three divs - one containing text inside a div that is wrapped inside a hidden div, so I can manipulate the content accordingly, one containing an image gallery, and one containing a link to a YouTube video. I have created a hidden class that I call via CSS as so:
HTML for the text portion:
<a class="fancybox" rel='nofollow' href="#bio">...blah blah blah...
...then later on...<article class="hidden" id="bio">
HTML for the video portion:
<a class="fancybox fancybox.iframe" rel='nofollow' href="https://www.youtube.com/video">Videos</a>
CSS:
.hidden {
overflow:hidden;
display:none;
}
Fancybox is being called inside the <head> tags:
<script type="text/javascript">
$(document).ready(function() {
$("#fancybox-gallery").click(function() {
$.fancybox.open([
{
href : "image_1.jpg",
}, {
href : "image_2.jpg",
}, {
href : "image_3.jpg"
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
With the Fancybox 2 defaults (autoSize:true, autoWidth:false and autoHeight:false), images resize accordingly, video resizes accordingly, but the text link defaults to minimum height and maximum width:
If I set autoSize and autoWidth to False, then set autoHeight to True, images still resize in the same way, the text boxes resize to about 50% of the browser window, and the video displays with a portion of white on the right hand side:
To be honest, I like the size of the text boxes in this example, and they act responsively, but the video box is wrong so it's a bit annoying.
So far I've tried the following with no success:
- Removing the
class="hidden" and replacing it with inline
"display:none" script and then display:inline-block in the CSS, on the advice of a friend, but I realized that it wouldn't work;
- Giving the hidden text div a grid setting in line with the rest of the HTML, but this just caused the div to resize, and not the Fancybox.
- I can set a static width, but it needs to be responsive, so that is not acceptable for my needs;
So, where am I going wrong? Could the answer lie in setting autoSize:true, and adding an em or % width to the divs that need it?
I'm also thinking about calling a script upon open that just affects the divs I need, but I am not sure if that's possible. I'm not a JavaScript user day to day, so my knowledge is poor.
Source: (StackOverflow)
I'm using fancy box to create a popup and load another page on it using an iframe. here is my code
<script type="text/javascript">
$(document).ready(function() {
$('.calendar .day').click(function() {
day_num = $(this).find('.day_num').html();
day_data = prompt('Enter Stuff', $(this).find('.content').html());
if (day_data != null) {
$.ajax({
url: window.location,
type: 'POST',
data: {
day: day_num,
data: day_data
},
success: function(msg) {
location.reload();
}
});
}
});
});
$(document).ready(function(){
$("a.iframeFancybox1").fancybox({
'width' : 800,
'height' : 650,
'overlayOpacity' : '0.4',
'overlayColor' : '#000',
'hideOnContentClick' : false,
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe'
});
});
</script>
It loads the page successfully and does the stuff. But instead of closing the popup form, it loads the popup source form inside the popup itself. I want to close the popup form when the work is done and return to the main menu page from which the popup was generated. How do I achieve this on a button click of the popup form.
Regards, Rangana
Source: (StackOverflow)
I have a page that loads and after it loads, it pulls in a list of LIs to populate a news feed.
<li><a rel='nofollow' href="/url/" class="quickview">quick view</a></li>
<li><a rel='nofollow' href="/url/" class="quickview">quick view</a></li>
<li><a rel='nofollow' href="/url/" class="quickview">quick view</a></li>
I'm trying to get fancy box to trigger when a user clicks on quick view but haven't had any luck. Any Ideas?
$(document).ready(function() {
$('.quickview').fancybox();
});
also tried:
$(document).ready(function() {
$('a.quickview').live('click', function() {
$(this).fancybox();
});
});
http://fancybox.net/
Thanks for any ideas...
Source: (StackOverflow)
Hello I am using the jQuery plugin fancybox to display bing maps when somebody enters an address into a textbox and hits the submit button beside it. And a fancybox is loaded and a map for that address is displayed. This is working well with my application, but the problem is, it is only working well on one page and on the other one, when I load it, it is giving me an error saying fancybox is not a function. I get to see this error in the error console and in the firebug console. I am not sure what could the problem. The same code works in another page, but it doesn't on this one?
$("<a rel='nofollow' href=\"#showmap\">Map</a>").fancybox is not a function
I am pretty sure it is not re-usability issue. But when I test to see if fancybox's original files have been loaded, they are loaded with the dom, so it might not be actual problem. But I am unable to understand what else could the problem be.
This is my code
abbr: is just a text bit. I have different divs based on what the user selects. And each div would have its own controls, which would start with that text and are appended with their own definitions such as mapresults, decValLat, decValLon etc.
ex: abbr>>east
and then the ids would be eastmapresults, eastdecValLat, eastdecValLon etc.
function showMapFancybox(abbr){
var abbr;
$('#'+abbr+'mapresults').hide();
$('<a rel='nofollow' href="#showmap">Map</a>').fancybox({
overlayShow: true,
onClosed: function() {
$('#'+abbr+'mapresults').show();
map_latdec = $('#decValLat').attr('value');
map_longdec = $('#decValLon').attr('value');
map_latdeg = $('#degValLat').attr('value');
map_longdeg = $('#degValLon').attr('value');
$('#'+abbr+'decValLatsub').val(map_latdec);
$('#'+abbr+'decValLonsub').val(map_longdec);
$('#'+abbr+'degValLatsub').val(map_latdeg+'N');
$('#'+abbr+'degValLonsub').val(map_longdeg+'W');
}
}).click();
};
Source: (StackOverflow)
I've used lightbox and fancybox quite a lot but never really seen any reason to choose one over another. There are also a whole bunch I have not used like these http://planetozh.com/projects/lightbox-clones/ . The data on that page is quite old and in many cases incorrect.
Are there any good reasons to choose one over the others? Performance, API options, ease of customization etc.
This is more of a subjective question than a black and white one. I haven't seen any comparisons on this topic don't know where else to ask this.
edit
After looking at the suggestions I think fancybox has the best api and it's only 5kb gzipped. http://fancybox.net/api Colorbox also looks very good.
Usability Tip: If you are think of capturing user input from a focus stealing overlay don't. What if the user needs to view information on the parent window to fill out your form, they are now trapped. Sometimes these popups are appropriate, but most of the time a slidedown block element would do the job better.
Source: (StackOverflow)
I am using jQuery Fancybox for a popup registration form here
I would like the form to come up at the size of 450px by 700px but no matter what I set the height and width at I get scrollbars:
<script type="text/javascript">
$(document).ready(function() {
$("a#regForm").fancybox({
'titleShow' : false,
'autoscale' : true,
'width' : '450',
'height' : '700',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
There must be something I am doing wrong but I can't figure out what it is. I would appreciate a helpful hand here. Thanks.
Source: (StackOverflow)
To my problem, i have one link <a rel='nofollow' href="http://www.youtube.com/embed/YT-ID" class="overlay_video"></a>. I want to play the video by clicking the link in a fancybox overlay window. This is not a problem. The problem is the parameters, for example "autoplay" or "autohide".
The following link don't work:
<a rel='nofollow' href="http://www.youtube.com/embed/YT-ID?autoplay=1" class="overlay_video"></a>
The Overlay-Window opened, but the video is not playing automatically.
EDIT: I want to use the HTML5 Player on mobile devices. On a desktop-browser it works with the parameters, but not on mobile devices.
Source: (StackOverflow)
I'm looking for a solution to change the cursor to a magnifying glass upon hovering over a Fancybox image.
Like on Pinterest, when you hover an image (using chrome).
So far I have this which doesn't have cross-browser support.
.picture img {
cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in;
}
Is there a better way to approach this problem?
Source: (StackOverflow)