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'
});
});
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
Here's a link to the plugin:
Website
I tried all the options in the documentation as well as answers in SO but none worked for me.
My problem is simple I think. I just need to adjust the height of my fancybox relative to the height of my <div> that is inside it.
here's my code:
$("#home #_prcButtons input[type='button']").each(function() {
$('#' + this.id).click(function() {
var getId = (this.id === '_proceed') ?
$.fancybox({ href: '#questionToEnter', helpers: { overlay: { locked: false, css: { 'background' : 'rgba(58, 42, 45, 0.95)' } } }, openEffect: 'fade', closeEffect: 'fade'}) : window.location.href = "https://google.com";
});
});
Here's the css of my div:
#questionToEnter { display:none; width:450px; margin:auto; background:#f7d4d4; padding:10px;}
Here's how it looks:
As you can see, the fancybox won't adjust to the height of my div.
Please help me.
Cheers!
Solved my problem!
I realized that my <div> appears less than 100px in height.
Adjusting the minHeight did the trick:
minHeight: '60';
Cheers!
You can specify it using "height" attribute in fancybox. See this example:
<script type="text/javascript">
$(document).ready(function () {
$('.fancybox').fancybox({
type: "iframe",
padding: 0,
fitToView: false,
autoSize: false,
width: 718,
height: 503
});
});
</script>
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 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
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();