i am using fancybox for displaying certain pages on my website.
my problem is that i have no idea how i can make it with a fixed height and to scroll down to view more content if necessary (if the content flows down more than the specific height parameter of the fancybox)
here are my parameters in the page:
<script>
$(document).ready(function() {
$(".fancybox_link").fancybox({
'width' : 680,
'height' : 550,
'autoScale' : false,
'autoDimensions' : false,
'scrolling' : 'no',
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
what should i do to make the content flow with a scroll bar for the height?
thank you.
Edit : Is it the "Scrolling : 'yes'" parameter that doesn't work ?
Otherwise, I think, you can to edit/overwrite the Fancybox CSS :
#fancybox-content {
height: 680px;
width: 550px;
padding: 0;
margin: 0;
overflow: scroll;
}
Or something like this. I've do that for a previous project, but don't have the code under the hand to give you the exact syntax.
You actually need to set the option
'scrolling' : 'yes',
That will create scroll bars inside fancybox so you can browse long content.
Try with:
'autoSize' : false
Related
i have realized a "help"-view in a fancybox.
In this fancybox i've got a navigation menue. This menue works with anchor links. So far so good.
Now i want to open this fancybox and directly scroll to a spezific anchor.
Here my code, how i open the fancybox:
$.fancybox({
width : 1000,
height : 800,
minHeight : 800,
maxHeight : 800,
minWidth : 1000,
maxWidth : 1000,
fitToView : false,
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
scrolling : 'yes',
href : "#idofview",
})
I tried a few things, but nothing works.
I tried:
location.href = "#anchor";
//or
location.hash = "#anchor";
//or
afterShow: function() {
$(this).closest('.fancybox-inner').animate({
scrollTop: $('.fancybox-overlay').scrollTop() + $("#anchorid").offset().top
});
//or
$(document.body).scrollTop($('#anchorid').offset().top);
I also tried to trigger the click of my anchor link:
$("#btn_link").trigger('click');
Is there any reason to direktly scroll to the anchor in a fancybox?
You may need to find the offset().top of your targeted anchor first, then just animate the .fancybox-inner selector to that position (you don't need this $(this).closest() method at all) so :
jQuery(document).ready(function ($) {
$(".fancybox").fancybox({
// API options
afterShow: function () {
var toScroll = $(".fancybox-inner").find("#anchor2").offset().top - 35;
$(".fancybox-inner").animate({
scrollTop: toScroll
}, 1000);
}
}); // fancybox
}); // ready
Notice that I am subtracting 35px from the offset (in var toScroll) because the fancybox's padding, but this is a variable you may need to play with.
See JSFIDDLE
I have need to show this gallery as http://tympanus.net/Tutorials/ResponsiveImageGallery/ in fancy box. It works fine except one design problem that is fancybox doesn't come in the center for first time as it has to download few image for first time if one open the same album second time it then show correctly in the center as all image are cached. I tried to resolve this issue with following code but it is not work
I cant give fancybox fixed width and height as images are of different dimensions
$(".fancybox-frame").fancybox({
maxWidth: 740,
maxHeight: 600,
fitToView: false,
width: '70%',
height: '70%',
autoSize: true,
closeClick: true,
hideOnOverlayClick: true,
openEffect: 'none',
closeEffect: 'none',
onComplete: function () {
$.fancybox.resize();
$.fancybox.center();
}
});
Other solution i can think of is to call fancybox.center() and $.fancybox.center(); function when fancybox wrapper with changes fancybox-wrap.
This i can help me correctly repositioning the fancybox in center.
But i am not sure how to track height change for fancybox-wrap and call the reposition the fancy box.
Fancybox V 1.3.4
Help in this regarding is appreciated.
UPDATE:
Just to give you an idea i face similar problem that is happend on this link.
http://www.picssel.com/playground/jquery/getImageAjax.html
When you click for the first time it small fancy-box and doesn't re-size when image is downloaded. In my case i have to download multiple image and it take time to display the first image in between takes default value but doent resize when first image is download.
set autoSize to false in order to set width and height for fancybox. i.e.
$(".fancybox-frame").fancybox({
maxWidth: 740,
maxHeight: 600,
fitToView: false,
autoSize: false,
width: '70%',
height: '70%',
closeClick: true,
hideOnOverlayClick: true,
openEffect: 'none',
closeEffect: 'none',
onComplete: function () {
$.fancybox.resize();
$.fancybox.center();
}
});
Hope this helps you.
Dynamic Inline Content Loading
function loadAnswer(id){
jQuery.fancybox({
'content' : jQuery("#outerFAQ"+id).html(),
/*For Auto height and width*/
'onComplete' : function(){
jQuery('#fancybox-wrap').css({height:'auto',width:'auto'});
jQuery.fancybox.resize();
jQuery.fancybox.center();
}
});
}
/*Dynamically Set the id and passing it to function*/
<a class="fancybox" href="#" onClick="loadAnswer(<?php echo $data->getId()/*Dynamic id*/ ?>);"> Demo </a>
<div id="outerFAQ<?php echo $data->getId(); ?>" style="display:none;">
<div id="ans<?php echo $data->getId();?>">
demo
</div>
<div>
Single inline content loading
jQuery( "#demo" ).click(function() {
jQuery.fancybox({
'content' : jQuery("#demoContent").html(),
onComplete: function () {
/*Static height width*/
jQuery("#fancybox-content").css({
height:'500px',
overflow:'scroll',
});
jQuery("#fancybox-wrap").css("top","10");
jQuery(".fancybox-wrap").css("position", "absolute");
}
});
<a id="demo" href="#">Click me</a>
<div style="display: none">
<div id="demoContent">
demo
</div>
</div>
if you fancybox is already open and want to resize then below code will helps you.
$.ajax({
url: 'YOUR URL',
data:'DATA WANT TO TRANSFER',
type: 'post'
dataType: "text",
success:function(result){
//PLAY WITH RESULT SET
$.fancybox.toggle();
},
error:function(request,error){
alert("Error occured : "+error);
}
});
Reference from : Resize Fancybox
Solution, I managed to make it work by resizing after delay of 3 seconds by that time first image is downloaded completely
$(".fancybox-iframe").fancybox({
width: '70%',
height: '70%',
hideOnOverlayClick: true,
centerOnScroll:true,
onComplete : function(){
// $.fancybox.resize();
// $.fancybox.center();
var resize = setTimeout(function () {
$.fancybox.center();
}, 3000)
}
});
I believe more professional approach will be check using jquery when image is downloaded completely and then call $.fancybox.center(); function
Please if this is fine or we can do it some otherway.
Did you try to use <center></center> include of your fancybox? I think so it'll work on your page. and no need to use java, cause you are just trying to use it as center.
I have an issue once I plug in scripts, css, jquery for Fancybox, my flexslider script does not work. I receive this error:
JavaScript Error: TypeError: $(".flexslider").flexslider is not a function.
When I remove the fancybox scripts, my flexslider works. Is it possible to use both?
This is how I have them both working on one of my sites:
HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.3.4.pack.js"></script
<script src="jquery.flexslider.js"></script>
Javascript:
$(document).ready(function() {
$(".fancybox").fancybox();
$('.flexslider').flexslider()
;});
You can use them both. may you tried to use them before they are downloaded.
According API of them you need to add these plugins in this way
// Can also be used with $(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
And
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
I am having trouble figuring out how to put some additional content into an iframe I am displaying with fancybox.
My basic setup:
$('.fancybox').fancybox({
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
'padding': 0,
'closeClick': false,
helpers: {
overlay: {
closeClick: false
}
}
<a class="fancybox" href ="http://my-iframe.example"/><img src="myimage.jpg" width="x" height="y" /></a>
So I need to put a couple of custom buttons and another javascript widget in under the iframe but on top of the background overlay.
I am just having trouble grasping what might be the best way to do this. I suppose I could put this content in a div and then display that div once the fancybox has completed loading? I am having trouble with the callback function though, so I just need some general direction on the best way to do this.
if using fancybox v2.x try with the call back afterShow to append the additional content to the .fancybox-inner selector like :
afterShow: function(){
var customContent = "<div class='customHTML'>My custom content</div>"
$('.fancybox-inner').append(customContent);
}
use CSS to style and position such additional content, e.g.
.customHTML {
position: absolute;
z-index: 99999; /* this place the content over the fancybox */
bottom: 0px;
right: 0;
background: #f2f2f2;
width: 200px;
height: 100px;
display: block;
}
If the iframe is from same domain then you can access the contents with contents()
$('#fancybox-frame').contents().find('h1').prepend('<a>Button</a>');
This will not be possible for cross domain cases.
If your case also require javascript widgets to be injected, that might be hard for you with injecting into DOM, you can better go for a different div shown along with iframe.
For that just make the div show up on onComplete event or onStart event, and then position it according to fancybox position, height etc.
To make it above overlay, give it some positioning, you should obviously, and give a higher z-index that overlay.
#fancybox-overlay {
display: none;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1100;
}
#mydiv{
position:absolute;
z-index:1101;
}
You can try data attributes (data-fancybox-title) and initialize fancybox to place it to the top like this:
$(".fancybox-video").fancybox({
helpers : {
title: {
type: 'inside',
position: 'top'
}
}
});
You can find more info here: Fancybox Instructions
I needed a solution for FancyBox 1.3 and in my case I used the onComplete event to update the contents
<a class="iframe" id="fancybox-preview-card" href="about:blank"></a>
$("#fancybox-preview-card").fancybox({
'height': screen.availHeight * 0.9,
'width' : 600,
'onComplete' : updatePreviewContent,
'overlayShow': false
});
...
var contentUpdated = false;
function previewEcardTemplate() {
contentUpdated = false;
$("#fancybox-preview-card").attr("href", "about:blank").trigger("click");
}
function updatePreviewContent() {
// if content has already been updated then back out
if (contentUpdated)
return;
contentUpdated = true;
$.get('/template/mytemplate.htm', function (data) {
// Any mods to the html can go here
var ifrm = document.getElementById('fancybox-frame');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write(data);
ifrm.document.close();
})
}
I use fancybox for my website to enlarge my pictures. What I want is to make a sort of zoom function.
When the fancybox is open and I click on the image in the fancybox I want to increase the width of the fancybox
I tried something like
Markup:
<div style="display:none;">
<div id="view_invoice" style="height:950px; width:663px;">
<div class="process"><img src="../../images/progress.gif" /></div>
<div id="showInvoice" style="position:absolute;"></div>
</div></div><a id="get_invoice" href="#view_invoice" style="display:none;">link</a>
jQuery:
$('.table_content_results table').click(function()
{
$('#showInvoice').html('');
var invoiceDir = $(this).attr('dir');
var invoiceId = $(this).attr('id');
$.ajax({
type: "POST",
url: "includes/get_pdf.php",
data: "INVOICE_ID="+invoiceDir,
complete: function(data)
{
$('#showInvoice').html(data.responseText);
}
});
$("#get_invoice").fancybox(
{
'overlayOpacity' : 0.6,
'overlayColor' : '#000',
'titlePosition' : 'inside',
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'easingIn' : 'swing',
'padding' : 10,
'autoDimensions' : true
}
).trigger('click');
});
$("#showInvoice").click(function()
{
$("#view_invoice").animate({ width: 1000 });
$("#showInvoice").width(1000);
$("#showInvoice").children('img').animate({ width: 1000 });
$('#fancybox-wrap').width(1000);
$.fancybox.center();
});
This works but not properly. The size of the fancybox increase but the position is not at the center of my screen so i tried to fix that with $.fancybox.center(); but that didnt work.
The second thing is that the div where the image is in dont increase width so I get some scrollbars. I tried to fix that with $("#showInvoice").width(1000); but I still get the scrollbars instead of a div with a width of 1000px.
So I hope that someone can help me with this.
Thanks in advance!
You can try resizing the window after all.
$(window).resize();