Comment implémenter Slicebox? J'éprouve des difficultés

http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/Comment implémenter Slicebox? J'éprouve des difficultés

J'essaie d'implémenter Slicebox dans mon site Web et j'ai des problèmes. Je veux toujours offrir aux utilisateurs l'option de Shadowbox dans la même page, donc j'initialise les deux.

 <!-- 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>

Mais je ne suis pas sûr de savoir comment le faire fonctionner dans la page actuelle. J'ai ce lien, ainsi que ces images.

<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>

Dois-je dans le bon répertoire?

Toute aide serait appréciée, merci.

COMPLET HTML:

<!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>

Source

2011-11-13 Doug Smith

peut modifier votre question et post la source HTML complet - ou mieux encore, télécharger une démo et envoyer un lien? –

Je viens de regarder imgur.com/FocVx, que je suppose est où vous essayez de le faire. Je ne vois rien avec une classe de sb-slider. Je ne vois pas non plus le script slicebox. – dnuttle

@dnuttle: Il montre juste sa structure de répertoire à ce service d'hébergement d'image. – polarblau

Vous essayez d'utiliser élément DOM lorsque DOM est pas prêt. S'il vous plaît faire les changements suivants. Cela devrait fonctionner comme ça.

Tout d'abord, supprimez ces deux balises de script. Ils sont inutiles, nous les combinons à une seule étiquette de script.

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

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

Ensuite, il suffit d'écrire ces lignes

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

Source

2011-11-13 23:20:25 Fatih

Comment implémenter Slicebox? J'éprouve des difficultés

Répondre

Questions connexes