Slicebox는 어떻게 구현합니까? 문제가 있습니다.

http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/Slicebox는 어떻게 구현합니까? 문제가 있습니다.

저는 Slicebox를 제 웹 사이트에 구현하려고하는데 문제가 있습니다. 나는 항상 동일한 페이지 내에서 Shadowbox 옵션을 사용자에게 제공하기를 원하므로 두 가지 모두 초기화해야합니다.

 <!-- Shadowbox code. --> 
     <link href="javascript/shadowbox-3.0.3/shadowbox.css" rel="stylesheet" type="text/css" /> 
     <script type="text/javascript"> 
      Shadowbox.init(); 
     </script> 

     <!-- Slicebox Code --> 
     <script type="text/javascript"> 
      $('.sb-slider').slicebox(); 
     </script>

그러나 실제 페이지에서 작동시키는 방법을 모르겠습니다. 이 이미지뿐만 아니라이 연결도 있습니다.

<script type="text/javascript" src="javascript/scripts.js"></script> 
    <script type="text/javascript" src="javascript/shadowbox-3.0.3/shadowbox.js"></script> 
    <script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.min.js"></script> 
    <script type="text/javascript" src="javascript/slicebox/js/jquery.easing.1.3.js"></script> 
    <script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.js"></script> 
    <script type="text/javascript" src="javascript/slicebox/js/modernizr.custom.13303.js"></script>

그리고

  <div class="sb-slider"> 
       <img src="media/community/thumbnails/abed_annie_troy.jpg" alt="Abed, Annie and Troy" /> 
       <img src="media/community/thumbnails/season_3.jpg" alt="Intro to season three" /> 
       <img src="media/community/thumbnails/cast_class.jpg" alt="The cast in a classroom" /> 
      </div>

오른쪽 디렉토리에 내가해야합니까?

어떤 도움을 주시면 감사하겠습니다, 감사합니다.

FULL HTML : DOM이 준비되지 않을 때 DOM 요소를 사용하려고

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 

    <head> 

     <!-- This tag is required to make the page valid XHTML. --> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 

     <!-- Give your page a title. --> 
     <title>Photo Gallery for NBC's Community</title> 

     <!-- Put your name and a description of the assignment or project here. --> 
     <meta name="author" content="" /> 
     <meta name="description" content="A collection of photos regarding NBC's Community television show." /> 

     <!-- This links to a sample CSS file. --> 
     <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> 

     <!-- This include a standard jQuery library and a sample JS file for your own code. --> 
     <script type="text/javascript" src="javascript/jquery-1.6.3.min.js"></script> 
     <script type="text/javascript" src="javascript/scripts.js"></script> 
     <script type="text/javascript" src="javascript/shadowbox-3.0.3/shadowbox.js"></script> 
     <script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.min.js"></script> 
     <script type="text/javascript" src="javascript/slicebox/js/jquery.easing.1.3.js"></script> 
     <script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.js"></script> 
     <script type="text/javascript" src="javascript/slicebox/js/modernizr.custom.13303.js"></script> 

     <!-- Shadowbox code. --> 
     <link href="javascript/shadowbox-3.0.3/shadowbox.css" rel="stylesheet" type="text/css" /> 
     <script type="text/javascript"> 
      Shadowbox.init(); 
     </script> 

     <!-- Slicebox Code --> 
     <script type="text/javascript"> 
      $('.sb-slider').slicebox(); 
     </script> 

    </head> 

    <body> 
     <div id="wrap"> 
      <div id="header"> 
       <img src="media/header.png" alt="Community Header" /> 
      </div> 

      <p>Community is an American television comedy series created by Dan Harmon that airs on NBC. The series is about a group of students at a community college in the fictional locale of Greendale, Colorado. The series heavily uses meta-humor and pop culture references, often parodying film and television clichés and tropes. The series premiered Thursday, September 17, 2009, and airs in the 8:00 pm ET time slot. It previously aired in the 9:30 pm ET time slot, beginning with its premiere, but later relocated with its fourth episode. On March 17, 2011, NBC renewed Community for a third season, which premiered on September 22, 2011.</p> 

      <div class="sb-slider"> 
       <img src="media/community/thumbnails/abed_annie_troy.jpg" alt="Abed, Annie and Troy" /> 
       <img src="media/community/thumbnails/season_3.jpg" alt="Intro to season three" /> 
       <img src="media/community/thumbnails/cast_class.jpg" alt="The cast in a classroom" /> 
      </div> 

      <div id="gallery"> 
       <table> 
        <tr><td><a href="media/community/fullsize/abed_annie_troy.jpg" rel="shadowbox[Gallery]" title="Abed, Annie and Troy"><img src="media/community/thumbnails/abed_annie_troy.jpg" alt="Abed, Annie and Troy" /></a></td><td><a href="media/community/fullsize/annie_paintball.jpg" rel="shadowbox[Gallery]" title="Annie playing paintball"><img src="media/community/thumbnails/annie_paintball.jpg" alt="Annie during the first paintball episode" /></a></td><td><a href="media/community/fullsize/annie.jpg" rel="shadowbox[Gallery]" title="Annie's Halloween costume"><img src="media/community/thumbnails/annie.jpg" alt="Annie as a skeleton" /></a></td><td><a href="media/community/fullsize/britta_dinosaur.jpg" rel="shadowbox[Gallery]" title="Jeff's and Britta's Halloween costumes"><img src="media/community/thumbnails/britta_dinosaur.jpg" alt="Britta's and Jeff's Halloween costumes" /></a></td></tr> 
        <tr><td><a href="media/community/fullsize/cast_cafeteria.jpg" rel="shadowbox[Gallery]" title="In the cafeteria"><img src="media/community/thumbnails/cast_cafeteria.jpg" alt="The cast in the cafeteria" /></a></td><td><a href="media/community/fullsize/cast_class.jpg" rel="shadowbox[Gallery]" title="In the classroom"><img src="media/community/thumbnails/cast_class.jpg" alt="The cast in a classroom" /></a></td><td><a href="media/community/fullsize/cast_cloud.jpg" rel="shadowbox[Gallery]" title="Thinking"><img src="media/community/thumbnails/cast_cloud.jpg" alt="The cast thinking" /></a></td><td><a href="media/community/fullsize/cast_mural.jpg" rel="shadowbox[Gallery]" title="In front of a colorful chalkboard"><img src="media/community/thumbnails/cast_mural.jpg" alt="Cast in front of a chalkboard" /></a></td></tr> 
        <tr><td><a href="media/community/fullsize/cast_study_room.jpg" rel="shadowbox[Gallery]" title="Hanging in the study room"><img src="media/community/thumbnails/cast_study_room.jpg" alt="The cast in their study room" /></a></td><td><a href="media/community/fullsize/cast.jpg" rel="shadowbox[Gallery]" title="In the library"><img src="media/community/thumbnails/cast.jpg" alt="The cast" /></a></td><td><a href="media/community/fullsize/christmas_episode.jpg" rel="shadowbox[Gallery]" title="Transformed into Christmasy claymation characters"><img src="media/community/thumbnails/christmas_episode.jpg" alt="Claymation Christmas episode" /></a></td><td><a href="media/community/fullsize/pierce.jpg" rel="shadowbox[Gallery]" title="Pierce hears something!"><img src="media/community/thumbnails/pierce.jpg" alt="Pierce with other students" /></a></td></tr> 
        <tr><td><a href="media/community/fullsize/season_3.jpg" rel="shadowbox[Gallery]" title="The introduction to season 3"><img src="media/community/thumbnails/season_3.jpg" alt="Intro to season three" /></a></td><td><a href="media/community/fullsize/show_poster.jpg" rel="shadowbox[Gallery]" title="The classic Community poster"><img src="media/community/thumbnails/show_poster.jpg" alt="Poster for the show" /></a></td><td><a href="media/community/fullsize/troy_and_abed.jpg" rel="shadowbox[Gallery]" title="Troy and Abed In the Morning!"><img src="media/community/thumbnails/troy_and_abed.jpg" alt="Troy and Abed In The Morning" /></a></td><td><a href="media/community/fullsize/trio_paintball.jpg" rel="shadowbox[Gallery]" title="After an intense paintball match"><img src="media/community/thumbnails/trio_paintball.jpg" alt="Troy, Annie and Abed after paintball" /></a></td></tr> 
       </table> 
      </div> 
     </div> 
    </body> 

</html>

출처

2011-11-13 Doug Smith

쓰기 - 데모를 업로드하거나 더 나은 및 링크를 게시? –

방금 imgur.com/FocVx를 보았습니다.이 작업을 수행하려고하는 곳이 있다고 가정합니다. sb-slider 클래스로는 아무것도 보이지 않습니다. 슬라이스 박스 스크립트도 보지 않습니다. – dnuttle

@dnuttle : 그는 단지이 이미지 호스팅 서비스에서 자신의 디렉토리 구조를 보여주고 있습니다. – polarblau

당신. 다음과 같이 변경하십시오. 이런 식으로 작동해야합니다.

먼저 두 스크립트 태그를 제거하십시오. 그것들은 불필요합니다. 단 하나의 스크립트 태그에만 결합합니다.

 
<script type="text/javascript"> 
    Shadowbox.init(); 
</script> 

<!-- Slicebox Code --> 
<script type="text/javascript"> 
    $('.sb-slider').slicebox(); 
</script>

그럼 그냥이 질문을 편집하고 전체 HTML 소스를 게시 할 수 라인

 
<script type="text/javascript"> 
$(function(){ 
    Shadowbox.init(); 
    <!-- Slicebox Code --> 
    $('.sb-slider').slicebox(); 
}); 
</script>

출처

2011-11-13 23:20:25 Fatih

Slicebox는 어떻게 구현합니까? 문제가 있습니다.

답변

관련 문제