#javascript #jquery #shadowbox
#javascript #jquery #shadowbox
Вопрос:
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>
Комментарии:
1. Можете отредактировать свой вопрос и опубликовать полный исходный HTML-код — или, что еще лучше, загрузить демо-версию и разместить ссылку?
2. Я только что просмотрел imgur.com/FocVx , я предполагаю, что именно там вы пытаетесь это сделать. Я ничего не вижу с классом sb-slider. Я также не вижу скрипт slicebox.
3. @dnuttle: Он просто показывает свою структуру каталогов на этом сервисе размещения изображений.
4. @Doug Smith: Куда на вашей странице вы обращаетесь
$('.sb-slider').slicebox();
Вполне вероятно, что вы пытаетесь получить доступ к элементу DOM, который даже не был загружен во время инициализации.
Ответ №1:
Вы пытаетесь использовать элемент DOM, когда DOM не готов. Пожалуйста, внесите следующие изменения. Это должно работать следующим образом.
Прежде всего, удалите эти два тега script. Они не нужны, мы просто объединяем их только в один тег script.
<тип скрипта="текст / javascript"> Shadowbox.init(); </script> <!-- Код Slicebox --> <тип скрипта="текст / javascript"> $('.sb-slider').slicebox(); </script>
Тогда просто напишите эти строки
<тип скрипта="текст / javascript"> $(функция(){ Shadowbox.init(); <!-- Код Slicebox --> $ ('.sb-slider').slicebox(); }); </script>