Develop Reference

cant set fancybox iframe from javascript

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.

Fancybox creating error in Chrome

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]
});
});

jquery fancy box in iframe call it from url

I have a jquery fancybox and I call it from url with #
$(document).ready(function() {
$('.fancybox').fancybox({
openEffect : 'elastic',
closeEffect: 'elastic',
'type' : 'iframe',
'overlayOpacity' : 0.1,
'overlayShow' : false,
'centerOnScroll' : true,
'autoSize': false,
'width' : 990,
'height' : 780,
});
$('.contact').fancybox({
openEffect : 'elastic',
closeEffect: 'elastic',
});
});
var thisHash = window.location.hash;
$(document).ready(function() {
if(window.location.hash) {
$(thisHash).fancybox().trigger('click');
}
$('.contact').fancybox();
}); // ready
I have managed to call it from url with # but the div containing the link for the fancy box becomes hidden when calling it from url.
If you open the page without # calling it the div is shown(not hidden).
Any ideas?

fancybox not opening, not sure why

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.

Owl Carousel addItem issue

I'm currently using Owl Carousel and populating via AJAX. When I use the addItem method Owl Carousel goes to the first item, but I want the carousel to go to the item that was added. So to get that I used jump to, but the problem here is the carousel goes to first and then jumps to added item. I just need the carousel to go to latest item.

i had the same issue so i used lazyLoad : true,
I resolved it using this code below:
var itemBlock ='<div> slider item </div>'; \\ add your code in ajax
$('#owl-slider').html(itemBlock).trigger('create');
$("#owl-slider").owlCarousel({
// Most important owl features
ltr:true,
items : 5,
itemsCustom : false,
itemsDesktop : [1199,8],
itemsDesktopSmall : [980,5],
itemsTablet: [768,4],
itemsTabletSmall: false,
itemsMobile : [479,2],
singleItem : false,
itemsScaleUp : false,
//Basic Speeds
slideSpeed : 200,
paginationSpeed : 800,
rewindSpeed : 1000,
//Autoplay
autoPlay : false,
stopOnHover : false,
// Navigation
navigation : false,
navigationText : ["prev","next"],
rewindNav : true,
scrollPerPage : false,
//Pagination
pagination : false,
paginationNumbers: false,
// Responsive
responsive: true,
responsiveRefreshRate : 200,
responsiveBaseWidth: window,
// CSS Styles
baseClass : "owl-carousel",
theme : "owl-theme",
//Lazy load
lazyLoad : true,
lazyFollow : true,
lazyEffect : "fade",
//Auto height
autoHeight : false,
//JSON
jsonPath : false,
jsonSuccess : false,
//Mouse Events
dragBeforeAnimFinish : true,
mouseDrag : true,
touchDrag : true,
//Transitions
transitionStyle : false,
// Other
addClassActive : false,
activeClass:true,
//Callbacks
beforeUpdate : false,
afterUpdate : false,
beforeInit: false,
afterInit: false,
beforeMove: false,
afterMove: false,
afterAction: false,
startDragging : false,
afterLazyLoad : false
});
var owls = $("#owl-slider").data('owlCarousel');
owls.goTo($('.item').length);

By stepping through the execution of addItem() I've noticed that the entire carousel is "destroyed" first then rebuilt with the new item added. So for now there is no real solution to your problem.
If you wish to jump to the latest item while keeping the sliding animation (not starting from the first then whoosh to the last), try jumpTo() to the second last item, set a timeout of like 10 milliseconds (will not work if omitted in my case), then call next().
owl.jumpTo(/*second last item index*/);
setTimeout(function() {
owl.next();
}, 10);