라이트박스 슬라이드 소스 충돌..
관련링크
본문
안녕하세요
라이트슬라이더js 소스 사용하여 이미지 슬라이드를 추가했는데 뭐가 문제인지 엑박도 안나오고 아예 안보여서요... 링크의 선택의기준에서 이미지 슬라이드가 나와야하는데 안나옵니다...ㅜ html파일로 따로 테스트해보고 해당 링크에 접목 시켰는데 안나오니 너무 답답하고... 혹시 봐주실분 계실까요? 하루종일 붙잡았는데 해결이 안됩니다...
답변 2
<ul id="image-gallery" class="gallery list-unstyled cS-hidden" >
소스를 보면 빨간색 부분의 cs-hidden 부분이 문제의 원인 일 수 있어 보입니다.
슬라이더가 로딩되기 이전에 표시되는 걸 방지 하는 부분인데
로딩이 되면 cs-hidden 이라는 클래스 명을 제거 하는 스크립트를 추가 해보세요
onSliderLoad: function() {
$('#image-gallery').removeClass('cS-hidden');
}
사용예제
https://starlmh.tistory.com/entry/lightslide-%EC%98%88%EC%A0%9C
현재 슬라이더 아이디가 image-gallery로 되어 있으니 예제의
$('#image-gallery').lightSlider 부분 그대로 차용해서 쓰셔도 되겠네요.
lightslider의 인스톨 매뉴얼은 알고 계신 다는 가정 하에 필요한 코드 부분만 올려드린 겁니다.
onSliderLoad: function() 이 삽입되는 위치 부분 유의 해서 보시면 이해가 가실 듯 합니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 는 그밑에
더 높은 버전의
<script src="/js/jquery.1.10.2.min.js"></script> 가 선언 되어 있으므로 제거 해 주시고
<script src="/js/lightslider.js"></script> 를
<script src="/js/jquery.1.10.2.min.js"></script>밑으로 붙여 넣어 주시면 될 것 같습니다.
그리고
<ul id="image-gallery" class="gallery list-unstyled cS-hidden" >
에서 보듯이 슬라이더 아이디가 image-gallery 이니까
$("#content-slider").lightSlider({
loop:true,
keyPress:true
});
이 부분은 제거 하셔도 됩니다.
lightslider는 여러 커스터마이징 하기 꽤 유용한 플러긴입니다.
차근 차근 사용법을 익혀 두시면 나중에 많은 도움이 되실 겁니다.
