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
> read more:http://groups.google.com/group/fancybox/browse_thread/thread/fb28cda3...