Resize Box By Varible

87 views
Skip to first unread message

GEPD

unread,
Jun 13, 2009, 1:31:25 AM6/13/09
to fancybox
hello,
I have a problem with the code, would want to pass the width and
height of the window by means of a variable is this possible, how?

sorry for my english

GEPD

unread,
Jun 13, 2009, 6:11:03 PM6/13/09
to fancybox
I will add an example than it was trying to do:

$(document).ready(function(){
var w = 110;
var h = 200;
$("a.modal").fancybox({
'frameWidth': w,
'frameHeight': h,
});
});

but this code don't work, exist other solution?

greetings

JFK

unread,
Jun 14, 2009, 11:33:07 PM6/14/09
to fancybox
YES, your script DOES work BUT no with images
size of images (I may be wrong) are calculated different to fit within
the view port so even thou you set the 'frameWidth' and 'frameHeight'
options, your image won't escalate to that arbitrary size.

However, the script will work for other type of content like a webpage
within iframe so:

<script type="">
$(document).ready(function(){
var w = 900;
var h = 300;
$("a.modal").fancybox({
'frameWidth': w,
'frameHeight': h
});
});
</script>

and

<a class="modal" href="http://fancy.klade.lv//?iframe" >where width
and height are variables</a>

will work just fine ... you can play modifying the values of those
variables

PhilD41

unread,
Jun 15, 2009, 11:33:09 AM6/15/09
to fancybox
I am trying to use this to change the size of a box with inline
content from a hidden div. How would I pass the variables to fancybox
or the java function listed from within the <a id="inline"
class="modal" href="#deidre_mccalla"> call? I am a little confused
and javascript is not my strength.

thanks!
- Philip

Forrest Gump

unread,
Jun 15, 2009, 4:42:06 PM6/15/09
to fancybox
1. don't type a comma at the end of the LAST option value

BAD:
[snip]
'frameHeight': h,
<!-- ^^^^^ -->
});
[snip]

GOOD:
[snip]
'frameHeight': h
<!-- ^^^^^ -->
});
[snip]

2. java has nothing to do with fancybox http://en.wikipedia.org/wiki/Java_(programming_language)
Write javascript, or js.

> > YES, your script DOES work BUT no with images
> > size of images (I may be wrong) are calculated different to fit within
> > the view port so even thou you set the 'frameWidth' and 'frameHeight'
> > options, your image won't escalate to that arbitrary size.

I think you're right (except it does not work with last comma).

Andreas

JFK

unread,
Jun 16, 2009, 5:23:34 PM6/16/09
to fancybox
@andreas
It does work in FF,Opera,Chrome and Safari(Windows Beta4)
of course not in IE

but you are right, no comma at the last is a BEST PRACTICE for cross
browser
thanks

On Jun 15, 1:42 pm, Forrest Gump <a...@sofortsurf.de> wrote:
> 1. don't type a comma at the end of the LAST option value
>
> BAD:
> [snip]
> 'frameHeight': h,
> <!--                ^^^^^ -->
>         });
> [snip]
>
> GOOD:
> [snip]
> 'frameHeight': h
> <!--                ^^^^^ -->
>         });
> [snip]
>
> 2. java has nothing to do with fancyboxhttp://en.wikipedia.org/wiki/Java_(programming_language)

Forrest Gump

unread,
Jun 16, 2009, 8:27:04 PM6/16/09
to fancybox
Very strange, I've tested it in FF and in IE and it did not work with
this comma. Now I've tested it again and it works with comma and
without comma.

Oh, just found out, I think I've only tested it with the rendering
machines FF and IE of editor PSPad, there it will not work with this
comma.

Andreas

JFK

unread,
Jun 17, 2009, 2:38:16 PM6/17/09
to fancybox
@philip
use the same script for inline content (which I suppose has
style="visibility:hidden;")

PhilD41

unread,
Jun 17, 2009, 3:06:38 PM6/17/09
to fancybox
I have the following script in place:

<script type="">
$(document).ready(function(){
var w = 900;
var h = 300;
$("a.modal").fancybox({
'frameWidth': w,
'frameHeight': h
});
});

What I don't understand is how to changed the 'w' and 'h' variables
for the individual <a> items that use fancybox. Is there a way to put
them in the CSS or do I need a javascript function to do this on
click? Is fancybox designed to see a param item in the <a>? I
haven't found anything that works so different anchors show in
different size fancybox windows.

Thanks for the help. I am sure I am just missing something simple.

- Philip

PhilD41

unread,
Jun 24, 2009, 5:14:55 PM6/24/09
to fancybox
I am still missing something here. How do I use the variables to have
two links on the same page open up fancybox windows of different
widths and heights? I am sure it is something simple, but I am not
understanding it.

Thanks for any help, or just a pointer to a site doing this. I don't
mind looked at example code to figure something out.

- Philip

JFK

unread,
Jun 24, 2009, 6:41:38 PM6/24/09
to fancybox
@Philip

your issue has nothing to do with this thread
if you want to use different sizes for different type of content then
set a different class and different script for each one:

so for
<a class="fancy1" href="xxx"
<a class="fancy2" href="yyy"

then
$("a.fancy1").fancybox({
'frameWidth': 800,
'frameHeight': 600
});

$("a.fancy2").fancybox({
'frameWidth': 640,
'frameHeight': 480
});

size is set in pixels (only)

666

unread,
Mar 2, 2012, 8:24:03 AM3/2/12
to fanc...@googlegroups.com
for swf e.g. a really flexible rezize is THIS

jQuery(document).ready(function($){
$('a[href$=".swf"]:not(.nofancybox)').addClass('fancybox-swf');     //search for links with .swf and add a class
$('a.fancybox-swf, area.fancybox-swf').each(function(){               //in the id attribute (you can take what you want) is the size given like: "800, 600"
var $a = $(this);
var swfID = $a.attr('id');
var data = swfID.split(", ");
var swfWidth = parseInt(data[0]);                                     //get the size
var swfHeight = parseInt(data[1]);
$a.fancybox({                                                                //do the fancybox call
'type' : 'swf',
'width' : swfWidth,
'height' : swfHeight
});
});
});

Reply all
Reply to author
Forward
0 new messages