Инициирующее событие с вновь созданными элементами привязки - PullRequest
1 голос
/ 13 октября 2010

Я использую плагин fancybox lightbox в jquery.Он привязывается к тегам привязки таким образом, чтобы следующее подтягивало изображение, связанное с другими изображениями, на которые ссылается 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>

Я хотел бы добавить дополнительные изображения во всплывающее окногалерея, но я не хочу включать их на страницу до того, как ссылка будет нажата.Итак, прямо сейчас, два изображения отображаются и затем связаны.Я хотел бы, например, подключить третье изображение без явного отображения его в теле.

Я попытался сделать следующее:

<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>

Это подключит третье изображение в галерею, но также отображает изображение в теле.Итак, я попробовал то же самое с частью appendTo:

<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>

Но этот добавленный элемент, похоже, не ассоциируется с группой rel, и только два изображения связаны друг с другом.

Какя могу добавить новый элемент привязки и подключить его к вызову .fancybox, не добавляя ссылку на тело?Я предполагаю, что этот вопрос достаточно независим от конкретного кода fancybox.Кажется, это просто вопрос достаточного опыта jquery.

1 Ответ

0 голосов
/ 13 октября 2010

Я не очень много знаю о .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>

В jQuery добавьте изображение в этот контейнер.

$(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();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...