Question

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>

有了上述内容，我在Firebug中收到错误：“this.inner未定义。”

我显然遗漏了一些东西，但我一直盯着这看太长时间才知道它是什么。任何帮助将不胜感激。

修改感谢您的建议。

我试过他们每一个都无济于事。我最终放弃了我试图使用的方法，而只是打算调用div，并在那里设置我的内容。

最终结果将类似于HTML：http://jsfiddle.net/NjNMC/。该示例中的JS将不会被使用;这就是整个混乱的原因。

Answer 1

而不是this.inner.append('<p>TEST</p>');尝试$(this).html('<p>TEST</p>');

Answer 2

这是一个有问题的问题，但这可能对正在搜索的人有所帮助..

尝试使用在打开动画开始之前调用的“beforeShow”回调..

more info here ..

Answer 3

你可能想要在fancybox窗口中注入这个html。你没有提到te关键字this，尝试$('#fancybox-outer') 请注意，这是未记录的使用。

Answer 4

试

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

Answer 5

 $("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>');
     }
 });

我无法在FancyBox上工作

5 个答案: