Fancybox onclick or not using href

[JFK]

There have been already several posts inquiring how to fire fancybox
from any html tag other than <a>, like <div>, <img> or input buttons
for instance. The reasons in doing this are different but many just
simply don't want to show the target URL when the mouse is over the
link. The most common approach is using the javascript event
"onclick".

Here it is a simply way to achieve this:

1). No changes in your fancybox script, use the one you know:
<script type="text/javascript" >
$(document).ready(function() {
$("a.fancylink").fancybox();
});
</script>

2). you still need an <a href=""> to fire it up. "BUT YOU SAID ...", I
know, but actually we need to set where the content will be taken from
so:
<a class="fancylink" href="images/pic01.jpg"></a>
or
<a class="fancylink" href="http://google.com"></a>

or whatever your target is

this link can be hidden though so no risk to click on it:
<div style="display: none;">
<a class="fancylink" href="images/pic01.jpg"></a>
</div>
or
<a style="display: none;" class="fancylink" href="images/pic01.jpg"></
a>

3). Load fancybox clicking on wherever you want:
<div style="cursor: pointer;" onclick='$("a.fancylink").trigger
("click");'>open fancybox from division</div>
<h1 style="cursor: pointer;" onclick='$("a.fancylink").trigger
("click");'>open fancybox from header</h1>
<p style="cursor: pointer;" onclick='$("a.fancylink").trigger
("click");'>open fancybox from paragraph</p>

Please NOTICE that the three examples above behave like
'display:block' so you would be able to click on the right edge of the
line regardless the lenght of your text. You may set display:inline or
use the <span> tag to limit the clicking area over the text only:
<p><span style="cursor: pointer;" onclick='$("a.fancylink").trigger
("click");'>open fancybox</span></p>
also you could use the <a> tag (without href of course):
<a style="cursor: pointer;" onclick='$("a.fancylink").trigger
("click");'>open fancybox with anchor but not href</a>

wanna use an image or button?:
<input type="button" value="open fancybox" onclick='$
("a.fancylink").trigger("click");' />
<img style="cursor: pointer;" src="images/pic01thumbnail.jpg"
alt="open fancybox" onclick='$("a.fancylink").trigger("click");' />

SO NOW SUPPOSE YOU WANT TO LAUNCH A GALLERY
just add the same 'rel' attribute to all elements of the gallery and
launch it (i.e. from a thumbnail) with the following code:
<img style="cursor: pointer;" src="images/pic01thumbnail.jpg"
alt="open fancybox" onclick='$("a.fancygallery:first").trigger
("click");' />

NOTICE that we added ':first' to 'a.fancygallery'
read more:
http://groups.google.com/group/fancybox/browse_thread/thread/fb28cda32715c58a

and of course we'll need the elements of the gallery:
<div style="display:none;">
<a class="fancygallery" rel="gallery" title="Group title #1"
href="images/01.jpg"></a>
<a class="fancygallery" rel="gallery" title="Group title #2"
href="images/02.jpg"></a>
<a class="fancygallery" rel="gallery" title="Group title #3"
href="images/03.jpg"></a>
<a class="fancygallery" rel="gallery" title="Group title #4"
href="images/04.jpg"></a>
<a class="fancygallery" rel="gallery" title="Group title #5"
href="images/05.jpg"></a>
</div>

is it too obvious if we mention that we need the following script?:
$("a.fancygallery").fancybox();
well, just in case :)

Tested with FF, IE7, Opera, Chrome and Safari
I don't see why it wouldn't work in IE6

[Joel Friedman]

Are there ever plans to not require an <a> (whether hidden or not) to
activate a fancybox?

> read more:http://groups.google.com/group/fancybox/browse_thread/thread/fb28cda3...