在 Fancybox 中合并“从 iframe 在父级中打开”、“侧面标题”和“自定义标题”答案

【问题标题】：Merging 'open in a parent from iframe', 'title on side' and 'customising title' in Fancybox在 Fancybox 中合并“从 iframe 在父级中打开”、“侧面标题”和“自定义标题”
【发布时间】：2017-10-02 03:39:37
【问题描述】：

我想在 iframe 的父页面中打开 Fancybox，标题在右侧，并为我的图片使用标题和描述。

我设法使这三个想法与这些示例分开工作：

Open iframe in parent

Title on right

Custom title using a title and img alt

但是，我在合并这三个代码时遇到了问题。我正在使用 Fancybox 2.1.7。

在阅读了大量关于 iframe 和回调的父级的帖子后，我意识到我的问题可能是我需要使用的回调 - beforeShow 和 afterLoad - 在 iframe 的父级中不起作用。

我最终找到了这段代码，试图加入我放入 iframe 页面的“parent-from-iframe”和“title-on-right”：

$(document).ready(function () {
    $(".fancybox").click(function (e) {
        e.preventDefault();
        parent.$.fancybox({
            // $(".fancybox").fancybox({
            href: this.href,
            helpers: {
                title: null
            },
            beforeShow: function () {
                var html = '<span>' + this.title + '</span>';
                $('.fancybox-sidebar').append(html);
            },
            tpl: {
                wrap: '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"><div class="fancybox-sidebar"></div></div></div></div></div>'
            },
        }); // fancybox
    }); // click
}); // ready

parent.$.fancybox({ 或$(".fancybox").fancybox({ 与this.href 的组合使beforeShow 完全停止工作。但是当 $(".fancybox").fancybox({ 未注释时，beforeShow 按预期工作。当我使用 parent.$.fancybox({ 和 this.href 未注释时，我的图片会在父页面中打开。

如何在父页面中调用 beforeShow 和 afterLoad（来自 title-and-description 代码）？

我试过了：

$(document).ready(function () {
    $(".fancybox").click(function (e) {
        e.preventDefault();
        parent.$.fancybox({
            //$(".fancybox").fancybox({
            href: this.href,
            title: this.title,
            helpers: {
                title: null
            },
            parent.$.fancybox.click(function () {
                afterLoad: function () {
                    var title = this.title ? this.title : " ";
                    var alt = $(this.element).find('img').attr('alt') ? $(this.element).find('img').attr('alt') : " ";
                    this.title = '<h3>' + title + '</h3>' + alt + '<br />';
                }
            }); //closes parent afterLoad
            beforeShow: function () {
                parent.$.fancybox.ready(function () {
                    var html = '<span>' + this.title + '</span>';
                    $('.fancybox-sidebar').append(html);
                }); // closes parent beforeShow
            }, //closes parent beforeShow
            tpl: {
                parent.$.fancybox.ready(function () {
                    wrap: '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"><div class="fancybox-sidebar"></div></div></div></div></div>'
                }); //closes parent tpl
            }, //closes tpl
        }); // fancybox
    }); // click
}); // ready

但它没有用。我是初学者，我想我知道需要做什么，但我不知道该怎么做。

这是一个本地主机项目。我在这里读到有人说这可能是个问题，但是由于所有三个代码都对我来说完美，所以我希望它不会是......

任何帮助将不胜感激！

【问题讨论】：

标签： jquery iframe callback fancybox parent

【解决方案1】：

问题似乎出在这里：

helpers: {
        title: null
    },
parent.$.fancybox.click(function() { <------ what is this ?
    afterLoad: function () {

您必须传递一个包含选项及其值的对象。

顺便说一句，我认为任何现代代码编辑器都会出现这种语法错误。

【讨论】：

谢谢，我会调查的。我用记事本++