Как вызвать функцию внутри foreEach?

Я добавил eventListener на маленькие картинки, при нажатии на картинку PhotoSwipe открывает всю галерею, но не напоминает об открытии ...

Если я раскомментирую //openPhotoSwipe() в конце js файла, галерея PhotoSwipe появится при загрузке страницы, и eventListener будет работать должным образом. Но я не этого хочу ... Я новичок в javascript ... Помощь и объяснение были бы очень признательны

 function openPhotoSwipe() {

    var pswpElement = document.querySelectorAll('.pswp')[0];

    var pics =  Array.from(document.getElementsByTagName('img'));

    var items = []

    pics.forEach(function(e){
                    items.push({src: e.src, w: 0, h: 0});
                    })
    var options = {

        history: false,
        focus: false,
        showAnimationDuration: 0,
        hideAnimationDuration: 0,
        closeOnScroll: false,
        closeOnClick: false,

    };

    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

    gallery.listen('gettingData', function(index, item) {
      if (item.w < 1 || item.h < 1) {
        var img = new Image(); 
        img.onload = function() {
            item.w = this.width;
            item.h = this.height;
            gallery.invalidateCurrItems();
            gallery.updateSize(true);
        }
        img.src = item.src;
      }
    });

    gallery.init();
};


   var open = Array.from(document.getElementsByClassName("open_gallery"));

open.forEach(function(e){
    e.addEventListener('click', openPhotoSwipe);
})
// openPhotoSwipe();

вот часть моего взгляда:

   <div class = "container">

    <h1><%= @article.title %></h1>
    <p><%= @article.description %></p>

    <div class = "thumb_images">
        <% @article.attachments.each do | art| %>

        <%= link_to image_tag art.url, class: "open_gallery" %>

        <% end %>
    </div>

</div>


<div class = "pswp" tabindex = "-1" role = "dialog" aria-hidden = "true">

    <div class = "pswp__bg"></div>

    <div class = "pswp__scroll-wrap">


        <div class = "pswp__container">
            <% @article.attachments.each do | art| %>
                <div class = "pswp__item">
                    <%= image_tag art.url %>
                </div>
            <% end %>
        </div>


        <div class = "pswp__ui pswp__ui--hidden">

            <div class = "pswp__top-bar">

                <div class = "pswp__counter"></div>

                <button class = "pswp__button pswp__button--close" title = "Close (Esc)"></button>

                <button class = "pswp__button pswp__button--share" title = "Share"></button>

                <button class = "pswp__button pswp__button--fs" title = "Toggle fullscreen"></button>

                <button class = "pswp__button pswp__button--zoom" title = "Zoom in/out"></button>

                <div class = "pswp__preloader">
                    <div class = "pswp__preloader__icn">
                        <div class = "pswp__preloader__cut">
                        <div class = "pswp__preloader__donut">
                        </div>
                    </div>
                    </div>
                </div>

            </div>

            <div class = "pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class = "pswp__share-tooltip">
                </div> 
            </div>

            <button class = "pswp__button pswp__button--arrow--left" title = "Previous (arrow left)">
            </button>

            <button class = "pswp__button pswp__button--arrow--right" title = "Next (arrow right)">
            </button>

            <div class = "pswp__caption">
                <div class = "pswp__caption__center">
                </div>
            </div>

        </div>

    </div>

</div>