Fancybox - set widths for different overlays - javascript

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 ;)

Related

Resize fancy box based on image size

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
});

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.

Tiny_mce - can't set width

Let me start by saying I am well aware this is a duplicate question - TinyMCE width and height disobedient!
The trouble is I have tried all the css fixe suggested to no avail and I am not using an init (where the docs i found tell you to set your width and height) - I dont know why, I did this along time ago.
Here is the mce code which is being launched in an aftershow event of a fancybox:
$('textarea.tinymce').tinymce({
// Location of TinyMCE script
script_url: '/assets/js/common/tiny_mce/tiny_mce.js',
// General options
theme: "advanced",
plugins: "autolink,lists,pagebreak,table,advlink,iespell,inlinepopups,insertdatetime,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,template,advlist",
// Theme options
theme_advanced_buttons1: "undo,redo,|,cut,copy,paste,|,bold,italic,underline,|,forecolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,sub,sup,|,formatselect,fontsizeselect",
theme_advanced_buttons2: "tablecontrols,|,charmap,iespell,|,cite,abbr,acronym,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,|,fullscreen",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false
});
Please someone, tell me how to make this god damn thing 500px wide. I tried this(does nothing):
.mceEditor > table {
width:500px !important;
}
Tried putting this in general options in my code:
width:"500",
Tried setting columns of the textarea to 2
Tried setting the css width of the following elements with !important:
id=desc_mce_parent, id="desc_mce_tbl"
I have set resizing to false
Nothing changes no matter what I do - why?
Ok... I feel a bit of an idiot saying this but in my case it was because my toolbars were too big. I solved this by spreading my buttons over three toolbars - you can set the width using css but it wont go smaller than your toolbars and the they will not wrap around (seems like that might be a good feature).

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

I want to remove the Start/Stop button in Anythingslider, but leave the rest of the navigation

I'm using AnythingSlider (fun toy) as a website where the panels are the site's pages. As such, I want to disable and remove the Start/Stop button but leave the rest of the navigation. I'm under the impression that it's part of the navigation and can't be optioned out. If that's correct, how do I do it?
Actually, I want to move the navigation to the top right of the panel, as well.
Cheers
Completely removing the "start/stop" button:
buildStartStop: false
(no hiding, no tricks, simply removed)
From the examples here: http://css-tricks.com/examples/AnythingSlider/
The 2nd example does not have the button. If you read the source:
$('#slider2').anythingSlider({
width : 600, // if resizeContent is false, this is the default width if panel size is not defined
height : 350, // if resizeContent is false, this is the default height if panel size is not defined
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
autoPlay : false, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
navigationFormatter : formatText // Format navigation labels with text
})
Look at autoPlay. It is clearly responsible for the start/stop functionality, including the button.
Hiding play/stop button, but still working with autoplay:
startText : '',
stopText : '',
Call of the dogs. It is an option:
autoPlay : false,

Categories

Resources