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

Posted 2023-05-09

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

【英文标题】：Merging 'open in a parent from iframe', 'title on side' and 'customising title' in Fancybox

【发布时间】：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

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

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

任何帮助将不胜感激！

【参考方案1】：

问题似乎出在这里：

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

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

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

【讨论】：

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