1

i have one problem with fancybox script. I am using fancybox 2.1 (latest). I want for example two iframe links to be working on same page but with different settings and customization for each modal box. For example 

<li><a class="fancybox fancybox.iframe" href="give-me-meal.html">first</a></li>
<li><a class="fancybox fancybox.iframe" href="give-me-meal.html">second </a></li>

I override default customization with

<script type="text/javascript">
jQuery.extend(jQuery.fancybox.defaults, {
            href : 'iframe.html',
            type : 'iframe',
        padding : 0,
        margin  : 20,

        width     : 800,
        height    : 0,
        minWidth  : 100,
        minHeight : 400,
        maxWidth  : 9999,
        maxHeight : 9999,

        autoSize   : true,
        autoHeight : true,
        autoWidth  : false,

});
</script>

But then both popups are same. I wnant to be different like second modal box to be 1000px wide and more height etc. How can i make that>

Thanks!

4

2 回答 2

1

您可以为每个链接使用 HTML5data-*属性并为每个 iframe 传递不同的大小，例如将 html 设置为：

<li><a class="fancybox fancybox.iframe" href="give-me-meal.html" data-width="1000" data-height="600">first</a></li>
<li><a class="fancybox fancybox.iframe" href="give-me-meal.html" data-width="700" data-height="450">second </a></li>

然后在您的脚本中，获取 and 的值data-width并使用回调data-height传递大小，例如beforeShow

<script type="text/javascript">
$(document).ready(function(){
 $(".fancybox").fancybox({
        padding : 0,
        margin  : 20,
        minWidth  : 100,
        minHeight : 400,
        maxWidth  : 9999,
        maxHeight : 9999,
        autoSize   : true,
        autoHeight : true,
        autoWidth  : false,
        beforeShow : function(){
          this.width = $(this.element).data("width");
          this.height= $(this.element).data("height");
        }

 }); // fancybox
}); // ready
</script>

请注意，我没有指定 API 选项type: "iframe"，因为链接已经class fancybox.iframe

于 2012-09-26T23:17:13.047 回答
1

使用大多数 jQuery 插件执行此操作的常规方法是在调用它时指定选项，并为元素提供不同的 ID。

HTML：

<li><a class="fancybox fancybox.iframe" id="box1" href="give-me-meal.html">first</a></li>
<li><a class="fancybox fancybox.iframe" id="box2" href="give-me-meal.html">second </a></li>

JS：

$("#box1").fancybox();
$("#box2").fancybox({
    height: 1000
});
于 2012-09-27T02:31:26.460 回答