henrygd / bigpicture

Lightweight JavaScript image / video viewer. Supports Youtube, Vimeo, etc.
https://henrygd.me/bigpicture
MIT License
818 stars 76 forks source link

Not work multiple ( #40

Closed zdimaz closed 4 years ago

zdimaz commented 4 years ago
<a href="#!" class="weight_bold main_page_link_ogange js_lightbox" ytsrc="vsypFJ5mNw0" data-caption="Демо-кабинет">Посмотрите пример</a>

                                    <a href="#!" class="main_page_link_ogange d_none d_xs_block weight_bold main_page_small_txt js_lightbox" ytsrc="p96y6FiD7sU" data-caption="Демо-кабинет">
                                        Все изменения по вашему делу вы увидите в Личном кабинете
                                    </a>

                                    <a href="#!" class="weight_bold main_page_link_ogange js_lightbox" ytsrc="vsypFJ5mNw0" data-caption="Демо-кабинет">Посмотрите пример</a>

            /* ==============================================
                Name function
            ============================================== */

            if(document.querySelector('.js_lightbox')) {

                document.querySelector('.js_lightbox').addEventListener('click', function (e) {

                    e.preventDefault();

                    var className = e.target.className

                    if (~className.indexOf('js_lightbox')) {
                        BigPicture({
                            el: e.target,
                            ytSrc: e.target.getAttribute('ytSrc'),
                        });
                    }
                });

            };

            /* ==============================================
                End of Name function
        ============================================== */
henrygd commented 4 years ago

Try using querySelectorAll instead of querySelector to get all the links. Also, I had to remove the ! from the href on codesandbox.

https://codesandbox.io/s/elated-dewdney-fjuqx

Let me know if you have any questions.

var links = document.querySelectorAll(".js_lightbox");

for (var i = 0; i < links.length; i++) {
  links[i].addEventListener("click", function(e) {
    e.preventDefault()
    BigPicture({
      el: e.target,
      ytSrc: e.target.getAttribute("ytSrc")
    })
  })
}