打电话给Fancybox从iframe的父母没有手动打开

我想我可以在这里得到答案 - >call Fancybox in parent from iframe和演示页面显示真正我想要的（http://www.picssel.com/playground/jquery/fancyboxFromIframe_16Jan12.html），但问题是，我没有相同的脚本。 ..打电话给Fancybox从iframe的父母没有手动打开

而不是（我猜这是手动开启）：

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

我所说的图片是这样的：

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

我想陈GE我这样的代码（基于答案&演示）：

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

...但它不工作。有人可以告诉我，我应该如何更改我的代码，在iframe中的拇指，打开父页上的图像，调整到屏幕？

在此先感谢！（！）

来源

2013-08-31 Igor Laszlo

如果您'的console.log（父$）;'它记录它的存在，或者说，它是不确定的？ –

Dave，对不起，我不是javascript的专家，你能告诉我如何将它整合到整个代码中吗？ –

@戴夫斯坦如果你想过：。 '$（文件）。就绪（函数（）{ \t的console.log（父$）; \t $（ “的fancybox-拇指”）的fancybox（ { \t padding：0，' ...它加载图片但不起作用，它以正常方式加载而不考虑父页面屏幕 –

，我发现我自己在论坛上的问题的答案，可惜从来没有...我跟大家分享一下，也许它可以帮助的人：

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

来源

2013-08-31 13:50:07

您将很快就能在www.igorlaszlo.com上看到它 –

打电话给Fancybox从iframe的父母没有手动打开

回答

相关问题