Two iframe fancybox on same page

Question

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!

score 1 · Answer 1 · answered Sep 26 '12 at 23:17

You could use the HTML5 data-* attribute for each link and pass a different size for each iframe, for instance set the html like :

<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>

then in your script, get the value of data-width and data-height and pass the size using the beforeShow callback like

<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>

Notice that I didn't specify the API option type: "iframe" since the links have already the class fancybox.iframe

If you use `$(this)`, it needs to be in a callback function so that it will be different for each matching element. You should use a `.each()` loop. — Barmar, Sep 27 '12 at 02:22
@Barmar : I am not using `$(this)`, am I? ... and this solution (not `$(this)`) works fine using a single script for many links ;) — JFK, Sep 27 '12 at 03:35
@Barmar : for more check http://stackoverflow.com/a/10776520/1055987 or http://stackoverflow.com/a/9529889/1055987 (and no `.each()` loop) — JFK, Sep 27 '12 at 03:42
I misread what you wrote, I didn't see that it was in a beforeShow callback. — Barmar, Sep 27 '12 at 14:01

score 1 · Answer 2 · answered Sep 27 '12 at 02:31

1

The normal way to do this with most jQuery plugins is by specifying the options when you invoke it, and give the elements different IDs.

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
});

answered Sep 27 '12 at 02:31

Barmar

741,623
53
500
612

What if you have 100 links? are you proposing to set 100 fancybox scripts? ... thanks, but not thanks ;) – JFK Sep 27 '12 at 03:36
@JFK In that case your answer works better. Although entering 100 `data-width` attributes isn't really much easier. With that many, I'd expect them to be uniform, not individually sized. – Barmar Sep 27 '12 at 14:04

Two iframe fancybox on same page

2 Answers2