dynamic width and height per link

466 views
Skip to first unread message

Lukus

unread,
Oct 23, 2009, 3:53:29 PM10/23/09
to fancybox
Hi.

This does not answer all questions in the forum for adjusting width
and height dynamically with fancybox, however, it may be of value to
those of you that need a general method of specifying width and height
on varying elements without having to modify the fancybox source code.

In switching from Thickbox, I needed something that followed
Thickbox's way of sizing the frame based on url parameters. Here's a
simple bit of code so that each link can have it's own width/height
specified:

$(document).ready(function(){
$('a.fancybox').each(function(){
var fWidth = parseInt($(this).attr('href').match(/width=[0-9]+/i)
[0].replace('width=',''));
var fHeight = parseInt($(this).attr('href').match(/height=[0-9]+/i)
[0].replace('height=',''));
$(this).fancybox({'frameWidth':fWidth,'frameHeight':fHeight});
});
});

HTML:

<a class="fancybox" href="http://www.google.com?
iframe&width=400&height=300">Google</a><br /><br />
<a class="fancybox" href="http://www.yahoo.com?
iframe&width=800&height=1000">Yahoo</a><br /><br />
<a class="fancybox" href="http://jquery.com?
iframe&width=100&height=100">jquery</a><br /><br />


This method can of course be extended such that the url parameters (or
some other attribute) can specify unique settings for initializing
fancybox. Hopefully, it will get you guys thinking on another level
to make this tool more scalable to meet your needs.

For dynamically scaling the frame based on loaded content (i.e., after
ajax or image is loaded into the iframe), you will either have to
modify the source code or use another tool such as NyroModal).

Good luck!

Janis

unread,
Oct 27, 2009, 5:25:41 PM10/27/09
to fancybox
Thanks.
Message has been deleted

michael...@googlemail.com

unread,
Nov 10, 2009, 8:06:09 PM11/10/09
to fancybox
Hello Lukus,

i was just looking for that kind of solution. Works fine.
Thanks a lot for sharing this.

Saludos de Tucuman, Michael

Who wanted to see how it works: http://www.cafetindelsur.de/North_Alliance/fondos_comunes.html
in the middle of the page the Perfil.. links.

timo

unread,
Nov 24, 2009, 5:17:19 AM11/24/09
to fancybox
This is not really working as it should: The parameters should be
removed after reading. If you check the google-link, you will see the
problems:
http://www.google.com?iframe&width=400&height=300
(Google Germany answers "Die Seite – www.google.com/?iframe&width=400&height=300
– existiert nicht." Maybe Google America does not display this...

On 11 Nov., 02:06, "michael.anl...@googlemail.com"
Reply all
Reply to author
Forward
0 new messages