목록으로

lightSlider 문의 드립니다. 채택완료

연탄집개 3년 전 조회 1,864

답변 2

소스중에 <div class="demo"> ~~~~~~~~~~~~~~~~

를 한화면에 여러번 사용하려합니다.

그런데

onSliderLoad: function() {

$('#image-gallery').removeClass('cS-hidden');

} 이 부분때문에 여러번 못쓰는것 같은데 방법이 없을까요?

</p>

<p><code><</code><code>script</code><code>></code></p>

<p><code>       </code><code>$(document).ready(function() {</code></p>

<p><code>      </code><code>$("#content-slider").lightSlider({</code></p>

<p><code>                </code><code>loop:true,</code></p>

<p><code>                </code><code>keyPress:true</code></p>

<p><code>            </code><code>});</code></p>

<p><code>            </code><code>$('#image-gallery').lightSlider({</code></p>

<p><code>                </code><code>gallery:true,</code></p>

<p><code>                </code><code>item:1,</code></p>

<p><code>                </code><code>thumbItem:9,</code></p>

<p><code>                </code><code>slideMargin: 0,</code></p>

<p><code>                </code><code>speed:500,</code></p>

<p><code>                </code><code>auto:true,</code></p>

<p><code>                </code><code>loop:true,</code></p>

<p><code>                </code><code>onSliderLoad: function() {</code></p>

<p><code>                    </code><code>$('#image-gallery').removeClass('cS-hidden');</code></p>

<p><code>                </code><code>}  </code></p>

<p><code>            </code><code>});</code></p>

<p> </p>

<p><code>      </code> </p>

<p> </p>

<p><code>    </code><code>});</code></p>

<p><code>    </code><code></</code><code>script</code><code>></code></p>

<p><code></</code><code>head</code><code>></code></p>

<p><code><</code><code>body</code><code>></code></p>

<p><code>  </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"demo"</code><code>></code></p>

<p><code>        </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"item"</code><code>>            </code></p>

<p><code>            </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"clearfix"</code> <code>style</code><code>=</code><code>"max-width:474px;"</code><code>></code></p>

<p><code>                </code><code><</code><code>ul</code> <code>id</code><code>=</code><code>"image-gallery"</code> <code>class</code><code>=</code><code>"gallery list-unstyled cS-hidden"</code><code>></code></p>

<p><code>                    </code><code><</code><code>li</code> <code>data-thumb</code><code>=</code><code>"img/thumb/cS-1.jpg"</code><code>> </code></p>

<p><code>                        </code><code><</code><code>img</code> <code>src</code><code>=</code><code>"img/cS-1.jpg"</code> <code>/></code></p>

<p><code>                         </code><code></</code><code>li</code><code>></code></p>

<p><code>                    </code><code><</code><code>li</code> <code>data-thumb</code><code>=</code><code>"img/thumb/cS-2.jpg"</code><code>> </code></p>

<p><code>                        </code><code><</code><code>img</code> <code>src</code><code>=</code><code>"img/cS-2.jpg"</code> <code>/></code></p>

<p><code>                         </code><code></</code><code>li</code><code>></code></p>

<p><code>                    </code><code><</code><code>li</code> <code>data-thumb</code><code>=</code><code>"img/thumb/cS-3.jpg"</code><code>> </code></p>

<p><code>                        </code><code><</code><code>img</code> <code>src</code><code>=</code><code>"img/cS-3.jpg"</code> <code>/></code></p>

<p><code>                         </code><code></</code><code>li</code><code>></code></p>

<p><code>                    </code><code><</code><code>li</code> <code>data-thumb</code><code>=</code><code>"img/thumb/cS-4.jpg"</code><code>> </code></p>

<p><code>                        </code><code><</code><code>img</code> <code>src</code><code>=</code><code>"img/cS-4.jpg"</code> <code>/></code></p>

<p><code>                         </code><code></</code><code>li</code><code>></code></p>

<p><code>                    </code><code><</code><code>li</code> <code>data-thumb</code><code>=</code><code>"img/thumb/cS-5.jpg"</code><code>> </code></p>

<p><code>                        </code><code><</code><code>img</code> <code>src</code><code>=</code><code>"img/cS-5.jpg"</code> <code>/></code></p>

<p><code>                         </code><code></</code><code>li</code><code>></code></p>

<p><code>                    </code><code><</code><code>li</code> <code>data-thumb</code><code>=</code><code>"img/thumb/cS-6.jpg"</code><code>> </code></p>

<p><code>                        </code><code><</code><code>img</code> <code>src</code><code>=</code><code>"img/cS-6.jpg"</code> <code>/></code></p>

<p><code>                         </code><code></</code><code>li</code><code>></code></p>

<p> </p>

<p> </p>

<p><code>                </code><code></</code><code>ul</code><code>></code></p>

<p><code>            </code><code></</code><code>div</code><code>></code></p>

<p><code>        </code><code></</code><code>div</code><code>></code></p>

<p>

#javascript

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

정렬:

채택된 답변

+20 포인트

세크티

3년 전

클래스로 다 바꾸면 안되나요?

</p>

<p> </p>

<pre>
<code><script>
       $(document).ready(function() { 
            $('.image-gallery').lightSlider({
                gallery:true,
                item:1,
                thumbItem:9,
                slideMargin: 0,
                speed:500,
                auto:true,
                loop:true,
                onSliderLoad: function(el) {
                    el.removeClass('cS-hidden');
                }  
            });
 
       
 
    });
    </script>
</head>
<body>
  <div class="demo">
        <div class="item">            
            <div class="clearfix" style="max-width:474px;">
                <ul class="image-gallery gallery list-unstyled cS-hidden">
                    <li data-thumb="img/thumb/cS-1.jpg"> 
                        <img src="img/cS-1.jpg" />
                         </li>
                    <li data-thumb="img/thumb/cS-2.jpg"> 
                        <img src="img/cS-2.jpg" />
                         </li>
                    <li data-thumb="img/thumb/cS-3.jpg"> 
                        <img src="img/cS-3.jpg" />
                         </li>
                    <li data-thumb="img/thumb/cS-4.jpg"> 
                        <img src="img/cS-4.jpg" />
                         </li>
                    <li data-thumb="img/thumb/cS-5.jpg"> 
                        <img src="img/cS-5.jpg" />
                         </li>
                    <li data-thumb="img/thumb/cS-6.jpg"> 
                        <img src="img/cS-6.jpg" />
                         </li>
 
 
                </ul>
            </div>
        </div></code></pre>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

멀티트리플

3년 전

일단 기본적으로 id 값은 고유값으로 한번 쓰셔야 됩니다.

클래스는 반복으로 사용가능합니다.

직접 작업을 하지 않아 정답은 아닐 수 있지만

데모 클래스내에 id값을 고유로 주시고 각 고유id 마다 lightslider 로 주시면 되지않을까 합니다.

아래 세크티님 말처럼 클래스로 변경해도 되지않을까 합니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

lightSlider 문의 드립니다. 채택완료

답변 2개

공유하기