如何实现切片盒？我遇到困难了
http://tympanus.net/codrops/2011/09 /05/slicebox-3d-image-slider/
我正在尝试将 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>
将其放在正确的目录中？
如有任何帮助，我们将不胜感激，谢谢。
完整的 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>
http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/
I'm trying to implement Slicebox into my website and I'm having issues. I always want to offer users the option of Shadowbox within the same page, so I'm initializing both.
<!-- 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>
But I'm not sure how to get it to work within the actual page. I have this linking, as well as these 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>
And
<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>
Do I have it in the right directory?
Any help would be appreciated, thanks.
FULL 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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
当 DOM 尚未准备好时，您尝试使用 DOM 元素。请进行以下更改。它应该像这样工作。
首先，删除这两个脚本标签。它们是不必要的，我们只需将它们组合到一个脚本标记中即可。
<script type="text/javascript"> Shadowbox.init(); </script> <!-- Slicebox Code --> <script type="text/javascript"> $('.sb-slider').slicebox(); </script>然后只需编写这些行
<script type="text/javascript"> $(function(){ Shadowbox.init(); <!-- Slicebox Code --> $('.sb-slider').slicebox(); }); </script>You trying to use DOM element when DOM is not ready. Please do following changes. It should work like this.
First of all, remove these two script tag. They are unnecessary, we just combine them to only one script tag.
<script type="text/javascript"> Shadowbox.init(); </script> <!-- Slicebox Code --> <script type="text/javascript"> $('.sb-slider').slicebox(); </script>Then just write these lines
<script type="text/javascript"> $(function(){ Shadowbox.init(); <!-- Slicebox Code --> $('.sb-slider').slicebox(); }); </script>