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();
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 want to display the original image in the popup using fancybox but it doesn't seems to be working. Instead it is resizing the width and height of image and container.
This is what I'm doing :
$("a.fancybox").fancybox({
padding : 0,
height : $(this).attr('data-height'),
width : $(this).attr('data-height'),
autoDimensions: false
});
My link :
<a href="/system/creatives/images/000/000/008/original/new_creative_form.png?1402035793" data-width="1366" data-height="768" class="fancybox">
<img src="/system/creatives/images/000/000/008/thumb/new_creative_form.png?1402035793" class="img-responsive" alt="New creative form">
</a>
Any idea what I should do?
To see the original size of an image you only need to set fitToView to false like :
$(".fancybox").fancybox({
fitToView: false
});
See JSFIDDLE
On the other hand, if you want to manipulate specific dimensions passed through data attributes, then use the beforeShow callback like :
$(".fancybox").fancybox({
fitToView: false,
beforeShow: function () {
this.width = this.element.data("width");
this.height = this.element.data("height");
}
});
See JSFIDDLE
Notice we still nedd fitToView: false.
IMPORTANT :
This is for fancyBox v2.1.5, make sure you download the latest master to be updated.
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
When I've added this code no setting on width and height works
jQuery(document).ready(function() {
$('a.iframe').fancybox();
});
What are the options to get around it?
Take a look at the documentation here: http://fancybox.net/api
You're using inline content, so make sure that you're setting the autoDimensions option to false along with the width and height settings.
UPDATE: I tested the following solution successfully:
$('a.fbtag').fancybox({
autoDimensions: false,
height: 300,
width: 400
});
This assumes that the class name of the link you're opening is 'fbtag'.
Fancy Box width and Height always varies with the media type.
If we provide 5 * 5 pixel image - Fancy Box will show up with dimensions of Image Dimensions.
To counter the effect of media dimensions and define the default width & height for Fancy Box
Try this:
$.fancybox.open(collection.toJSON(), {
afterShow :function(){},
maxHeight : 600,
minWidth : 500
});
FancyBox width will be minimum - 500 pixels.
FancyBox Height will be proportional to the FancyBox data with maximum Height of 600 pixels.
For example
$.fancybox({
'content':"This will be the content of the fancybox",
'width':'500',
'autoDimensions':false,
'type':'iframe',
'autoSize':false
});
$(document).ready(function() {
$(".fancy-ajax").fancybox({
type: 'ajax',
autoDimensions: false,
'autoSize': false,
'height': 'auto'
});
});
The above codes worked for me. However, I was designing in Twitter Bootstrap.
you can do this two way
With iframe
$(document).ready(function () {
$(".fancybox").fancybox({
width:600,
height:400,
type: 'iframe',
href : 'url_here'
});
})
Without iframe
$(document).ready(function () {
$(".fancybox").fancybox({
width:600,
height:400,
autoDimensions: false,
});
})