在沒有手動打開的情況下從iframe調用父級中的Fancybox

Question

我想我可以在這里得到答案-> 從iframe調用父級的Fancybox，演示頁面顯示了我真正想要的（ http://www.picssel.com/playground/jquery/fancyboxFromIframe_16Jan12.html ），但是問題是我沒有相同的腳本...

代替（我猜這是手動打開）：

$(".video").click(function() {
    $.fancybox({
        'padding'       : 0,
        // more options (v2.x) etc

我這樣稱呼照片：

$(document).ready(function() {
    $(".fancybox-thumbs").fancybox({
    padding: 0,
    // etc

我試圖像這樣更改代碼（基於答案和演示）：

$(document).ready(function() {
    parent.$(".fancybox-thumbs").fancybox({
    padding: 0,
    // etc

...但是它不起作用。 有人可以告訴我如何更改iframe中的拇指，打開父頁面上的圖像並調整為屏幕尺寸的代碼嗎？

提前致謝！

Answer 1

我在論壇上從我自己的問題中找到了答案，不幸的是從來沒有（！）...我與您分享，也許對某人有幫助：

1首先，我將.css和.js文件鏈接到父html和iframe html。

2我的父母html

<body>
<div id="more">
<div class="container">
        <div id="sensuality-div">
            <iframe id="sensuality-frame" src="http://www.igorlaszlo.com/sensuality.html" width="100%" height="100%" style="overflow:hidden;height:100%;width:100%;" scrolling="no" allowTransparency="true" frameborder="0" sandbox="allow-same-origin allow-forms allow-scripts" ></iframe>
        </div>
    </div>
</div>
</body>

3我的iframe html

<body id="sensuality-body">

    <div class="view view-add"> 
        <img src="http://www.igorlaszlo.com/uploads/thumbs/41.jpg" alt="Thierry Mercier 16" /> 
        <div class="mask">
            <a href="http://www.igorlaszlo.com/uploads/images/41.jpg" class="fancybox-thumbs" rel="group1" alt="Model : Thierry Mercier - 2009 June" title="34 Dance in the Dark"> 
                <h4>Dance in the Dark</h4> 
            <p>Model : Thierry Mercier</p> 
            <info>Click for zoom</info>
            </a> 
        </div> 
    </div>

    <div class="view view-add"> 
        <img src="http://www.igorlaszlo.com/uploads/thumbs/41.jpg" alt="Thierry Mercier 16" /> 
        <div class="mask">
            <a href="http://www.igorlaszlo.com/uploads/images/41.jpg" class="fancybox-thumbs" rel="group1" alt="Model : Thierry Mercier - 2009 June" title="34 Dance in the Dark"> 
                <h4>Dance in the Dark</h4> 
            <p>Model : Thierry Mercier</p> 
            <info>Click for zoom</info>
            </a> 
        </div> 
    </div>

</body>

4以下是我調用fancybox的原始代碼（不是手動打開）（我在父頁面和iframe頁面上都有它）：

<script>
$(document).ready(function() {
    $(".fancybox-thumbs").fancybox({
    padding: 0,

    openEffect : 'elastic',
    openSpeed  : 150,

    closeEffect : 'elastic',
    closeSpeed  : 150,

    closeClick : true,

    prevEffect : 'elastic',
    nextEffect : 'elastic',

    closeBtn  : true,
    arrows    : true,
    nextClick : true,

    beforeShow: function () {
        this.title = $(this.element).attr('title');
        this.title = '<h3>' + this.title + '</h3>' + $(this.element).attr('alt') + '<br />';
    },

            afterShow: function() {
    },

            helpers : {
        title : { type: 'inside' }
    }
    });
    });
</script>

5駭客：我將找到的代碼（ http://www.dynamicdrive.com/forums/archive/index.php/t-56981.html ）與我的代碼合並，並在iframe頁面上添加了附加腳本：

<script type="text/javascript">
jQuery(function($) {
    if(top !== window){
        var $$ = parent.jQuery;
        $$('#sensuality-div').html($('#sensuality-body').html()).find('a').fancybox({
            padding: 0,

        openEffect : 'elastic',
        openSpeed  : 150,

        closeEffect : 'elastic',
        closeSpeed  : 150,

        closeClick : true,

        prevEffect : 'elastic',
        nextEffect : 'elastic',

        closeBtn  : true,
        arrows    : true,
        nextClick : true,

        beforeShow: function () {
            this.title = $(this.element).attr('title');
            this.title = '<h3>' + this.title + '</h3>' + $(this.element).attr('alt') + '<br />';
        },

        afterShow: function() {
        },

        helpers : {
            title : { type: 'inside' }
        }
        });
        $("#sensuality-body a").click(function(e){
            $$('#' + this.class).click();
        });
    } 
    else {
        $("#sensuality-body a").fancybox({
        padding: 0,

        openEffect : 'elastic',
        openSpeed  : 150,

        closeEffect : 'elastic',
        closeSpeed  : 150,

        closeClick : true,

        prevEffect : 'elastic',
        nextEffect : 'elastic',

        closeBtn  : true,
        arrows    : true,
        nextClick : true,

        beforeShow: function () {
            this.title = $(this.element).attr('title');
            this.title = '<h3>' + this.title + '</h3>' + $(this.element).attr('alt') + '<br />';
        },

        afterShow: function() {
        },

        helpers : {
            title : { type: 'inside' }
        }
        });
    }
});
</script>

也許您可以使其變得更容易，也許我添加了很多不必要的代碼，但我知道它可以正常工作...

我看到很多人正在尋找解決此類問題的方法，希望對您有所幫助！

很快您將可以在www.igorlaszlo.com上看到它

在沒有手動打開的情況下從iframe調用父級中的Fancybox

問題描述

1 個解決方案

解決方案1
0 2013-08-31 13:50:07

在沒有手動打開的情況下從iframe調用父級中的Fancybox

問題描述

1 個解決方案

解決方案1 0 2013-08-31 13:50:07

解決方案1
0 2013-08-31 13:50:07