2012-12-05 6 views
0

저는 jQuery에 완전히 익숙하며 간단한 텍스트 슬라이드 쇼를 설정하는 데 필사적으로 도움이 필요합니다.simplesli.de를 설치하는 방법은 무엇입니까?

나는 simplesli.de의 모양을 좋아하지만 어떻게 작동 시킬지 전혀 모릅니다. HTML에 넣을 내용과 넣을 위치에 대한 지침이 없습니다! 예, 슬라이드 쇼의 여러 유형에 대해 사이트에 코드 스 니펫이 있지만 텍스트 프리젠 테이션 코드를 복사하여 내 페이지에 붙여 넣으면 정적 컨텐츠 만 얻을 수 있습니다.

js 파일을 다운로드하여 js 폴더에 저장하고 내 페이지에서 링크했습니다. 아직 작동하지 않습니다. 나는 정말로 여기에서해야할 것을 이해하지 못한다. 어떻게 작동 시키나요? 어떻게 스타일링합니까? 내가 뭘 놓치고 있니?

---- 편집 --- 확인이 내 HTML 파일에있는 코드는 다음 <head></head>에서

나는 다음과 같은 한 : <script type="text/javascript" src="../_js/jquery.simpleSlide.js"></script>

내가 jQuery를 다운로드 .simpleSlide.js 파일을 내 사이어의 루트 디렉토리에있는 _js 폴더에 넣으십시오. 내가 작업하고있는 페이지는 사이트의 하위 디렉토리에 있으므로 링크에 '../'가 있습니다.

그런 다음 사이트의 슬라이더 중 하나에 대한 예제 코드를 가져 와서 HTML 내에 표시하고 싶습니다. 지금은 :

<div> 
    <div class="simpleSlide-window" rel="1"> 
    <div class="simpleSlide-tray" rel="1"> 
     <div class="simpleSlide-slide" rel="1" alt="1"> content for slide one </div> 
     <div class="simpleSlide-slide" rel="1" alt="2"> content for slide two </div> 
     <div class="simpleSlide-slide" rel="1" alt="3"> content for slide three </div> 
    </div> 
    </div> 
</div> 

나는이 테스트를 통해 페이지에 정적 텍스트 세 줄을 얻습니다. 아무것도 작동하지 않습니다. 슬라이드 쇼, 버튼 없음, 대화 형 기능이 없습니다. 오래된 지루한 정적 인 콘텐츠 만 있습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 내가 할 수있는 한, 사이트에서 수행 할 작업을 완료했습니다. 나는 내 머리에이를 추가하려고했습니다

...

하지만 그 차이를하거나하지 않습니다

<script type="text/javascript"> 
simpleSlide({ 
    'status_width': 20,    // Integer. Sets the width of the status slideshow's window element. 
    'status_color_inside': '#000', // String. Sets color of status window element. 
    'status_color_outside': '#FFF', // String. Sets color of status tray element. 
    'set_speed': 500,    // Integer. Sets speed of all animations. Represented in milliseconds. 
    'fullscreen' : 'false',   // String. 'true' sets slide window for full screen. For obvious reasons, cannot work with more than one simpleSlide window per page. 
    'swipe' : 'false',    // String. 'true' turns on swipe functionality for touch devices. 
    'callback': 'function()'  // String. Sets callback to actuate after simpleSlide initial config. 
}); 

.

내가 정말로 당혹 스럽기 때문에 나는 여기서 정말로 도움이된다. 사이트가 실제로 이것을 구현하는 방법에 대한 명확한 지침을 게시 한 경우 여기서는 도움을 요청하지 않을 것입니다.

---- 다른 쪽 수정 --- CSS는 어디 있습니까 ??

+0

페이지에서 어떻게 링크 했습니까? 그것에 대해 아무 것도 모른 채 문제를 해결하는 것은 어렵습니다. 어쨌든, 슬라이드 쇼는 오히려 자세한 지침을 제공하며, 슬라이드 쇼를 표시하고자하는 곳이면 어디든지 HTML을 넣을 수 있습니다 ... – Ryan

+0

어디서 찾을 수 없는지에 대한 자세한 지침은 어디에 있습니까? – user1178434

답변

0

문제는 DOM 요소가 존재하기 전에 설정 코드를 실행하고 있다는 것입니다. DOM이 준비 될 때까지 JS 코드를 지연시켜야합니다.

$(function() { 
    simpleSlide(); 
}); 

또한 jQuery 라이브러리를로드하고 있는지 확인하십시오. 나는 당신의 샘플 어디에도 보이지 않는다.

UPDATE

예를 over here 작업.

+0

앞서 말했듯이 저는 jQuery를 처음 사용하기 때문에 여러분이 무엇을 의미하는지 전혀 모릅니다. 또한 jquery 라이브러리를로드하는 위치는 어디에서 알 수 있습니까? 어떻게로드합니까? – user1178434

+0

SimpleSli.de는 jQuery 플러그인입니다. 작동하기 전에 핵심 라이브러리 인 jQuery가 필요합니다. http://www.jquery.com –

+0

그래서 그것을 다운로드하고 내 js 디렉토리에 밀어 넣거나 연결합니까? – user1178434

관련 문제