Не отображается jquery слайдшоу на Imprimatur
Добрый день.
На сайт (движок лебедева 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, а, допустим, в контент блоке "Выдержка из «Правил использования гостиницы» вот эта. И никаких конфликтов с отображением нет. Пожалуйста, подскажите, что сделать, что слайдшоу заработало((( |
вот что я вставляю в контент-блок (в дримвивере не работает тоже). так в чем ошибка ? [HTML]<link href="http://kbp.aero/f/1/infrastructure/hotels/airport-hotel/example.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="http://kbp.aerof/1/infrastructure/hotels/airport-hotel/font-awesome.min.css" /> <style> body { -webkit-font-smoothing: antialiased; font: normal 15px/1.5 "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(http://kbp.aero/f/1/infrastructure/hotels/airport-hotel/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(http://kbp.aero/f/1/infrastructure/hotels/airport-hotel/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> <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> <div class="container"> <div id="slides"> <a href="www.kbp.aero"><img src="http://kbp.aero/f/1/infrastructure/hotels/airport-hotel/aeroslide1.png" alt="picture1" /></a> <a href="www.kbp.aero"><img src="http://kbp.aero/f/1/infrastructure/hotels/airport-hotel/aeroslide2.png" alt="picture1" /></a> <a href="www.kbp.aero"><img src="http://kbp.aero/f/1/infrastructure/hotels/airport-hotel/aeroslide3.png" alt="picture1" /></a> </div> </div> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://kbp.aero/f/1/infrastructure/hotels/airport-hotel/jquery.slides.min.js"></script> <script> $(function() { $('#slides').slidesjs({ width: 900, height: 200, play: { active: true, auto: true, interval: 2000, swap: true } }); }); </script> [/html] |
Часовой пояс GMT +3, время: 12:27. |