Question

I am using the code below for loading an external page into a lightbox. How could I pass from the href tag, a variable named ‘page’ to the javascript (line 1) containing the value of a page link = ‘country.php’. I am wanting to use this script call several times without having to have additional javascript lines for each link.

<script>
$("a#selector").live("click", function(){$(".overlayInner").load("/country.php"); })
$("a#selector").live("click", function(){$(".overlayOuter").fadeIn(300); })
$("a#selector").live("click", function(){$(".overlayInner").fadeIn(500); })
$("a#selector").live("click", function(){$(".closepop").fadeIn(500); })
</script>


<a id="selector" href="#"><img src="/images/somegraphic.gif"></a>

Any help is much appreciated.

Answer 1

Try this:

$("a.selector").live("click", function() {
    var url = $(this).attr('href'); 
    $(".overlayInner").load(url);
    return false;
});

<a class="selector" href="/country.php">Country</a>
<a class="selector" href="/pigs.php">Pigs</a>

If you want to get the inner text that says “Country”, or an image you can do:

$("a.selector").live("click", function() {
    var url = $(this).attr('href'); 
    var img = $(this).html(); // But what do you want to do with it?
    $(".overlayInner").load(url);
    return false;
});

<a class="selector" href="/country.php"><img src="img.jpg" /></a>