http://jsfiddle.net/work77/fb61a6za/ contains a fancybox link that opens up http://jsfiddle.net/work77/9eypabj6/ in an iframe.
The Iframe content consists of a random image (of varying unpredictable size) with a form beneath it. I'm trying to load that iframe in a fancybox window that is responsive onload and when resized, has no scrollbars ever and the aspect ratio is always preserved. I've tried all different combinations of fancybox properties ( hxxp://fancyapps.com/fancybox/) but nothing seems to work. I'm now just randomly shooting in the dark. Any Suggestions?
$(".fancybox").fancybox({
openEffect: 'elastic',
closeEffect: 'elastic',
prevEffect: 'fade',
nextEffect: 'fade',
fitToView: false, //
maxWidth: "90%", //
type: 'iframe',
scrolling: 'no',
iframe: {
preload: false
}
});
This worked for me. Not 100% sure how I got there, but aspectRatio : true helped.
Also I have used fitToView: true, not false.
$('.fancybox').fancybox({
aspectRatio : true,
modal : true,
scrolling : 'no',
width : 500,
height : 250,
autoSize : false,
autoWidth: false,
autoHeight: false,
fitToView: true,
(etc)...
Related
I am new to javascript and jQuery and am trying to make a slideshow using Fancybox.
The problem is that I want the images to display on a box of the same size regardless of whether they are portrait or landscape images. My images are all either 700 X 525 for landscape or 525 X 700 for portrait.
The way I have it the landscape images load like it is showed on the top of the image below, the portrait images load as shown in the middle, and I want the portrait images to load as shown on the bottom, with the box with the same dimensions as if it were landscape:
I think what I should do is change the left padding depending on the image dimensions but I have no idea how.
Thank you for your help in advance.
I am using Fancybox version: 2.1.4 and I have set the defaults as such:
padding : 15,
margin : 20,
width : 800,
height : 600,
minWidth : 100,
minHeight : 100,
maxWidth : 9999,
maxHeight : 9999,
autoSize : true,
autoHeight : false,
autoWidth : false,
autoResize : true,
autoCenter : !isTouch,
fitToView : true,
aspectRatio : false,
topRatio : 0.5,
leftRatio : 0.5,
I know this post is 11 months old, but I thought I would share my solution in case it helps someone else out in the future.
Basically I have set a min-width css attribute onto the fancybox element and am comparing that against the current image width, if it is smaller I am adding padding to the fancybox element so that the fancybox element stays the same width but the image inside is horizontally centered.
Step 1: in your css set a min-width on the fancybox element. This is the width that you want your fancybox element to stay at regardless of image width.
.fancybox-wrap { min-width: 1120px; }
Step 2: add in the afterLoad function when you call fancybox
$(".fancybox").fancybox({
afterLoad: function(current) {
var $el = $(".fancybox-wrap").eq(0); // grab the main fancybox element
var getcurrwidth = current.width; // grab the currrent width of the element
var getdesiredwidth = $el.css('min-width'); // grab our min-width that we set from the css
var currwidth = Number(getcurrwidth);
var desiredwidth = Number(getdesiredwidth.replace('px', ''));
if (currwidth < desiredwidth)
{
var custompadding = (desiredwidth - currwidth) * 0.5; // if the width of the element is smaller than our desired width then set padding amount
this.skin.css({'padding-left': custompadding+'px', 'padding-right': custompadding+'px' }); // add equal padding to the fancybox skin element
}
}
});
Not sure how to explain this, but here goes:
Instead of Fancybox opening a 'box' on the page which can have a scroll bar inside it to view overflow content, I want the content to just sit on top of the current / parent content.
So, at the moment, if the browser inner width was 800px and you were opening content that needed 1200px height, then the Fancybox 'box' height can be set at 800px and a scrollbar is used to scroll the content of the new 'box' (as the content is 1200px). I want to do it so there is no new scrollbar, but the new content is the full 1200px which pushes the main/parent page down (forcing a scroll bar on the parent if none already existed).
Clicking the close button would still close it.
Is this possible? Do I make sense?
This is for FancyBox 2.
So for this html
<a class="fancybox" href="{target content}">open content at 1200px height</a>
use this script
$(".fancybox").fancybox({
type: "html", // set type of content -Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
width: 800, // or whatever
height: 1200,
autoSize : false, // so the size will be 800x1200
autoCenter: false, // so fancybox will scroll down if needed
fitToView : false, // so fancybox won't try to scale the content to the size of the browser window
scrolling : "no" // so no scroll bars inside fancybox
});
NOTES: You cannot set specific dimensions to images, they will be either full size (when fitToView is set to false) or scaled to the viewport (when fitToView is set to true); the other types of content can be adjusted to the dimensions of width and height as in the code above.
TIP : you may open different type of content (or target different contents) with different heights each and change the height of fancybox dynamically using the HTML5 data-* attribute .... so for this html:
<a class="fancybox" href="{target content 01}" data-height="1200">open content 01 at 1200px height</a>
<a class="fancybox" href="{target content 02}" data-height="1000">open content 02 at 1000px height</a>
<a class="fancybox" href="{target content 03}" data-height="1450">open content 03 at 1450px height</a>
then add the callback beforeShow to your script to get the value of data-height like this
$(".fancybox").fancybox({
type: "html", // set type of content -Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
width: 800, // or whatever
// height: 1200, // no fixed height but obtained dynamically
autoSize : false, // so the size will be 800x1200
autoCenter: false, // so fancybox will scroll down if needed
fitToView : false, // so fancybox won't try to scale the content to the size of the browser window
scrolling : "no", // so no scroll bars inside fancybox
beforeShow : function(){
this.height = $(this.element).data("height");
}
});
I am using FancyBox and I am having a slight problem.
I have a box, that is 930px wide where users can interact with things inside the popup.
The problem is, when a user in using a screen resolution that is, lets say 800x600, some of the items in the box do not display. The box has a fixed height and width (930x400).
I have tried to use scrolling: auto and scrolling: yes but nothing seems to work
Is there a way around this?
Thanks
UPDATE: - Included code snippet
$.fancybox({
"padding" : 3,
"type":"iframe",
"href":"/requirements/"+$(".sf_admin_form_field_id div.content").html()+"/edit?req_id="+$(this).children(".id").children("div").children("input").val(),
"width" : 934,
"height" : 391,
"overlayShow": true,
"overlayOpacity" : 0,
"scrolling" : "yes",
"onClosed" : function(){ window.location.reload();
}
Try
scrolling: 'auto' (note the quotes!)
and if this does not work can you include the fancybox initializer that you are using??
I'd like to use Fancybox 2 with jQuery to open a page via Ajax, form_page.php and then get the response in the same fancybox window...
I use this as js:
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 550,
maxHeight : 450,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
html is:
<a class="various fancybox.ajax" href="/form_page.php">Ajax</a>
I just need that the POST is loaded in the same /form_page.php inside Fancybox.
I use the iframe variation when putting forms in Fancybox. This allows me to do regular posts, etc. When the form is successfully processed, I use JavaScript to close the Fancybox "pop-up" and refresh the calling parent document.
Fancybox "Pop-up" Forms:
$('a.popup').fancybox({
'type':'iframe',
'hideOnContentClick':false,
'overlayShow':true,
'speedIn':100,
'speedOut':50,
'width':600,
'height':500,
'padding':0,
'margin':0,
'onClosed':function(){window.location.reload();},
'onComplete':function(){$('input.focus:last').focus();}
});
Close "Pop-up":
if (window.self !== window.top) {
// is nested
parent.$.fancybox.close();
}
I think you can try to declare your fancybox and use the option afterShow to bind your form:
$('.various').fancybox({
closeClick: false,
afterShow: function() {
$("form#user_new").bind('ajax:success', function(evt, data, status, xhr) {
// When your form will be submitted and successfull,
// You can try to open a fancybox here with your result here
}
}
});
That's not really a code to copy/paste because I didn't give exactly what you want, for the simple reason that I don't know as well ;) but if it can help.
I am using a fancy box which displays images, youtube video link and other videos. The user can navigate in the fancy box to go to next display or previous display. My problem is the fancy box doesn't get re-sized based on the displayed content. My code is as below:
$.fancybox(href,{
'autoScale': true,
'autoDimensions': true,
'padding': 30,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe', //'iframe', //'image',
'changeFade': 300,
'cyclic': false,
});
I have tried solving this issue by calling a function in "onComplete" but no success till now. Please provide few inputs on this.
Thanks
setting "autoScale" to false should work...
I'm not a web developer by any means, but the documentation says:
$.fancybox.resize Auto-resizes FancyBox height to match height of content
Is that what you want?
You need to call a new fancybox within the old one. If you "open" a new fancybox from within the first one, it will resize itself. Try:
<script type="text/javascript">
$(document).ready(function() {
var content = '
<div id="nextbox">Box 1</div>
<script type="text/javascript">
$("#nextbox").click(function() {
$.fancybox('Box2',{
'autoDimensions': false,
'height' : 400,
'width' :400
});
});
</script>
';
$.fancybox(content,{
'autoDimensions': false,
'height' : 200,
'width' : 200
});
</script>
This will open up a fancybox that says "Box 1". When you click on "Box 1" it will resize from 200px by 200px to 400px by 400px and change text to "Box 2". And you can keep on doing this for as many boxes as you want.
I see the question is old, but hope someone can use this as I struggled a long time myself finding out how to resize fancybox once it was initiated.
In my case while using Fancybox 2 the setting was called fitToView
set it to true
here is what I use to launch fancybox, you do not need to put it in ready
(function($){
$(document).on('click','.fancybox',function(e){
//don't follow link
e.preventDefault();
//update fancybox image registry for gallery and open it
var fbox = $('.fancybox');
//this always opens the first image first
$.fancybox(fbox,{
index: fbox.index(this),
padding: 5,
live: false,
helpers : {
overlay : {
css : {
'background-color' : 'rgba(17, 17, 17, 0.3)',
},
closeClick: true,
showEarly : true,
locked : false //if true, causes background to jump
},
thumbs : {
width : 140,
height : 100,
source : function(item) {
var href = $(item.element).data('thumb');
if(typeof href === 'undefined'){
if (item.element) {
href = $(item.element).find('img').attr('src');
}
if (!href && item.type === 'image' && item.href) {
href = item.href;
}
}
return href;
}
}
},
scrolling: 'visible',
fitToView: true,
iframe:{
scrolling : 'auto',
preload : false
}
});
});
})(jQuery);