Two fancybox inline pop-ups on page

Question

We are trying to add two fancybox inline pop-ups to our website. We got one working, but we aren't able to get the second one working. Could you please look at our code?

For html we written the following:

<a id="popup-inline" href="#data"><div class="button">Click here</div></a><br><br>
        <div style="display:none">
            <div id="data">
                TEXT
            </div>
        </div>

<a id="popup-inline" href="#data1"><div class="button">Click here</div></a><br><br>
        <div style="display:none">
            <div id="data1">
                TEXT1
            </div>
        </div>'

Furthermore our jquery is:

$(document).ready(function() {
$("#popup-inline").fancybox({
      'titlePosition' : 'inside' });
    });
</script>

adeneo · Accepted Answer · 2013-11-24T12:26:31.680

2

ID's are unique, so change it to a class for both elements:

<a class="popup-inline" ...

and do:

$(".popup-inline").fancybox({
     'titlePosition' : 'inside'
});

jQuery (and javascript in general) only finds the first element when using the same ID twice, as anything else is invalid markup, and not expected.

edited Nov 24 '13 at 12:26

answered Nov 23 '13 at 22:47

adeneo

312,895
29
395
388

your code has an extra closing `});` or missed the opening `ready()` method – JFK Nov 24 '13 at 03:53

score -1 · Answer 2 · answered Nov 23 '13 at 23:01

-1

what @adeneo said is correct. Also you should not put a hidden div around the elements that contain the inline fancybox content:

<div id="data1" style="display:none">

    TEXT1

</div>

answered Nov 23 '13 at 23:01

Gerben van Dijk

868
6
15

disagree : actually, that is the correct syntax if using fancybox 1.3.x see http://stackoverflow.com/a/3963349/1055987 – JFK Nov 24 '13 at 03:57
Why would you use 1.3.x if 2.0 is out for ages already? I have been using it without this redundant div for ages; This is definitely not best practice IMHO. – Gerben van Dijk Nov 24 '13 at 08:31
1

the reason why people would use v1.3.4 instead of v2.x is (if you are unaware) that v1.3.4 is free to use for commercial purposes under a GPL license while you need to pay a license for v2.x if used in commercial websites. Check http://fancyapps.com/fancybox/#license for more – JFK Nov 24 '13 at 08:43
I have a license, I didn't realise that 1.3.x was GPL. Good to know, thanks! – Gerben van Dijk Nov 24 '13 at 13:54

Two fancybox inline pop-ups on page

2 Answers2