Как использовать jQuery для изменения атрибута всех элементов в группе, кроме одного

У меня есть следующий код, который показывает световой ящик для моей галереи изображений. Есть три изображения, и я должен разрешить пользователям нажимать на любое из изображений, чтобы увидеть галерею в лайтбокс. Проблема в том, что когда я нажимаю на одно изображение, оно не показывает выбранное изображение, а показывает первое изображение в списке/или последнем изображении, которое пользователь видел в последний раз, когда открывал лайтбокс. DEMO

У меня есть карусель на основе http://kenwheeler.github.io/slick/ в моем лайтбокс, поэтому мне нужно изменить порядок карусели. Я заметил, что плагин генерирует атрибут tabindex, поэтому я пытаюсь изменить его на 0 for selected image и -1 for all other images, но код не работает. Я включил демо, но по некоторым причинам он вообще не работает. Пожалуйста, используйте следующий код, пока я пытаюсь решить проблему с помощью JSFiddle.

Чтобы решить проблему с атрибутами, я рассмотрел эти вопросы 1, 2, 3, но не смог понять, как его использовать.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>slick - the last carousel you'll ever need</title>
  <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="#" onclick="location.href='http://kenwheeler.github.io/slick/slick/slick.css'; return false;"/>
  <link rel="stylesheet" type="text/css" href="#" onclick="location.href='http://kenwheeler.github.io/slick/slick/slick-theme.css'; return false;"/>
  <link rel="stylesheet" type="text/css" href="#" onclick="location.href='http://kenwheeler.github.io/slick/slick/style.css'; return false;">


  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <style>
#cover-page {
  background: #fff none repeat scroll 0 0;
  margin-left: 15%;
  margin-top: 1%;
  position: absolute;
  width: 70%;
  z-index: 1001;
  visibility:hidden;
}
#black-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    -khtml-opacity: 0.75;
    opacity: 0.75;
    z-index: 1000;
    visibility:hidden;
}
#close{
    position:absolute;
    top:0;
    right:0;
      visibility:inherit;
}
.slick-slider {
  margin-left: 12%;
  margin-right: 9%;
}
.slick-slider {
    -moz-user-select: none;
    box-sizing: border-box;
    visibility:hidden;
    position: relative;
}
.slick-slide img {
  border: 5px solid #fff;
  display: block;
  width: 100%;
}
.slick-next {
  right: -66px;
}

.slick-prev {
  left: -66px;
}

#lightboxCloseBtn {
  text-decoration: none;
  color: purple;

}

.slick-slide.slick-current.slick-active{
  left: 0;
  opacity: 1;
  position: relative;
  top: 0;
  width: 25%;
  z-index: 999;
}

</style>
</head>
<body>
        <div id="black-cover"></div>
        <div id="cover-page">
       <div id="close"><a id="lightboxCloseBtn" href="#" onclick="closeBtn();">X</a></div>
        <h2 id="lightboxHeader">Images</h2>
        <div class="slider fade">
        <div class="lightbox-image"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-"/></div>
          <div class="lightbox-image"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY"/></div>
           <div class="lightbox-image"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ"/></div>

        </div>
        </div>


        <a onclick="showLightBox('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-');" href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-"/></a>
        <a onclick="showLightBox('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY');" href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY"/></a>
         <a onclick="showLightBox('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ');" href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ"/></a>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
    <script type="text/javascript" src="http://kenwheeler.github.io/slick/js/scripts.js"></script>
    <script type="text/javascript" src="http://kenwheeler.github.io/slick/js/prism.js"></script>
    <script type="text/javascript">

    function showLightBox(address){
            $("#black-cover").css("visibility","visible");
            $("#cover-page").css("visibility","visible");
            $(".slick-slider").css("visibility","visible");
            if($('.lightbox-image.slick-slide.slick-current.slick-active > img').attr('src') != address) {
              alert("here 2");
    $('.lightbox-image.slick-slide.slick-current.slick-active > img').parent().attr('tabindex','-1');

        }
        if($('.lightbox-image.slick-slide.slick-current.slick-active > img').attr('src') == address) {
              alert("here 1");
    $('.lightbox-image.slick-slide.slick-current.slick-active > img').parent().attr('tabindex','0');

        } 
      }

        function closeBtn(){
            $("#black-cover").css("visibility","hidden");
            $("#cover-page").css("visibility","hidden");
            $(".slick-slider").css("visibility","hidden");

}

        var disqus_shortname = 'slickcarousel';

        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>

</body>
</html>

Ниже приведен код, который генерирует плагин:

<div id="cover-page" style="visibility: visible;">
    <div id="close">
        <a onclick="closeBtn();" href="#" id="lightboxCloseBtn">X</a>
    </div>
    <h2 id="lightboxHeader">Images</h2>
    <div class="slider fade slick-initialized slick-slider" role="toolbar"
        style="visibility: visible;">
        <button role="button" aria-label="Previous"
            class="slick-prev slick-arrow" data-role="none" type="button"
            style="display: block;">Previous</button>
        <div class="slick-list draggable" aria-live="polite">
            <div class="slick-track" style="opacity: 1; width: 3735px;"
                role="listbox">
                <div class="lightbox-image slick-slide slick-current slick-active"
                    data-slick-index="0" aria-hidden="false"
                    style="width: 1245px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;"
                    tabindex="-1" role="option" aria-describedby="slick-slide00">
                    <img
                        src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-">
                </div>
                <div class="lightbox-image slick-slide" data-slick-index="1"
                    aria-hidden="true"
                    style="width: 1245px; position: relative; left: -1245px; top: 0px; z-index: 998; opacity: 0;"
                    tabindex="-1" role="option" aria-describedby="slick-slide01">
                    <img
                        src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY">
                </div>
                <div class="lightbox-image slick-slide" data-slick-index="2"
                    aria-hidden="true"
                    style="width: 1245px; position: relative; left: -2490px; top: 0px; z-index: 998; opacity: 0;"
                    tabindex="-1" role="option" aria-describedby="slick-slide02">
                    <img
                        src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ">
                </div>
            </div>
        </div>



        <button role="button" aria-label="Next" class="slick-next slick-arrow"
            data-role="none" type="button" style="display: block;">Next</button>
        <ul class="slick-dots" style="display: block;" role="tablist">
            <li class="slick-active" aria-hidden="false" role="presentation"
                aria-selected="true" aria-controls="navigation00" id="slick-slide00"><button
                    tabindex="0" aria-required="false" role="button" data-role="none"
                    type="button">1</button></li>
            <li aria-hidden="true" role="presentation" aria-selected="false"
                aria-controls="navigation01" id="slick-slide01"><button
                    tabindex="0" aria-required="false" role="button" data-role="none"
                    type="button">2</button></li>
            <li aria-hidden="true" role="presentation" aria-selected="false"
                aria-controls="navigation02" id="slick-slide02"><button
                    tabindex="0" aria-required="false" role="button" data-role="none"
                    type="button">3</button></li>
        </ul>
    </div>
</div>

Ответ 1

Ваша проблема в том, что ваш Javascript настроен на загрузку onload, он отлично работает, если вы оберните его в голову (и добавьте jQuery в демо): http://jsfiddle.net/zwugprj3/3/

Это происходит из-за различного объема сценариев, поэтому onclick="..." не имеет доступа к вашей функции.

Как правило, прекратите использование атрибута onclick!

Используйте addEventHandler. Вы все равно можете поместить URL (свой параметр) в свой HTML с помощью атрибута данных, например: <img src="/small.png" data-large-src="/large.png">.

Обновление: Прочитайте до конца документации Slick: http://jsfiddle.net/zwugprj3/22/, на самом деле вы должны использовать метод для изменения слайда. Изменение внутренних деталей библиотеки напрямую почти никогда не является хорошей идеей....

Ответ 2

Попробуйте это

HTML CODE:

<a onclick="showLightBox(0);" href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-"/></a>
    <a onclick="showLightBox(1);" href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY"/></a>
     <a onclick="showLightBox(2);" href="#"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ"/></a>



JS CODE:

  function showLightBox(idx){
        $("#black-cover").css("visibility","visible");
        $("#cover-page").css("visibility","visible");
        $(".slick-slider").css("visibility","visible");
        $('.slick-dots li button').eq(idx).trigger('click');

  }

Ответ 3

Попробуйте этот код.

HTML

<div id="black-cover" style="display:none;"></div>
<div id="cover-page" style="display:none;">
        <div id="close">
            <a id="lightboxCloseBtn" href="#" onclick="closeBtn();">X</a>
        </div>
        <h2 id="lightboxHeader">Images</h2>
        <div class="your-class">
            <div>
                <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-" />
            </div>
            <div>
                <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY" />
            </div>
            <div>
                <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ" />
            </div>
        </div>
</div>
<a href="#" class="img" data-value="0"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-"/></a>

<a href="#" class="img" data-value="1"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY"/></a>

<a href="#" class="img" data-value="2"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ"/></a>

$(document).ready(function () {
    $('.img').click(function () {
        var CurrentImg = $(this).attr('data-value')
        $("#black-cover").show()
        $("#cover-page").show()
        $('.your-class').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            initialSlide: CurrentImg
        });
    })
})

function closeBtn() {
    $("#black-cover").hide()
    $("#cover-page").hide()
    $('.your-class').slick('unslick');
}

Демо

Ответ 4

Кажется, что существует определенный параметр initialSlide (по умолчанию: 0), который вы можете использовать только для этого. Просто передайте индекс изображения, который был нажат, и вы все настроены.

Как упоминалось в документации, параметр initial slide можно использовать только при запуске карусели, так как обходной путь, если вы хотите решить, какое изображение следует сфокусировать только при нажатии, вы можете инициировать карусель при нажатии одного из ваших изображений, а когда пользователь закрывает карусель, вы должны уничтожить его, используя параметр unslick, например:

$('.your-slider').slick('unslick');

И затем, если он нажмет на другое изображение, просто повторно запустите карусель с правильным параметром initialSlide.

Посмотрите документацию: http://kenwheeler.github.io/slick/

Ответ 5

Когда пользователь нажимает на изображение, вы должны создать слайдер с соответствующим изображением. Вы можете сделать это, введя индекс изображения в функцию, содержащую конструктор slick slider:

function startSlider (index) {
  // put here all the css visibility you did
  $('.your-sliders-class').slick({
    initialSlide: index      // the first slide index is 0, second is 1...
  })
}

Итак, ваша функция onclick будет выглядеть так:

для первого изображения - onclick="startSlider(0)"

для второго изображения - onclick="startSlider(1)"

и т.д.

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

function closeBtn(){
   $("#black-cover").css("visibility","hidden");
   $("#cover-page").css("visibility","hidden");
   $(".slick-slider").css("visibility","hidden");
   $('.your-sliders-class').slick('unslick');
}

Ответ 6

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

  function showLightBox(address){
            $("#black-cover").css("visibility","visible");
            $("#cover-page").css("visibility","visible");
            $(".slick-slider").css("visibility","visible");
            //slick-dots
            var index = $('.lightbox-image.slick-slide > img[src="' + address + '"]').parent().index();
            $('ul.slick-dots > li').eq(index).find('button').click();
      }

        function closeBtn(){
            $("#black-cover").css("visibility","hidden");
            $("#cover-page").css("visibility","hidden");
            $(".slick-slider").css("visibility","hidden");

}

^^ Это измененный javascript из вашего jsFiddle
Мой jsFiddle можно посмотреть здесь http://jsfiddle.net/q6t8v3zf/1/

Ответ 7

глядя на Github с пятнами, я вижу много проблем с той же проблемой 1, 2....
initialSlide должен работать, но в этих проблемах вы можете увидеть много примеров workarrounds для решения проблемы. Эта конфигурация slick должна работать.

 $('.my-slider').slick({
        dots: true,
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 3,
        initialSlide: 2
    });

Ответ 8

Согласно вашему вопросу, я чувствую, что вы хотите вручную обработать ситуацию, изменив индекс для всех остальных изображений на -1, а затем установите текущий выбранный, соответствует ли это правилу? если это случай, дайте мне знать, я помогу вам его исправить.

Ответ 9

Вместо того, чтобы экспериментировать с атрибутом tabindex, я бы поручил Slick начать показывать изображения с выбранным слайдом. Для этого можно использовать метод slickGoTo (..):

slickGoTo (index: int, dontAnimate: bool) Переход к слайду по индексу, пропуская анимацию, если для второго параметра установлено значение true

Таким образом, ваша функция будет выглядеть так:

function showLightBox(address){
    $("#black-cover").css("visibility","visible");
    $("#cover-page").css("visibility","visible");
    $(".slick-slider").css("visibility","visible");

    // find the image with the same address
    var index = 0;
    var notFound = true;

    $('.lightbox-image > img').each( function() {
      var sameAddress = $(this).attr('src') == address ;
      if (notFound && !sameAddress) index++;
      else notFound = false;
    });

    // Set initial slide
    $('.slick-slider').slick('slickGoTo', index, true);
}

См. jsfiddle

Ответ 10

Две точки.
(1) tabIndex используется для установки последовательности вкладок, как правило, в форме, так что ключ вкладки знает, как перемещаться из элемента в элемент. Он не перемещает элемент DOM автоматически на передний план. То, что вы пытаетесь выполнить, состоит в том, чтобы сгенерированный карусель" прыгал "на изображение, выбранное с главной страницы.
(2) Поскольку вы используете пятно, вы хотите использовать параметр "initialSlide" при загрузке, чтобы сообщить slick, с которого (из ваших трех) слайдов начинаться с.
Из их документации вы должны установить это при активации слайда, выполнив такую функцию, как:

$(document).ready(function(){
  $('.your-class').slick({
  initialSlide: 1
  });
});