2017-12-31 131 views
2

SimpleLightBox를 실행할 수 없습니다.이 링크 http://dbrekalo.github.io/simpleLightbox/에서 이미지를 클릭하면 빈 페이지에 일반 이미지로 열립니다. 그러나 나는 문제가있다. 나는 JS와 CSS 파일을 추가했다. (올바르게 소스 코드로 열 수있다.) 그런 다음 코드에 HTML과 JS를 추가했습니다.SimpleLightBox는 실행되지 않습니다

<div class="imageGallery1"> 
    <a href="images/5x5.jpg" title="Caption for gallery item 1" ><img style="width: 300px; height: 300px" src="images/5x5.jpg" alt="Gallery image 1"/></a> 
    <a href="images/BG-BR5.jpg" title="Caption for gallery item 2"><img style="width: 300px; height: 300px" src="images/BG-BR5.jpg" alt="Gallery image 2" /></a> 
    <a href="images/BG-BR6.jpg" title="Caption for gallery item 3"><img style="width: 300px; height: 300px"src="images/BG-BR6.jpg" alt="Gallery image 3" /></a>  
</div> 
<script>$('.imageGallery1 a').simpleLightbox();</script> 

이미지가 올바르게 삽입하고 난 다음 부트 스트랩 (4)를 사용하여 내가 https://vitas.sk/1/ 일하고 템플릿 (아래로 스크롤)와 링크입니다이기 때문에 내가 너무 JQuery와 있습니다. 내가 템플릿 페이지를 확인하면

+0

jquery와 부트 스트랩 스크립트 뒤에 lighbox 스크립트를 놓으십시오. –

답변

2

나는 콘솔

"ReferenceError: jQuery is not defined".

다음

내가 코드를 조사하고 jQuery 라이브러리가 호출됩니다 동안의 <head>에서 SimpleLightBox 플러그인을 호출하는 것으로 나타났습니다에서 오류를 발견 페이지 끝 (</body> 태그 바로 앞에 있음).

jQuery 라이브러리가 초기화되기 전에 SimpleLightBox 플러그인이 실행 중입니다.

1)이 jQuery를로드 한 후 라이브러리가 초기화되고 해결됩니다 :

이 문제를 해결하려면 다음과 같이하십시오. </body> 태그 앞에 다음 행을 넣으십시오.

<script src="js/simpleLightbox.js" ></script> 

2) simpleLightBox Plugin이로드 된 후 실행되는 메소드가 수정됩니다. 다음 코드를 이동 (및 준비 기능을 추가) 위의 줄 끝 : 나는 코드가 전체 페이지와 스크립트가로드가 완료 될 때 실행됩니다 확인하기 위해 코드 주위에 $(document).ready();을 추가 한

$(document).ready(function() { 
    $('.imageGallery1 a').simpleLightbox(); 
}); 

.

+0

어떤 도움이 문서 (머리 부분)의 시작 부분에 jquery를 추가하고 있지만 두 스크립트를 모두 갖고 싶고이를 수행하는 방법을 모릅니다. (귀하의 솔루션이 작동하지 않습니다) –

+0

하지만 bodyTAG의 끝 앞에 simplelightbox 스크립트를 추가하는 것은 시작 부분에서만 작동하지 않으며 그 이유를 모르겠습니다. 나는 당신이 말한 것을 웹 사이트 https://vitas.sk/1/에서 보았습니다.하지만 작동하지 않습니다. –

+0

현재 진행중인 것은 $ ('. imageGallery1 a')입니다. simpleLightbox(); 플러그인을로드하기 전에 exectured geting입니다 ... 나는 대답에 의해 업데이 트됩니다 : –