Load external HTML into FacnyBox

[Voyageur]

I am going nuts with this.


$("a.fancyBoxModal").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 500,
'speedOut' : 400,
'overlayShow' : true,
'overlayOpacity' : 0.7,
'hideOnOverlayClick' : true,
'hideOnContentClick' : true,
'type' : 'iframe'
});

Above is the code I use to open an iFrame when a link with the class
"fancyBoxModal" is clicked. It works.

But I don't want an iFrame; I just want to open a modal containing the
body content or even a div from an external HTML document.If I remove
the bottom line 'type' : 'iframe', I just get the fancyboxloading.png
and nothing else. What is the "type" I must use to get a modal window
in FancyBox? Or am I going about this the wrong way?

Help appreciated

[WasserDragoon]

I think you just have to use the ajax option...

$("a.fancyBoxModal").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 500,
'speedOut' : 400,
'overlayShow' : true,
'overlayOpacity' : 0.7,
'hideOnOverlayClick' : true,
'hideOnContentClick' : true,

'ajax' : { 'url' : 'file.html' }
});

Best regards,
Danny.

[Voyageur]

Danny,

Thanks for your response. Unfortunately your suggestion did not work.
Also I think I would have to write separate code for every link on the
page which I think runs contrary to the way jQuery is meant to work ie
'one code - many uses'.

My HTML is simply

<a href="disclaimer.html" class="fancyBoxModal" >Disclaimer</a>

and I would have thought the code should pick up the URL form the link

I have tried looking at the Ajax example on the Fancybox site but I
can not find the source code for this example.

Regards

Kevin

> > But I don't want an iFrame; I just want to open amodalcontaining the

[JFK]

maybe
http://groups.google.com/group/fancybox/browse_thread/thread/b1489aaedb7aa16c/

[Voyageur]

Hi JFK

Thanks gor your response.

I had already found that post and tried it. I am probably being a bit
dense but I could not get it to work. I am going to give it another
shot tomorrow. I will post my results (if any!)

Regards

Kevin

On Jul 14, 7:00 pm, JFK <jfk.d...@gmail.com> wrote:
> maybehttp://groups.google.com/group/fancybox/browse_thread/thread/b1489aae...

[mygoggie]

I think you are missing the type. Try

        $("a.fancyBoxModal").fancybox({
                'transitionIn' : 'elastic',
                'transitionOut' : 'elastic',
                'speedIn' : 500,
                'speedOut' : 400,
                'overlayShow' : true,
                'overlayOpacity' : 0.7,
                'hideOnOverlayClick' : true,
                'hideOnContentClick' : true,

                'type': 'ajax',
                'ajax' : { 'url' : 'file.html' }
                 });

Voyageur wrote:

No virus found in this incoming message.
Checked by AVG - www.avg.com 
Version: 9.0.830 / Virus Database: 271.1.1/3006 - Release Date: 07/15/10 04:26:00

  

[William Donovan]

I've been trying to do this as well.

I was able to load the external html file which only contained a div with content in it.
I did however have a lot of issues in IE and a caching issue.

were you able to load anything into fancy box.

I did it via:
$(".button").fancybox({
            'modal'                : false,
            'autoScale'         : false,
            'width'             : 750,
            'overlayOpacity'    : 0,
            'overlayShow'        : true,
            'height'            : 'auto',
            'autoDimensions'    : false,
            'enableEscapeButton': true,
            ajax : {
                    'cache': false,
                    'type': "POST"
                    }
    });


William Donovan

--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.

[platypusman]

William,

What does your HTML look like?  I am not having any luck with this...

(Would be cool if you could just link to an element like so:  <a href="thepage.html#theElement" class="fancybox"> to just target that element.  Alas.)

[Ulrik Høyer Kold]

... I couldn't get your example to work either. But after changing the 'ajax' option to the following, everything was just peachy:

'ajax' : { url : this.href }

Just my 2 cents worth.

[Philippe]

Hey Ulrik,

Can I ask you a question for another 2 cents lol

Where do I have to change this 'ajax' code?
In my javascript head part?

Thanks a lot

[Joelle]

I tried loading an iframe, since the form I'm using is loading a page
from Constant Contact. So on submit of the form, I want, instead of
an
old-school pop-up window, to load the page they've assigned in the
action to a lightbox. Here's my code, based on examples I found in
the
Usage area of Fancybox's website.

$(document).ready(function() {
$("#iframe").fancybox({
'hideOnContentClick': true,

'transitionIn' : 'elastic',
'transitionOut' : 'elastic',

'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false,
});
});

#iframe is the id on my submit button. I also tried it as my form id
to no avail.

On click the lightbox loads, but it displays the message "The
requested content cannot be loaded. Please try again later."

My assumption is that it's not passing the information from the form
into the URL that it's trying to open. I'm assuming I need some Ajax,
but am not sure how to what to do with it or why. It works as a
regular popup, I just can't get it to load the page using this
lightbox method.

Any further tips? Thank you so much!