на одном форуме нашёл очень интересное слайдинговое окно, которое захотел поставить себе на сайт. Но так как я впервые связался с jQurery библиотеками, у меня естественно ничего не получилось. Хотел бы спросить в чём я допустил ошибку? Может быть код который я добавил на сайт слишком старый для версии моих библиотек? А может я неправильно распаковал файлы в корень своего сайта, которые поставлялись вместе с предложенным кодом? В любом случае - расскажите каким образом распаковать файлы которые я скачал и как сделать код рабочим?
Иформация:
Мой сайт (на Ucoz) поддерживает такие Версии библотек jQuery как 1.3.2 и 1.6.1.
Вот этот код надо было , как я понял, вставить, в шапку - то есть между тегами <head> и </head>.
за этим кодом, в тоже самое место идёт этот
после него в том же месте страницы идёт вот этот
ну и наконец в нужном нам месте вставляем саму таблицу
после чего нам предлагают загрузить на сайт вот этот архив, а распаковывать или нет, каким образом расположить папки и что куда кинуть не сказали (простите если не знаю элементарных вещей)
состав предложенного файла
в итоге у меня получился такой код
в итоге получилось вот это
а в оригинале сайт должен выглядеть так
| Код |
|---|
сайтс описанем создания данного окна -> http://ruseller.com/lessons.php?rub=32&id=273 |
Иформация:
Мой сайт (на Ucoz) поддерживает такие Версии библотек jQuery как 1.3.2 и 1.6.1.
Вот этот код надо было , как я понял, вставить, в шапку - то есть между тегами <head> и </head>.
| Код |
|---|
<script src="js/jquery-1.2.1.pack.js" type="text/javascript"></script> |
за этим кодом, в тоже самое место идёт этот
| Код |
|---|
<script src="js/jquery-easing.1.2.pack.js" type="text/javascript"></script> <script src="js/jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script> <script src="js/coda-slider.1.1.1.pack.js" type="text/javascript"></script> |
после него в том же месте страницы идёт вот этот
| Код |
|---|
<style type="text/css">
* { margin: 0; padding: 0
}
p { text-align: left; margin: 15px 0
}
p, ul { font-size: 13px; line-height: 1.4em
}
p a, li a { color: #39c; text-decoration: none
}
p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100%
}
p#cross-links { text-align: center
}
p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px
}
a:focus { outline:none
}
img { border: 0
}
h3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left }
body {
font-family: Verdana, Arial;
background: #ebebeb url("images/body-bg.png") repeat-y center;
color: #000;
width: 800px;
margin: auto;
text-align: center;
padding-bottom: 20px;
}
.stripViewer .panelContainer .panel ul {
text-align: left;
margin: 0 15px 0 30px;
}
.slider-wrap {
margin: 20px 0;
position: relative;
width: 100%;
}
.csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
.csw .loading {margin: 200px 0 300px 0; text-align: center}
.stripViewer {
position: relative;
overflow: hidden;
border: 5px solid #000;
margin: auto;
width: 700px;
height: 460px;
clear: both;
background: #fff;
}
.stripViewer .panelContainer {
position: relative;
left: 0; top: 0;
width: 100%;
list-style-type: none;
}
.stripViewer .panelContainer .panel {
float:left;
height: 100%;
position: relative;
width: 700px;
}
.stripViewer .panelContainer .panel .wrapper {
padding: 10px;
}
.stripNav {
margin: auto;
}
.stripNav ul {
list-style: none;
}
.stripNav ul li {
float: left;
margin-right: 2px;
}
.stripNav a {
font-size: 10px;
font-weight: bold;
text-align: center;
line-height: 32px;
background: #c6e3ff;
color: #fff;
text-decoration: none;
display: block;
padding: 0 15px;
}
.stripNav li.tab1 a { background: #60f }
.stripNav li.tab2 a { background: #60c }
.stripNav li.tab3 a { background: #63f }
.stripNav li.tab4 a { background: #63c }
.stripNav li.tab5 a { background: #00e }
.stripNav li a:hover {
background: #333;
}
.stripNav li a.current {
background: #000;
color: #fff;
}
.stripNavL, .stripNavR {
position: absolute;
top: 230px;
text-indent: -9000em;
}
.stripNavL a, .stripNavR a {
display: block;
height: 40px;
width: 40px;
}
.stripNavL {
left: 0;
}
.stripNavR {
right: 0;
}
.stripNavL {
background: url("images/arrow-left.gif") no-repeat center;
}
.stripNavR {
background: url("images/arrow-right.gif") no-repeat center;
}
</style> |
ну и наконец в нужном нам месте вставляем саму таблицу
| Код |
|---|
<div class="slider-wrap"> <div id="slider1" class="csw"> <div class="panelContainer"> <div class="panel" title="Первая панель"> <div class="wrapper"> <h3>Первая панель</h3> <p>Здесь будет текст Вашей первой панели.</p> <p><a href="#5" class="cross-link" title="К пятой панели">« Предыдущая</a> | <a href="#2" class="cross-link" title="Ко второй панели">Следующая »</a></p> </div> </div> <div class="panel" title="Вторая панель"> <div class="wrapper"> <h3>Вторая панель</h3> <p>Здесь будет текст Вашей второй панели.</p> <p><a href="#1" class="cross-link" title="К первой панели">« Предыдущая</a> | <a href="#3" class="cross-link" title="К третьей панели">Следующая »</a></p> </div> </div> <div class="panel" title="Третья панель"> <div class="wrapper"> <h3>Третья панель</h3> <p>Здесь будет текст Вашей третьей панели.</p> <p><a href="#2" class="cross-link" title="Ко второй панели">« Предыдущая</a> | <a href="#4" class="cross-link" title="К четвертой панели">Следующая »</a></p> </div> </div> <div class="panel" title="Четвертая панель"> <div class="wrapper"> <h3>Четвертая панель</h3> <p>Здесь будет текст Вашей четвертой панели.</p> <p><a href="#3" class="cross-link" title="К третьей панели">« Предыдущая</a> | <a href="#5" class="cross-link" title="К пятой панели">Следующая »</a></p> </div> </div> <div class="panel" title="Пятая панель"> <div class="wrapper"> <h3>Пятая панель</h3> <p>Здесь будет текст Вашей пятой панели.</p> <p><a href="#4" class="cross-link" title="К четвертой панели">« Предыдущая</a> | <a href="#1" class="cross-link" title="К первой панели">Следующая »</a></p> </div> </div> </div> </div> </div> |
после чего нам предлагают загрузить на сайт вот этот архив, а распаковывать или нет, каким образом расположить папки и что куда кинуть не сказали (простите если не знаю элементарных вещей)
состав предложенного файла
| Код |
|---|
example.zip - в нем папки js и images и файл index.htm js > coda-slider.1.1.1.pack.js, jquery-1.2.1.pack.js, jquery-easing.1.2.pack.js, jquery-easing-compatibility.1.2.pack.js images > ajax-loader.gif, arrow-left.gif, arrow-right.gif, body-bg.png l |
в итоге у меня получился такой код
| Код |
|---|
<html>
<head>
<script src="js/jquery-1.2.1.pack.js" type="text/javascript"></script><script src="js/jquery-easing.1.2.pack.js" type="text/javascript"></script>
<script src="js/jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script>
<script src="js/coda-slider.1.1.1.pack.js" type="text/javascript"></script>
<style type="text/css">
* { margin: 0; padding: 0
}
p { text-align: left; margin: 15px 0
}
p, ul { font-size: 13px; line-height: 1.4em
}
p a, li a { color: #39c; text-decoration: none
}
p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100%
}
p#cross-links { text-align: center
}
p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px
}
a:focus { outline:none
}
img { border: 0
}
h3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left }
body {
font-family: Verdana, Arial;
background: #ebebeb url("images/body-bg.png") repeat-y center;
color: #000;
width: 800px;
margin: auto;
text-align: center;
padding-bottom: 20px;
}
.stripViewer .panelContainer .panel ul {
text-align: left;
margin: 0 15px 0 30px;
}
.slider-wrap {
margin: 20px 0;
position: relative;
width: 100%;
}
.csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
.csw .loading {margin: 200px 0 300px 0; text-align: center}
.stripViewer {
position: relative;
overflow: hidden;
border: 5px solid #000;
margin: auto;
width: 700px;
height: 460px;
clear: both;
background: #fff;
}
.stripViewer .panelContainer {
position: relative;
left: 0; top: 0;
width: 100%;
list-style-type: none;
}
.stripViewer .panelContainer .panel {
float:left;
height: 100%;
position: relative;
width: 700px;
}
.stripViewer .panelContainer .panel .wrapper {
padding: 10px;
}
.stripNav {
margin: auto;
}
.stripNav ul {
list-style: none;
}
.stripNav ul li {
float: left;
margin-right: 2px;
}
.stripNav a {
font-size: 10px;
font-weight: bold;
text-align: center;
line-height: 32px;
background: #c6e3ff;
color: #fff;
text-decoration: none;
display: block;
padding: 0 15px;
}
.stripNav li.tab1 a { background: #60f }
.stripNav li.tab2 a { background: #60c }
.stripNav li.tab3 a { background: #63f }
.stripNav li.tab4 a { background: #63c }
.stripNav li.tab5 a { background: #00e }
.stripNav li a:hover {
background: #333;
}
.stripNav li a.current {
background: #000;
color: #fff;
}
.stripNavL, .stripNavR {
position: absolute;
top: 230px;
text-indent: -9000em;
}
.stripNavL a, .stripNavR a {
display: block;
height: 40px;
width: 40px;
}
.stripNavL {
left: 0;
}
.stripNavR {
right: 0;
}
.stripNavL {
background: url("images/arrow-left.gif") no-repeat center;
}
.stripNavR {
background: url("images/arrow-right.gif") no-repeat center;
}
</style>
[B]
далее бла бла бла и в выбранном мною месте для сладинга вот этот код[/B]
<div class="slider-wrap"> <div id="slider1" class="csw">
<div class="panelContainer">
<div class="panel" title="Первая панель">
<div class="wrapper">
<h3>Первая панель</h3>
<p>Здесь будет текст Вашей первой панели.</p>
<p><a href="#5" class="cross-link" title="К пятой панели">« Предыдущая</a> | <a href="#2" class="cross-link" title="Ко второй панели">Следующая »</a></p>
</div>
</div>
<div class="panel" title="Вторая панель">
<div class="wrapper">
<h3>Вторая панель</h3>
<p>Здесь будет текст Вашей второй панели.</p>
<p><a href="#1" class="cross-link" title="К первой панели">« Предыдущая</a> | <a href="#3" class="cross-link" title="К третьей панели">Следующая »</a></p>
</div>
</div>
<div class="panel" title="Третья панель">
<div class="wrapper">
<h3>Третья панель</h3>
<p>Здесь будет текст Вашей третьей панели.</p>
<p><a href="#2" class="cross-link" title="Ко второй панели">« Предыдущая</a> | <a href="#4" class="cross-link" title="К четвертой панели">Следующая »</a></p>
</div>
</div>
<div class="panel" title="Четвертая панель">
<div class="wrapper">
<h3>Четвертая панель</h3>
<p>Здесь будет текст Вашей четвертой панели.</p>
<p><a href="#3" class="cross-link" title="К третьей панели">« Предыдущая</a> | <a href="#5" class="cross-link" title="К пятой панели">Следующая »</a></p>
</div>
</div>
<div class="panel" title="Пятая панель">
<div class="wrapper">
<h3>Пятая панель</h3>
<p>Здесь будет текст Вашей пятой панели.</p>
<p><a href="#4" class="cross-link" title="К четвертой панели">« Предыдущая</a> | <a href="#1" class="cross-link" title="К первой панели">Следующая »</a></p>
</div>
</div>
</div>
</div>
</div> |
в итоге получилось вот это
а в оригинале сайт должен выглядеть так
