I have two pages, both of which are using the fancybox jquery lib. One page works, with no errors. The other page (which has identical (I think) syntax) is producing an error. This only occurs in Chrome.
Here is the working code:
$('.fancybox').fancybox({
'type' : 'inline',
'minWidth' : 920,
'minHeight' : 700,
'width' : '90%',
'height' : '90%',
'autosize' : false,
'fitToView' : true,
'margin' : 15,
'padding' : 5,
'closeEffect' : 'fade'
});
and the failing code:
$(document).ready(function({
$('.fancybox').fancybox({
'type' : 'inline',
'autosize' : false,
'width' : 50,
'height' : 100,
'margin' : 10,
'padding' : [25,25,300,0]
});
});
The error coming up in the Chrome console is:
Uncaught SyntaxError: Unexpected string
The line of code that is underlined with the problem is: $('.fancybox').fancybox({
Your error is not the the Fancy box, but in $(document).ready(function({...})). You forgot the closing bracket in .ready() function after arguments.
Change it to:
$(document).ready(function() {
$('.fancybox').fancybox({
'type' : 'inline',
'autosize' : false,
'width' : 50,
'height' : 100,
'margin' : 10,
'padding' : [25,25,300,0]
});
});
Related
I am trying to set and call fancybox from within javascrip like this
$.fancybox.open({
type : 'iframe',
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
src : url,
smallBtn : false,
fitToView: false,
autoSize: false,
autoDimensions: false
})
It opens it fine but does not define the sizes, what am I doing wrong? o i need to set something else up? It just loads a page that displays a map, Thanks
Use either CSS or iframe.css option:
iframe : {
css : {
width : '75%',
height : '75%'
}
}
See docs - https://fancyapps.com/fancybox/3/docs/#iframe - for more info.
jQuery('#slider-container').bjqs({
'animation' : 'slide',
'width' : 1060,
'height' : 500,
'showControls' : false,
'centerMarkers' : false,
animationDuration: 500,
rotationSpeed: 5000
});
jQuery('#quotes-slider').bjqs({
'animation' : 'slide',
'width' : 760,
'height' : 135,
'showControls' : false,
'centerMarkers' : false,
nexttext : 'Next', // Text for 'next' button (can use HTML)
prevtext : 'Prev',
animationDuration: 500,
rotationSpeed: 5000
});
I use this function but my 2nd slider does not show next and previous functon kindly help me
You have to explicitly set that you want to show the controls using showcontrols:
jQuery('#quotes-slider').bjqs({
showcontrols : true,
nexttext : 'Next', // Text for 'next' button (can use HTML)
prevtext : 'Prev'
});
I am trying to open a fancybox with the latest version of fancybox which 2.3.4, The following code does not seems to be working, neither it is throwing an error.
I am just confused why it is not opening the Page:
$(".openmails1").click(function() {
var sender = $(this).attr('data-id');
var subject = $(this).attr('title');
var mailid = $(this).attr('rel');
$.fancybox.open({
href: '/account/compose.cfm?sender='+sender+'&subject='+subject+'&mailid='+mailid,
maxWidth : 600,
maxHeight : 900,
fitToView : true,
width : '70%',
height : '80%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
scrolling : 'no'
});
});
Here is how i am calling it
<a data-fancybox-type="iframe" title="This is a Welcome Email" data-id="24" rel="myemail#domain.com" href="javascript:void(0);" class="openmails1">Inia Ornit</a>
Update #1
This is how it is being called:
<a data-fancybox-type="iframe" title="This is a Welcome Email" data-id="24" rel="myemail#mtdomian.com~24" class="openmails1">Inia Ornit</a>
There are four records with different details, but the class used is same:
Here I am using it like this
$(".openmails1").fancybox({
href: '/account/compose.cfm?sender='+$(".openmails1").attr('data-id')+'&subject='+$(".openmails1").attr('title')+'&mailid='+$(".openmails1").attr('rel')+'&frmaccount=1',
maxWidth : 600,
maxHeight : 900,
fitToView : true,
width : '70%',
height : '80%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
scrolling : 'no'
});
It is always opening the First one, no matter if i open even the last record, always going as the first record, not sure why it is happening as like this
See this link with working example.
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
maxWidth : 600,
maxHeight : 900,
fitToView : true,
width : '70%',
height : '80%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
scrolling : 'no'
}
], {
padding : 0
});
Hope this helps.
UPDATE #1
According to your update code I think you have to change to
$(".openmails1").click(function(e) {
e.preventDefault();
$(".openmails1").fancybox({
href: '/account/compose.cfm?sender='+$(this).attr('data-id')+'& subject='+$(this).attr('title')+'&mailid='+$(this).attr('rel')+'&frmaccount=1',
maxWidth : 600,
maxHeight : 900,
fitToView : true,
width : '70%',
height : '80%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
scrolling : 'no'
});
});
You have to create the fancy box to every hyperlink clicked. See jsFiddle with running example.
Hope it is what yooou're looking for.
I'm using Fancybox to create an overlay with an iframe everything works but I can't seem to change the values of the width/height. I'm using fancybox-1.2.6 and jquery1.2.6
$(document).ready(function() {
$("a.iframe").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
and
<a class="iframe" id="iframe" title="Sample title" href="http://google.com/">iframe</a>
Here's how to manually open an iframe in a fixed sized fancybox
$.fancybox.open({
'href': 'mypage.html',
'type': 'iframe',
'autoSize': false,
'width': 800,
'height': 800
});
you have to directly change the css of it since fancybox isnt actually part of jquery.
$("#fancybox").css({'width': '500px', 'height': '500px'});
there is that way or something like this,
jQuery(document).ready(function() {
$.fancybox(
{
'autoDimensions' : false,
'width' : 350,
'height' : 'auto',
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);
});
I solved this problem by adding a width and a height attribute to the link tag like this:
<a id="various3" href="action.html" width="60%" height="60%">Iframe</a>
And you fancybox code:
$("#popup").fancybox({
'autoScale' : false,
'width' : $("a#popup").attr("width"),
'height' : $("a#popup").attr("height"),
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe'
});
Please do not use Firefox. It doesn't work, they did not make height compatible, try chrome instead! (latest Firefox today!)
if it is a supportable browser, remove the quotes for px, put quotes for %, like:
'width': 400; //400 pixels;
'width': '75%'; //75% of the screen
//height do not work on Mozilla Firefox (today!)
just try this
$(".fancyboxiframe").fancybox({
fitToView:false,
autoSize:false,
'width':parseInt($(window).width() * 0.7),
'height':parseInt($(window).height() * 0.55),
'autoScale':true,
'type': 'iframe'
});
This has worked for me in the past. I had to set both the height and the width.
$(document).ready(function() {
$("a.iframe").fancybox({
'autoDimensions' : false,
'width' : 600,
'height' : 150,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe'
});
});
try to use:
'maxHeight' : 380,
<script type="text/javascript">
$(document).ready(function(){
$("a.grouped_elements").fancybox(
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false );
});
</script>
I am getting the error: missing ) after argument list on this section of code using firefox 3.6.12. The gallery still works but I get the error in fox and IE. No error in chrome though.
You're missing the { and } around your options object you're passing to .fancybox().
$(document).ready(function(){
$("a.grouped_elements").fancybox({
^ here
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
^ and here
});
Should be:
$(document).ready(function(){
$("a.grouped_elements").fancybox( {'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 600, 'speedOut' : 200, 'overlayShow' : false });
});
$("a.grouped_elements").fancybox( **{**'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 600, 'speedOut' : 200, 'overlayShow' : false ); });
You're missing a curly brace to open and close your set of object properties.
u are missing {} i have put it between xx xx
<script type="text/javascript">
$(document).ready(function(){
$("a.grouped_elements").fancybox( xx{xx
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false xx}xx);
});
</script>