I want fancybox add scrollbar for iframe if content s higher then my definition, The code belllow does not work:
$(".class").fancybox({
iframe : {
css : {
width : "1000px",
height : "600px"
}
},
scrolling : "yes",
closeClickOutside : false,
type : "iframe",
afterClose : function(){location.reload(); return;}
});
$(".class").fancybox({
iframe : {
css : {
width : "1000px",
height : "600px"
}
scrolling : 'yes',
},
closeClickOutside : false,
type : "iframe",
afterClose : function(){location.reload(); return;}
});
You should place the scrolling : 'auto', inside the iframe option param.
Related
I'm trying to use iframe with in fancyapp 3 and I need to set the parameters preload and scrolling to false and auto, but with my current code I'm not able to do so.
Can you please check what it is wrong in it?
Follows the code:
<script>
$("[data-fancybox]").fancybox({
iframe : {
scrolling: 'auto',
css : {
width : '600px'
}
}
});
</script>
<a data-fancybox data "http://www.test.com">show</a>
You can do like this:
$("[data-fancybox]").fancybox({
speed: 230,
infobar: false,
buttons: false,
fullScreen: false,
thumbs: false,
closeBtn: false,
iframe: {
scrolling: 'yes' //'no'//'auto'
}
});
My Fancybox is working so far, except for the close button which doesn't appear.
This is my Javascript:
$(".fancybox").fancybox();
$('.single').fancybox({
openEffect : 'elastic',
closeEffect : 'none',
helpers : {
title : {
type : 'outside' } }
});
});
I've tried working with the modal thingy but I don't know where I should put it, as I am new to Javascript.
I have a problem that html page not displayed in full page consistently. Need to click toggle size button to expand the html page. Any problem with the code as attached below ?
Any method to ensure each html is displayed in full page ?
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox-button").fancybox({
'padding' : '1',
'margin' : '2',
'autoScale' : false,
'width' : '100%',
'height' : '100%',
'type' : 'iframe',
'autoPlay' : false,
'playSpeed' : 10500,
closeBtn : false,
iframe : {
scrolling : 'no'
},
helpers : {
title : { type : 'inside' },
buttons : {}
}
});
});
</script>
Profitable Plan
Just set autoSize: false. See example - http://jsfiddle.net/j8MQW/
$(".fancybox").fancybox({
autoSize : false,
'padding' : '1',
'margin' : '2',
'autoScale' : false,
'width' : '100%',
'height' : '100%',
'type' : 'iframe',
'autoPlay' : false,
'playSpeed' : 10500,
closeBtn : false,
iframe : {
scrolling : 'no'
},
helpers : {
title : { type : 'inside' },
buttons : {}
}
});
How can I add fancybox with the button helper and thumbnail helper?
And is it possible for the buttons(button helper) to be put under the image so that I can watch and select which I want to see?
the buttons
$(document).ready(function() {
$(".fancybox-button").fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : { type : 'inside' },
buttons : {}
}
});
});
and the thumbnail code
$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
overlay : {
opacity : 0.8,
css : {
'background-color' : '#000'
}
},
thumbs : {
width : 50,
height : 50
}
}
});
});
I am a bit new with JavaScript I couldn't get it to work.
What I am trying to do is mix them together and put the buttons on the bottom
P.S. Can I also uses fancybox thumbnail helper to work with Youtube videos?
You also have to load the jquery.fancybox-buttons and jquery.fancybox-thumbs js and css files apart from the fancybox regular js and css files. They are under the subdirectory "helpers" of the zip file.
Trying to figure out how to reinitialize Easy FancyBox when new content is loaded in with infinite scroll. I tried $.fancybox.init(), but this doesn't seem to be enough. In the head section the script that calls easy fancybox is:
jQuery(document).ready(function($){
var fb_timeout = null;
var fb_opts = { 'overlayShow' : true, 'centerOnScroll' : true, 'showCloseButton' : true, 'showNavArrows' : true, 'onCleanup' : function() { if(fb_timeout) { window.clearTimeout(fb_timeout); fb_timeout = null; } } };
/* IMG */
var fb_IMG_select = 'a[href$=".jpg"]:not(.nofancybox),a[href$=".JPG"]:not(.nofancybox),a[href$=".gif"]:not(.nofancybox),a[href$=".GIF"]:not(.nofancybox),a[href$=".png"]:not(.nofancybox),a[href$=".PNG"]:not(.nofancybox)';
$(fb_IMG_select).addClass('fancybox').attr('rel', 'gallery');
$('a.fancybox, area.fancybox').fancybox( $.extend({}, fb_opts, { 'transitionIn' : 'elastic', 'easingIn' : 'easeOutBack', 'transitionOut' : 'elastic', 'easingOut' : 'easeInBack', 'opacity' : false, 'titleShow' : true, 'titlePosition' : 'over', 'titleFromAlt' : true }) );
/* Auto-click */
$('#fancybox-auto').trigger('click');
});
/* ]]> */
Any Ideas how I can reinitialize something like this, bound specifically to new content loaded into #content div.post? Thank you for any help.
Check this thread, it may help (EasyFancybox uses fancybox v1.3.4)
Update: I just recalled that the thread of reference (above) will work for single new added elements, but not for galleries. If you have a set of galleries (using the rel attribute) then you may prefer to upgrade to jQuery 1.7+ (if not yet) and use jQuery on() instead of delegate(), that will allow you to initialize your existing and dynamically added elements.
I made an example page here that shows how to use jQuery on() to solve the issue of dynamically added elements and fancybox (v1.3.x), if you want to have a look.
Based on the example page, I guess in your specific case, you may try tweaking your code this way:
jQuery(document).ready(function($){
var fb_timeout = null;
var fb_opts = { 'overlayShow' : true, 'centerOnScroll' : true, 'showCloseButton' : true, 'showNavArrows' : true, 'onCleanup' : function() { if(fb_timeout) { window.clearTimeout(fb_timeout); fb_timeout = null; } } };
/* IMG */
$("#content div.post").on("focusin", function(){
var fb_IMG_select = 'a[href$=".jpg"]:not(.nofancybox),a[href$=".JPG"]:not(.nofancybox),a[href$=".gif"]:not(.nofancybox),a[href$=".GIF"]:not(.nofancybox),a[href$=".png"]:not(.nofancybox),a[href$=".PNG"]:not(.nofancybox)';
$(fb_IMG_select).addClass('fancybox').attr({'rel': 'gallery', 'tabindex': '1'});
$('a.fancybox, area.fancybox').fancybox( $.extend({}, fb_opts, {
'transitionIn' : 'elastic',
'easingIn' : 'easeOutBack',
'transitionOut' : 'elastic',
'easingOut' : 'easeInBack',
'opacity' : false,
'titleShow' : true,
'titlePosition' : 'over',
'titleFromAlt' : true
}) );
/* Auto-click */
$('#fancybox-auto').trigger('click');
}); // on
}); // ready
Of course, jQuery 1.7+ is required.