Почему не работает счетчик изображений? устанавливает количество альбомов - PullRequest
Новая
       25

Почему не работает счетчик изображений? устанавливает количество альбомов

0 голосов
/ 17 января 2019

http://jquery.malsup.com/cycle2/demo/carousel.php https://lokeshdhakar.com/projects/lightbox2/

Я пытаюсь объединить вышеупомянутые 2 сценария кода, которые используют jquery.

Я хотел бы иметь карусель - которая позволяет лайтбокс

и я смог заставить все это работать на следующем кодовом пере

https://codepen.io/anon/pen/yGWLVx

У меня такой вопрос.

когда я использую лайтбокс - отдельно от карусели - счетчик на "наборе" изображений - работает нормально. (согласно перу первые 2 лота html)

но когда я объединяю лайтбокс и карусель - количество изображений в итоге оказывается неправильным - в примере при условии, что оно насчитывает 5 изображений - когда закодировано только 4.

, чтобы воссоздать эту проблему - нажмите на третью строку изображений в выводе html кода ручки и посмотрите на заголовок изображения

Кто-нибудь знает, почему счетчик изображений неправильный и если есть исправление?

примечание: я уже пытался вставить rel = "lightbox [что-то]", а также data-lightbox = "setname" - и это не сработало.

заранее спасибо

код ниже, если кодовая ручка исчезает 

<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward.">
  <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt="Golden Gate Bridge with San Francisco in distance">
</a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard.">
  <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="Forest with mountains behind">
</a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing.">
  <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="Bicyclist looking out over hill at ocean">
</a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close.">
  <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="Small lighthouse at bottom with ocean behind">
</a>

<br><br>


<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set2" data-title="Click the right half of the image to move forward.">
  <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt="Golden Gate Bridge with San Francisco in distance">
</a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set2" data-title="Or press the right arrow on your keyboard.">
  <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="Forest with mountains behind">
</a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set2" data-title="The next image in the set is preloaded as you're viewing.">
  <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="Bicyclist looking out over hill at ocean">
</a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set2" data-title="Click anywhere outside the image or the X to the right to close.">
  <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="Small lighthouse at bottom with ocean behind">
</a>



<br><br>

<div 
                    class="cycle-slideshow" 
                    data-cycle-fx="carousel"
                    data-cycle-timeout="3000"
                    data-cycle-slides="> a" 
                    data-cycle-carousel-visible="5"
                    data-cycle-carousel-fluid="true"
                    data-cycle-next="#next"
                    data-cycle-prev="#prev"
                    >
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set3" data-title="Click the right half of the image to move forward.">
  <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt="Golden Gate Bridge with San Francisco in distance">
</a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set3" data-title="Or press the right arrow on your keyboard.">
  <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="Forest with mountains behind">
</a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set3" data-title="The next image in the set is preloaded as you're viewing.">
  <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="Bicyclist looking out over hill at ocean">
</a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set3" data-title="Click anywhere outside the image or the X to the right to close.">
  <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="Small lighthouse at bottom with ocean behind">
</a>
  </div>



.cycle-slideshow { margin: auto }
 .cycle-slideshow img { width: auto; height: auto; padding: 2px; }
div.responsive img { width: auto; height: auto }
.cycle-pager { position: static; margin-top: 5px }
div.vertical { width: 100px }

.cycle-slideshow
            {
                margin-top:                 30px;

            }

         #Carousel a
            {
                margin-right:               10px;
            }

         a.prev
            {
                background:                 url( /SystemFiles/LIB-IMG/Carousel/prev.png ) no-repeat center;
                cursor:                     pointer;
                display:                    block;
                float:                      left;

                height:                     250px;
                margin-left:                10px;
                margin-right:               10px;
                width:                      50px;
            }

         a.next
            {
                background:                 url( /SystemFiles/LIB-IMG/Carousel/next.png ) no-repeat center;
                cursor:                     pointer;
                display:                    block;
                float:                      right;
                height:                     250px;
                margin-left:                10px;
                margin-right:               20px;

                width:                      50px;
            }
lightbox.option({
  'resizeDuration': 200,
  'wrapAround': true
})

css

https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.css

javacript
https://code.jquery.com/jquery-2.2.4.min.js
https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js
http://malsup.github.io/jquery.cycle2.carousel.js
http://malsup.github.io/jquery.cycle2.js
...