Trigger event with newly created anchor elements
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();
});
</scr开发者_开发知识库ipt>
<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.
I don't really know much about .fancybox(), but here's an idea you might try.
Place the images that you don't want displayed on the page in a container that is hidden. They won't be visible on the page, but I would imagine they would be in the fancybox.
HTML
<body>
<div id='hiddenContainer' style='display:none;'></div>
<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>
In jQuery, append the image to that container.
$(document).ready(function() {
$("<a rel='example_group' href='./example/8_b.jpg'><img src='./example/8_s.jpg' /></a>")
.appendTo("#hiddenContainer");
$("a[rel=example_group]").fancybox();
});
加载中,请稍侯......
精彩评论