Добрый день.
На сайт (движок лебедева Imprimatur) необходимо разместить слайдшоу из трех картинок.
Слайдшоу взято
отсюда и основано на javascript.
Дивжок Imprimatur сделан таким образом, что каждая запись цельная состоит из независимых контент-блоков, в которые можно лепить разные скрипты и тд.
Пример
Запись состоит из 5 контент-блоков. 3 из которых - построены на javascript с jquery.
Так вот - о слайдшоу. Я подкорректировал исходный демо-код slidesjs - получилось то что ниже - при желании можете скачать архив и открыть его в dreamweaver. Вот ссыль -
http://www32.zippyshare.com/v/96551608/file.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SlidesJS Standard Code Example</title>
<meta name="description" content="SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.">
<meta name="author" content="Nathan Searles">
<!-- SlidesJS Required (if responsive): Sets the page width to the device width. -->
<meta name="viewport" content="width=device-width">
<!-- End SlidesJS Required -->
<!-- CSS for slidesjs.com example -->
<link href="css/example.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- End CSS for slidesjs.com example -->
<!-- SlidesJS Optional: If you'd like to use this design -->
<style>
body {
-webkit-font-smoothing: antialiased;
font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #232525;
padding-top:70px;
}
#slides {
display: none
}
#slides .slidesjs-navigation {
margin-top:5px;
}
a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
background-image: url(img/btns-next-prev.png);
background-repeat: no-repeat;
display:block;
width:12px;
height:18px;
overflow: hidden;
text-indent: -9999px;
float: left;
margin-right:5px;
}
a.slidesjs-next {
margin-right:10px;
background-position: -12px 0;
}
a:hover.slidesjs-next {
background-position: -12px -18px;
}
a.slidesjs-previous {
background-position: 0 0;
}
a:hover.slidesjs-previous {
background-position: 0 -18px;
}
a.slidesjs-play {
width:15px;
background-position: -25px 0;
}
a:hover.slidesjs-play {
background-position: -25px -18px;
}
a.slidesjs-stop {
width:18px;
background-position: -41px 0;
}
a:hover.slidesjs-stop {
background-position: -41px -18px;
}
.slidesjs-pagination {
margin: 7px 0 0;
float: right;
list-style: none;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url(img/pagination.png);
background-position: 0 0;
float: left;
overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
background-position: 0 -26px
}
#slides a:link,
#slides a:visited {
color: #333
}
#slides a:hover,
#slides a:active {
color: #9e2020
}
.navbar {
overflow: hidden
}
</style>
<!-- End SlidesJS Optional-->
<!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
<style>
#slides {
display: none
}
.container {
margin: 0 auto
}
/* For tablets & smart phones */
@media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
}
.container {
width: auto
}
}
/* For smartphones */
@media (max-width: 480px) {
.container {
width: auto
}
}
/* For smaller displays like laptops */
@media (min-width: 768px) and (max-width: 900px) {
.container {
width: 724px
}
}
/* For larger displays */
@media (min-width: 900px) {
.container {
width: 900px
}
}
</style>
<!-- SlidesJS Required: -->
</head>
<body>
<!-- SlidesJS Required: Start Slides -->
<!-- The container is used to define the width of the slideshow -->
<div class="container">
<div id="slides">
<a href="www.kbp.aero"><img src="https://kbp.aero/f/1/infrastructure/hotels/airport-hotel/aeroslide1.png" alt="picture1" /></a>
<a href="www.kbp.aero"><img src="https://kbp.aero/f/1/infrastructure/hotels/airport-hotel/aeroslide2.png" alt="picture1" /></a>
<a href="www.kbp.aero"><img src="https://kbp.aero/f/1/infrastructure/hotels/airport-hotel/aeroslide3.png" alt="picture1" /></a>
</div>
</div>
<!-- End SlidesJS Required: Start Slides -->
<!-- SlidesJS Required: Link to jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Link to jquery.slides.js -->
<script src="js/jquery.slides.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$('#slides').slidesjs({
width: 900,
height: 200,
play: {
active: true,
auto: true,
interval: 2000,
swap: true
}
});
});
</script>
<!-- End SlidesJS Required -->
</body>
</html>
НО! Проблема в том, что слайдшоу после публикации кода на сайте - не работает . просто висят тупо 3 картинки вертикально. сначала я подумал, что дело в css и прописал все пути нормально. Не сработало. Кстати, что касается кода выше, то я естественно не все скопировал включительно с body в контент-блок, а только то, что касается самого слайдшоу - подключалку для скрипта, скрипты, стили и дивы.
Потом я подумал что чтото не так с библиотекой jquery. Начал менять ссылки на разные версии библиотек - не сработало. Самое интересное, что в HEAD самого сайта стоит вот
эта версия jquery, а, допустим, в контент блоке "Выдержка из «Правил использования гостиницы» вот
эта. И никаких конфликтов с отображением нет.
Пожалуйста, подскажите, что сделать, что слайдшоу заработало(((
