jQuery Lightbox plugin influencing ALL <a> tags

I've added a lightbox jQuery script and all is working soooo BEAUTIFULLY, until I realised that this script add the lightbox script to ALL 开发者_如何学Python tags on my website. This is a major pain if I want buttons, images, headings, logos, whatever to link to an HTML page within a document :(

Is is possible to change something in the jQuery code that would allow me to add a class or id to the images only that I want to lightbox to be applied to and not every tag inlcuding my navigation?

Or is the only other option to add a total different lightbox that what I already have?

Here's the site I'm currently working on: http://www.isabelleroux.co.za/newsite/ The jQuery code can be found in the source....

The only way I can get a button to link without the lightbox is by using: onclick="MM_goToURL('parent','page.html');return document.MM_returnValue" but this also has it's limitations and I would prefer NOT to use this anymore....

I'm desperate please! Thanks :)

Indeed, you've this in your script:

$('#gallery a').lightBox();

It would toggle lightbox on for all elements matching the selector. That is, all <a> elements which are inside some element with id="gallery".

One of the ways to fix this is to give only the <a> elements for which you'd like to turn lightbox on a more specific classname like so:

<a class="lightbox">

Then you can use the following selector:

$('#gallery a.lightbox').lightBox();

or even this:

$('a.lightbox').lightBox();

See also:

• jQuery tutorial - Using selectors

Depending on how your html is annotated with classes you can have the JQuery select only specific classes to apply the plug-In to.

$(".SomeClassYouWantToApplyJQueryTo").[SomeJQueryFunctionCall]

$(function() {
        $('#gallery a:has(img)').lightBox();
});

would fix the problem. It makes sure that the a contains an image. But i would consider using a class to avoid further problems.