Photoswipe가 자동으로 시작

Question

자신에 의해 활성화되지 않고 내 이미지,

하면 내 페이지를로드 할 때 photoswipe 출시 자체를 (내가 정보를 제공 할 목적으로 심포니 2.3에서 일하고 있어요). 그래서 화면이 어두워지면서 그림이 중간에 튀어 나오고 왼쪽과 오른쪽으로 쓸어 넘기는하지만 처음에는 내 페이지를 볼 수 없습니다. 그림은 페이지를 열 때 모든 것을 숨 깁니다. 난 그냥 example

에서 내 프로젝트에 대한 photoswipe을 설정 한 같은 이미지를 터치하여 활성화 할 수 좋아하고, 문서가 따라 files의 구현에 관한 다음 것

나는 나의 JS이 방법 (있는 그대로, 내 데이터베이스에 추가하기 위해 나뭇 가지 루프를 사용하여 내가 JS 내 imgs을 추가하지 않은 점에 유의)를 초기화

(부트 스트랩 사용) 내 슬라이드 쇼입니다

var items = []; 
var images = $('.fiche-vehicule-image img'); 

$.each(images, function() { 
    items.push({ 
     src: $(this).attr('src'), 
     w: 200, 
     h: 200 
    }); 
}); 
var options = {}; 
var pswpElement = document.querySelectorAll('.pswp')[0]; 
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); 
gallery.init(); 

여기 내 HTML입니다 : 마침내

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <div class="fiche-vehicule-image carousel-inner"> 
     {% for photo in vehicule.photos %} 
      <div class="item {% if loop.first %}active{% endif %}"> 
       <img src="{{ photo.imgLarge }}" class="img-responsive"> 
      </div> 
     {% endfor %} 
    </div> 
</div> 

, 그 일을하기 위해, 나는 위의 회전 목마 코드의 html.twig에서 pswp 코드를 구현 : 2 단계 : DOM에 PhotoSwipe (.pswp) 요소를 추가하십시오. doc

Answer 1

Ok 마지막으로 문제에 대한 해결책을 찾았습니다. 이 작업을 수행하기 위해이 행을 추가했습니다.

$('.fiche-vehicule-image').on('click', function() { 

때문에 전체 JS는 아마 자동으로 실행이

$('.fiche-vehicule-image').on('click', function() { 
     var items = []; 
     var images = $('.fiche-vehicule-image img'); 

     $.each(images, function() { 
      items.push({ 
       src: $(this).attr('src'), 
       w: 200, 
       h: 200 
      }); 
     }); 
     var options = {}; 
     var pswpElement = document.querySelectorAll('.pswp')[0]; 
     var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); 
     console.log(gallery); 
     gallery.init(); 
    });