I'm using the fancybox lightbox plugin in jquery. It hooks into anchor tags such that the following pulls up an image that is chained with the other images referenced with rel = "example_group":
<script type="text/javascript">
$(document).ready(function() {
$("a[rel=example_group]").fancybox();
});
</script>
<body>
<a rel="example_group" href="./example/7_b.jpg"><img alt="" src="./example/7_s.jpg" /></a>
<a rel="example_group" href="./example/9_b.jpg"><img alt="" src="./example/9_s.jpg" /></a>
</body>
I'd like to add additional images to the pop-up gallery but I do not want to include them on the page before a link is hit. So right now, two images are being displayed and are then linked. I would like to, for example, hook in a third image without explicitly displaying it in the body.
I attempted the following:
<script type="text/javascript">
$(document).ready(function() {
$("a[rel=example_group]").fancybox();
$("<a rel='example_group' href='./example/8_b.jpg'><img src='./example/8_s.jpg' /></a>").appendTo("body");
});
</script>
This will hook a third image into the gallery, but also displays the image in the body. So I tried the same thing with the appendTo portion:
<script type="text/javascript">
$(document).ready(function() {
$("a[rel=example_group]").fancybox();
$("<a rel='example_group' href='./example/8_b.jpg'><img src='./example/8_s.jpg' /></a>");
});
</script>
But this added element doesn't seem to associate with the rel group, and only two images are chained together.
How can I add a new anchor element and hook it to the .fancybox call without having to append the reference to the body? I assume this question is independent enough of the specific fancybox code. It seems just a matter of sufficient jquery expertise.