CODEWITHSUNDEEP
jqueryfancyboxinline
user3026014
user3026014

Reputation: 3

Two fancybox inline pop-ups on page

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>

Upvotes: 0

Views: 1553

Answers (2)

adeneo
adeneo

Reputation: 318182

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.

Upvotes: 2

Gerben van Dijk
Gerben van Dijk

Reputation: 878

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>

Upvotes: -1

Related Questions