CODEWITHSUNDEEP
javascriptjqueryhtml
kevin de groof
kevin de groof

Reputation: 71

jQuery Lightbox Me - Multiple links same popup

Hi i am using the jQuery Lightbox Me plugin to open a popup on a page but i want multiple links to open the same popup.

The Code:

<script src="./pop_files/jquery.lightbox_me.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $(function() {
        function launch() {
             $('#sign_up').lightbox_me({centered: true, onLoad: function() { $('#sign_up').find('input:first').focus()}});
        }

        $('#try-1').click(function(e) {
            $("#sign_up").lightbox_me({centered: true, onLoad: function() {
                $("#sign_up").find("input:first").focus();
            }});

            e.preventDefault();
        });
        $('#try-2').click(function(e) {
            $("#sign_up").lightbox_me({centered: true, onLoad: function() {
                $("#sign_up").find("input:first").focus();
            }});

            e.preventDefault();
        });
        $('table tr:nth-child(even)').addClass('stripe');
    });
</script>
<link rel="stylesheet" href="./pop_files/styles.css" type="text/css" media="screen" title="no title" charset="utf-8">

The links:

<a href="./pop_files/pop.htm" id="try-1">Open pop link 1</a>
<a href="./pop_files/pop.htm" id="try-2">Open pop link 2</a>

The problem i'm having is, i need to give every link a new (id="try-...") for it to work this is fine for 2 link but fore 50 it is a bit unnecessary i think.

There must be a easier way of doing this, so any ideas most appreciated.

Regards Kevin.

Upvotes: 1

Views: 3404

Answers (2)

Ankur Ghelani
Ankur Ghelani

Reputation: 659

you can use jQuery Selector to do that as below:

<script src="./pop_files/jquery.lightbox_me.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $(function() {
        function launch() {
             $('#sign_up').lightbox_me({centered: true, onLoad: function() { $('#sign_up').find('input:first').focus()}});
        }

        $('a[id^="try"]').click(function(e) {
            $("#sign_up").lightbox_me({centered: true, onLoad: function() {
                $("#sign_up").find("input:first").focus();
            }});

            e.preventDefault();
        });
        $('table tr:nth-child(even)').addClass('stripe');
    });
</script>
<link rel="stylesheet" href="./pop_files/styles.css" type="text/css" media="screen" title="no title" charset="utf-8">

this would solve your problem for more then 100s as well I hope this would help

Upvotes: 0

zero
zero

Reputation: 3084

try using a class instead of an id. give all the links the same class: 

$('.try').click(function(){
    //some code...
})

Upvotes: 1

Related Questions