Resize fancy box based on image size - javascript

I am loading some images into a fancybox windown. All the images are dynamically called and all have different widths and heights. I am having trouble resizing the fancy box window based on the image and its size. I dont want to set a definite width and height becuase the size changes. I am doing this to set the size but I dont if this is correct. I've read some articles on the issue but cant find a solution
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox({
width: '100%',
height: '100%',
});
});

Looking through fancybox api, it says it has this option:
autoScale: true //If true, FancyBox is scaled to fit in viewport
So you could pass that option into your .fancybox selector and take it for a spin:
$(".fancybox").fancybox({
autoScale: true
});

Related

Fancybox - set widths for different overlays

I have a several blocks of content which open in a Fancybox. This all works as it's meant to but the contents of a couple of the boxes is quite small and doesn't really warrant a 1000px width Fancybox overlay. Is there a way to set the widths of these boxes to something else?
I've tried added a width to the content box (#login-overlay) for example but Fancybox just ignores this as it is built around the content once the relative link has been clicked which opens the overlay.
Here's my javascript:
$(document).ready(function() {
$(".fancybox").fancybox({
margin: [20,20,20,20],
padding: [20,20,0,20],
openEffect: 'fade',
openEasing: 'easeInQuad',
openSpeed: 400,
title: false,
//closeBtn: false,
//autoCenter: false,
scrolling : 'no', // turns off scrolling in box.
fitToView : false, // allows box to overflow out of viewport.
autoSize: false, // needs to be turned off for width/maxWidth to work.
height: 'auto', // if autoSize is set to 'false', this needs to be 'auto' so height matches content.
width: '100%',
maxWidth: 960,
helpers: {
overlay: {
// locked: false, // Prevents jump to top of window when opening a fancybox.
showEarly : false
}
},
tpl: {
closeBtn : '<a title="Close" class="fancybox-item fancybox-close icon-circle-cross" href="javascript:;"><span>Close</span></a>'
}
});
});
As you can see I'm using maxWidth to see the width of the default size. I couple of boxes could be almost half that. I've tried setting auto so see if it would inherit the width set on the content block in the CSS but this doesn't seem to work.
Any ideas that don't involve writing a whole need block of script for $(".fancybox-narrow")?
EDIT
I actually found an example on the Fancybox page which uses data-fancybox-width to set the width of an overlay: http://jsfiddle.net/wgPTR/
Though this doesn't seem to work with my code. The width sets but it isn't responsive anymore. Setting fitToView to false seems to get that working but then the fancybox crops when there's not enough vertical space and it's un-scrollable.
UPDATE
Just to update, here's a CodePen of the working (default) fancybox: http://codepen.io/moy/pen/YGgjqv
I've also created a forked version which uses data-fancybox-width to set a width - which works but unfortunately the fancybox is no longer responsive. The only way to get this to work is to take out fitToView: false which breaks my vertical scrolling.
Any ideas?
I seem to have found a solution (with a lot of help from the CSS Tricks forum) by using the following beforeLoad if statement:
beforeLoad: function() {
if ($(this.element).hasClass('fancybox--small')) {
this.maxWidth = 600;
}
}
Basically it checks for the class fancybox--small and if it's present it amends the maxWidth of the fancybox.
Can't see any problems with it (yet), checking in IE it seems to work down to IE8 as well. Hopefully this helps someone else but let me know if you find any issues with it ;)

jQuery Cycle plugin: centering background images when browser is resized

I have a slideshow using the jQuery Cycle plugin, changing divs with a background image (the images are very wide and if the browser is smaller, they should be centered and cut off).
<div class="banner_images">
<div style="background-image:url(banners/1.jpg)"></div>
<div style="background-image:url(banners/2.jpg)"></div>
<div style="background-image:url(banners/3.jpg)"></div>
</div>
Before Cycle is applied, the page behaves exactly as intended when the browser window is resized: http://30daysoffalafel.com/test/index-nojs.html
After Cycle is applied, when the browser is resized the background image doesn't stay centered. Refreshing the browser fixes the problem.
http://30daysoffalafel.com/test/
<script>
$(document).ready(function() {
$('.banner_images').cycle({
fx: 'fade',
pager: '.banner_controls div'
});
});
</script>
Any ideas for how to change the behavior so that the image background centers on browser resize the same way after cycle is applied? I would prefer not to add js to refresh on window resize.
Thank you in advance for any suggestions.
Try
$('.banner_images').cycle({
fx: 'fade',
pager: '.banner_controls div',
fit: 1,
width: '100%',
slideResize: true,
containerResize: false
});

How to make jQuery UI dialog occupy full window and dynamically adjust to window size change?

At the moment, I can set width attribute to auto to take the full width of the window, and it dynamically adjust itself if the window size is being changed (e.g. re-sizing the browser windows or displaying it on a different screen size). Example: http://jsfiddle.net/NnsN2/
However, I can't get the height to work the same. It will always be the minimum height that will fit the content, even though I've tried setting it to auto.
The usual approach of getting the window height first ($(window).height()) and use that for height doesn't work here, because it will be static and will not dynamically adapt to change of window size.
How can I make the height always take the full height of the window as well as be able to adapt itself to window size change?
You can try to get the element's #id or .class at runtime and then make the width/Height according to the window width and height:
$(window).resize(function () {
$('.ui-dialog').css({
'width': $(window).width(),
'height': $(window).height(),
'left': '0px',
'top':'0px'
});
}).resize(); //<---- resizes on page ready
checkout in fiddle
Here is how I was able to "solve" this problem for jQuery UI Ver 1.8.17:
After the dialogue has been opened, and assuming that you have captured its id, use the following:
$("#DlgID").parent().css('height', $(window).height());
The actual height is dictated by the parent of your <div> containing the dialogue content, hence the reference. You can also use this method to control other properties of the parent.
Happy coding!
You can use jquery plugin :
$("#demo").dialog({
width: 500,
height: 300,
dialogClass: "dialog-full-mode" /*must to add this class name*/
});
//initiate the plugin
$(document).dialogfullmode();

What parameter to use for Fancybox so IFRAME opens in an autosized window?

As the title says really. I'm using Fancybox, the popular jQuery lightbox script on my site.
I've set a hyperlink which pops open the lightbox using an IFRAME of the requested page.
This works fine, however...
The lightbox is too big, I'd like it to auto size to the content. On the documentation at http://fancyapps.com/fancybox/#docs you can see in the table there's an autosize parameter.
Is this it, can someone who knows jQuery please help show me how this appears in my configuration of the script?
Here's my current configuration:-
$(document).ready(function() {
$(".fancybox").fancybox({
type: 'iframe',
nextClick: false
});
});
I have tried autoSize on your site and it does not seem to work. But this code seems to do the trick:
$(".fancybox").fancybox({
type: 'iframe',
beforeShow: function(){
this.width = $('.fancybox-iframe').contents().find('div:first').width();
},
nextClick: false
});
I found it in this answer and adapted it to your layout to retrieve the width from the root div.
But it would be better to understand why autoSize does not have any effect on the iframe you load.
Looking at your URL, the IFRAME has a fixed width of 520px on the first div element.
<div style="width: 520px; margin: 0 auto;">
Try removing or reducing that width to make it less wide - according to your needs.

fancybox 2 with div

I thought I had trouble using fancybox 2 with nivo slider wrapped by a div, but after some tests, I found that i have trouble using facybox 2 with div. So I will reorganize my question.
To make it clearer, I will post my codes in the following:
For css:
<style>
#content{
background: red;
}
#maximize{ width: 24px; height: 24px; }
</style>
For html:
max
<div id="content"> </div>
For JS:
$('#maximize').click(function() {
$('#maximize').fancybox({
'href' : '#content'
});
});
It works as expected if I clicked the max button. However, if I closed the fancybox, the popup box is gone, and the original div with id = "content" disappear as well. this is not expected. I want the content become what it was, but not disappeared.
Other question: How can I change the size of the fancy box popped up? I want to make the fancy box larger.
I hope my question is clear enough. Thanks in advance.
You don't actually need :
$('#maximize').click(function() {
$('#maximize').fancybox({
'href' : '#content'
});
});
... but only this :
$('#maximize').fancybox({
// API options here
});
... since .fancybox() already binds the click event to the selector #maximize, otherwise is redundant .... so does the 'href' : '#content' option since the href is already taken from the href attribute in the link.
On the other hand, fancybox will always hide the opened inline content since it would be its expected state (isn't it redundant to show in fancybox something that is already visible?) ... anyway, you could make it visible again using the callback afterClose like :
$('#maximize').fancybox({
afterClose: function() {
$("#content").show();
}
});
Regarding the second question, use the width and height options along with fitToView and autoSize to set your preferred box dimensions like :
$('#maximize').fancybox({
fitToView: false, // avoid the adjusting size to viewport
autoSize: false, // avoid set size based on content
width: 420, // or whatever
height: 320,
afterClose: function() {
$("#content").show();
}
});​
See working DEMO

Categories

Resources