Fancybox 2 ajax 창에서 Flexslider가 작동하지 않습니다.

Question

안녕하세요. 다음 호를 만났습니다. Fancybox v.2.1.3 ajax 창에서 Flexslider v.2.1을 사용하려고했습니다. ajax 창이 튀어 나오지만 표시되는 세 개의 이미지에는 방향 탐색 아이콘이 누락되어 있으며 이미지를 탐색 할 수도 없습니다.

<script type='text/javascript' src="./js/jquery-1.8.3.min.js"></script> 
<script type='text/javascript' src="./js/jquery.fancybox.js"></script> 
<script type='text/javascript' src="./js/jquery.flexslider-2.1.min.js"></script> 

<script type='text/javascript'> 
$(document).ready(function(){ 
    $(".ajax1").fancybox({ 
     type: 'ajax', 
     fitToView : false, 
     openOpacity : false, 
     width  : '70%', 
     height  : '97%', 
     autoSize : false, 
     closeClick : false, 
     openEffect : 'none', 
     closeEffect : 'none', 
     afterLoad: function() { 
      $('.flexslider').flexslider({ 
       animation: "slide", 
       animationLoop: true, 
       controlNav: false, 
       directionNav: true, 
       slideshow: false 
      });}   
    }); 
}); 

Flexslider : JQuery와 제품은 또한 다음과 같이 보이는 index.html 페이지의 하단에

<ul class="moodlegrid sectionwrap"> 
      <li><a class="ajax1" href="projekt1.html"><img title="Projekte1" src="img/projekteblur.jpg" alt="Projekte1" /><img title="Projekte1" src="img/projekte.jpg" alt="Projekte1" /><span class="spiceup">Zum Projekt</span></a></li> 
     </ul> 

:

는 관련 HTML 비트는 다음과 같습니다 html의 관련 부분은 ajax 창에로드됩니다.

<div class="flexslider"> 
    <ul class="slides"> 
     <li><img src="img/projekteblur.JPG" alt='Bild' width='530px' height='307px'/></li> 
     <li><img src="img/projekte.JPG" alt='Bild' width='530px' height='307px' /></li> 
     <li><img src="img/projekteblur.JPG" alt='Bild' width='530px' height='307px' /></li> 
    </ul> 
</div> 

콘솔 안에는 오류가 전혀 없습니다. 누구든지 그 문제를 해결하는 방법을 알고 있다면 그것은 좋을 것입니다. 미리 감사드립니다 r.

Answer 1

방금 ​​정확히 같은 문제가있었습니다. 문제는 flex slider를 시작하기 전에 ajax로드 후에 dom을 다시로드해야한다는 것입니다.

저는 프론트 엔드 개발자입니다. 그래서 단순성과 속도를 위해 flexslider 호출을 ajax로드에 넣었습니다. 이처럼 : 후반 후속에 대한

<div class="flexslider"> 
    <ul class="slides"> 
     <li><img src="img/projekteblur.JPG" alt='Bild' width='530px' height='307px'/></li> 
     <li><img src="img/projekte.JPG" alt='Bild' width='530px' height='307px' /></li> 
     <li><img src="img/projekteblur.JPG" alt='Bild' width='530px' height='307px' /></li> 
    </ul> 
</div> 

$("flexslider ul.slides").flexslider(); 

이 나를 위해 작동합니다 ..