Невозможно использовать Colorbox в jQuery - PullRequest
Новая
       59

Невозможно использовать Colorbox в jQuery

0 голосов
/ 24 ноября 2018

Я использую Colorbox для jQuery.Я скачал плагин с http://www.jacklmoore.com/colorbox/

Ниже приведен мой код jQuery: 

<script type="text/javascript">
    $('#gallery').colorbox();
</script>

HTML-код: 

<!doctype html>
<html lang="en">

<head>
    <title>JQuery - Chapter 4</title>
    <link rel="stylesheet" href="CSS/colorbox.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>

    <script src="JS/jquery.colorbox.js"></script>
    <script src="JS/jquery-3.3.1.js"></script>
</head>

<body>
    <a id="gallery" href="images/dog.jpeg">Dog</a>
    <a id="gallery" href="images/horse.jpg">Horse</a>
    <a id="gallery" href="images/tree.jpg">Tree</a>
</body>

Когда я нажимаю на название изображения, ононе запускает метод colorbox ().Скорее это берет меня к источнику изображения.

Спасибо

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Как уже упоминалось, каждый элемент должен иметь уникальный идентификатор.Если вы хотите сгруппировать их, вы должны использовать атрибут Class.Это также описано в руководстве: http://www.jacklmoore.com/colorbox/guide/

$(function() {
  $('.gallery').colorbox({
    rel: "group1"
  });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<a id="gallery-1" class="gallery" href="https://i.imgur.com/t5L4otE.jpg">Dog</a>
<a id="gallery-2" class="gallery" href="https://i.imgur.com/wZHWtP3.jpg">Horse</a>
<a id="gallery-3" class="gallery" href="https://i.imgur.com/ihH1kfg.jpg">Tree</a>

Этот фрагмент работает должным образом.JQuery должен быть загружен перед плагином.Поскольку вы загружаете Bootstrap (который использует jQuery) и библиотеку jQuery, вы можете получить некоторые странные результаты.Поэтому я хотел бы выяснить, какую библиотеку лучше использовать.

rel

Это можно использовать в качестве альтернативы для привязки rel для Colorbox.Это позволяет пользователю группировать любую комбинацию элементов вместе для галереи или переопределять существующие rel, чтобы элементы не группировались вместе.$("a.gallery").colorbox({rel:"group1"}); Примечание: Также можно установить значение 'nofollow', чтобы отключить группировку.

Надеюсь, это поможет.

0 голосов
/ 24 ноября 2018

Требуются 2 модификации:

1) Укажите уникальный идентификатор для всех тегов привязки, таких как gallery1, gallery2, gallery3 и

2) добавьте функцию click js, чтобы вызывать colorbox на каждой привязкетег

Как показано ниже: 

<script type="text/javascript">
  function colorbox1()
   {  
     $('#gallery1').colorbox();
     return false;
   }

  function colorbox2()
   {  
     $('#gallery2').colorbox();
     return false;
   }

   function colorbox3()
   {  
     $('#gallery3').colorbox();
     return false;
   }
</script>

и в HTML: 

<body>
    <a id="gallery1" click="return colorbox1();" href="images/dog.jpeg">Dog</a>
    <a id="gallery2" click="return colorbox1();" href="images/horse.jpg">Horse</a>
    <a id="gallery3" click="return colorbox1();" href="images/tree.jpg">Tree</a>
</body>
...