CODEWITHSUNDEEP
jqueryfancybox
taketheleap
taketheleap

Reputation: 97

I cannot get afterLoad to work in FancyBox

HTML:

<div class="left">
    <a rel="group" href="images/reveal.jpg" title="Lorem ipsum dolor." class="fancybox"><img src="images/images3.jpg"></a>
    <a rel="group" href="images/reveal2.jpg" title="Lorem ipsum dolor." class="fancybox"><img src="images/images1.jpg"></a>
    <a rel="group" href="images/reveal3.jpg" title="Lorem ipsum dolor." class="fancybox"><img src="images/images2.jpg"></a>
</div>

JS:

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox({
        afterLoad: function() {
            this.inner.append('<p>TEST</p>');
            this.content = '<p>TEST2</p>' + this.content.html();
        }
    });
});
</script>

With the above, I get an error in Firebug: "this.inner is undefined."

I'm clearly missing something, but I've been staring at this too long to see what it is. Any help would be appreciated.

EDIT: Thanks for the suggestions.

I tried every one of them, to no avail. I ended up ditching the method I was trying to use, and am simply going to call a div, and style my content in there.

The end result will look something like the HTML here: http://jsfiddle.net/NjNMC/. The JS in that example won't be used; that's what started this whole mess.

Upvotes: 0

Views: 15050

Answers (5)

Ami Gatra Yudhono
Ami Gatra Yudhono

Reputation: 1

 $("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox({
     openEffect: 'none',
     closeEffect: 'none',
     afterLoad: function () {
         this.outer.prepend('<a href="index.html"> <img src="img/logo.svg" class="logoShow"></a>');
         this.outer.append('<div id="btnExpand"><img src="img/nav_menu_expand.png" input type="submit"/></div>');
     }
 });

Upvotes: -1

Jose Philip Raja
Jose Philip Raja

Reputation: 188

This is an year old question, but this might be of help to someone who is searching..

Try using "beforeShow" callback that gets called right before opening animation starts..

more info here..

Upvotes: 2

Arnoud Kooi
Arnoud Kooi

Reputation: 1747

You probabbly want to inject this html in the fancybox window. you are not referring to that with te keyword this, try $('#fancybox-outer') Note that this is undocumented use.

Upvotes: 0

Igor
Igor

Reputation: 3656

Instead of this.inner.append('<p>TEST</p>'); try $(this).html('<p>TEST</p>');

Upvotes: 2

John x
John x

Reputation: 4031

try

$(document).ready(function() {
    $(".fancybox").fancybox({
        afterLoad: function() {
            $(".fancybox")[0].inner.append('<p>TEST</p>');
            //$(".fancybox")[0].content = '<p>TEST2</p>' + $(".fancybox")[0].content.html();
        }
    });
});

Upvotes: -1

Related Questions