|
Слайдер шапка
|
|
| [1] Koeshiro [03.07.2012, 21:19] |
Хотел сделать слайдер в виде шапки на пробном сайте. Ну там видно какой слайдер получился . . .
По идеи должен быть он вот такой . . . .И как его ставить вот тут откопал. Добрый дядя likbezz поможете?  Добавлено (03.07.2012, 21:19)
---------------------------------------------
А да, ставил его я вот так)
Quote <link rel="stylesheet" type="text/css" href="slider/style.css" title="styles1" /> <script type="text/javascript" src="slider/jquery.nivo.slider.pack.js"></script> <script type="text/javascript" src="slider/jquery.nivo.slider.settings.js"></script> <div id="container"> <p></p> <p></p> <!-- Begin Banner --> <div id="banner"> <div id="slider-wrapper"> <div id="slider" class="nivoSlider"> <a href="#"><img src="slider/banner.jpg" alt="" /></a> <a href="#"><img src="slider/banner2.jpg" alt="" title="#htmlcaption" /></a> <a href="#"><img src="slider/banner3.jpg" alt="" /></a> <a href="#"><img src="slider/banner4.jpg" alt="" /></a> </div> <div id="htmlcaption" class="nivo-html-caption"><p>Это пример заголовка изображения или анонс статьи HTML </p></div> </div> </div> <!-- End Banner --> </div> <br /> |
|
| [2] likbezz [03.07.2012, 23:04] |
Koeshiro, Хотел сделать слайдер в виде шапки на пробном сайте. Ну там видно какой слайдер получился . .
Доктайп проставь, без него это вообще не имеет смысла.
Добрый дядя likbezz поможете? smile
Вообще, отпал)
Да.
На такое обращение «добрый дядя» не откажет в помощи)
Но, чуть позже.
Проставляй доктайп пока. |
|
| [3] Koeshiro [04.07.2012, 00:06] |
|
likbezz, Поставил как на той демо стр. Мне перелошматило пол дизайна из за этого xhtml доктупа но нечего не работало .-. |
|
| [4] likbezz [04.07.2012, 00:10] |
Koeshiro, Поставил как на той демо стр. Мне перелошматило пол дизайна из за этого xhtml доктупа но нечего не работало .-.
Вот это в поле доктайпа:
Вот это исправь во всех шаблонах
на вот это:
... |
|
|
| [6] likbezz [04.07.2012, 00:30] |
Koeshiro, поставил я сам этот доктуп в редакторе, толку ноль (
В поле доктайпа, это в ПУ » Общие настройки - в самом низу.
В шаблонах доктайп НЕ прописывают. |
|
| [7] Koeshiro [04.07.2012, 00:37] |
|
likbezz, вообще нет разницы ._. что так что так .-. |
|
| [8] likbezz [04.07.2012, 09:40] |
Koeshiro,
Вот правильный код:
Code <!--Start(slider)--> <script type="text/javascript" src="http://likbezz.ru/_source/_js/nivo/jquery.nivo.slider.pack.js"></script> <div id="container"> <!-- Begin Banner --> <div id="banner"> <div id="slider-wrapper"> <div id="slider" class="nivoSlider"> <a href="#"><img src="/slider/banner.jpg" alt="" title="" /></a> <a href="#"><img src="/slider/banner2.jpg" alt="" title="#htmlcaption" /></a> <a href="#"><img src="/slider/banner3.jpg" alt="" title="" /></a> <a href="#"><img src="/slider/banner4.jpg" alt="" title="" /></a> </div> <div id="htmlcaption" class="nivo-html-caption"><p>Это пример заголовка изображения или анонс статьи HTML </p></div> </div> </div> <!-- End Banner --> </div> <script type="text/javascript"> $(window).load(function(){ $('#slider').nivoSlider({ pauseTime:4000, effect:'sliceUpDownLeft', directionNavHide:false, }); }); </script> <!--//End(slider)-->
☑ Поправленный скрипт слайдера
☑ Пример |
|
| [9] Koeshiro [04.07.2012, 09:53] |
Спасибо добрый дядя likbezz  |
|
| [10] likbezz [04.07.2012, 09:56] |
Koeshiro,
Там в самом скрипте был косяк - если не прописан титле - выдавал ошибку.
Ты не мог знать.
Незачто. |
|
| [11] Koeshiro [04.07.2012, 10:29] |
да у меня с jq и js ещё проблемы . . . . но потихоньку продвигаюсь)
Кстати я думал что там ошибка но ничего не нашёл  Добавлено (04.07.2012, 10:15)
---------------------------------------------
Да и снова косяк =\ И снова хер его знает почему. . . . код теперь ведь правильный .-. конфликтов не найдено ._. а дизайн перелошматило Добавлено (04.07.2012, 10:29)
---------------------------------------------
Всё сам научился править
Правда пришлось отказаться от верхней части сайта . . . . и наверное от нижней откажусь  |
|
| [12] likbezz [04.07.2012, 13:41] |
Koeshiro,
Вот это убери:
Code <link rel="stylesheet" type="text/css" href="slider/style.css" title="styles1" />
- Там много лишнего.
Тебе все стили не нужны, открой пример и скопируй стили, и добавь их в свои системные - там всего десять строчек.
Code /* Основа ротатора изображений */
#banner{background:#ebebeb url(http://likbezz.ru/_source/_img/2011/01/nivo_shadow0.png) bottom no-repeat;height:260px;text-align:center;margin:0;padding:0 0 30px;}
/* Контейнер */
#container{width:960px;margin:20px auto;}
/* Пользовательские стили Слайдера */
#slider-wrapper{background:none;width:960px;margin:auto;padding:0;}
#slider{position:relative;width:960px;height:260px;background:url(http://likbezz.ru/_source/_img/2011/01/nivo_loading.png) no-repeat 50% 50%;}
#slider img{position:absolute;top:0;left:0;display:none;}
#slider a{border:0;display:block;}
.nivo-controlNav{position:absolute;bottom:-19px;left:440px;text-align:center;margin:auto;padding:0;}
.nivo-controlNav a{display:block;width:15px;height:15px;background:url(http://likbezz.ru/_source/_img/2011/01/nivo_bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;position:relative;z-index:30;cursor:pointer;}
.nivo-controlNav a.active{font-weight:700;background-position:0 -22px;}
.nivo-directionNav a{display:block;width:56px;height:50px;background:url(http://likbezz.ru/_source/_img/2011/01/nivo_arrows.png) no-repeat;text-indent:-9999px;border:0;position:absolute;top:45%;z-index:30;cursor:pointer;}
a.nivo-nextNav{background-position:-56px 0;top:101px;right:-15px;}
a.nivo-nextNav:hover{background-position:-56px -50px;}
a.nivo-prevNav{top:101px;left:-15px;}
a.nivo-prevNav:hover{background-position:0 -50px;}
/* Nivo Slider стили */
.nivoSlider{position:relative;}
.nivoSlider img{position:absolute;top:0;left:0;}
/* Если изображение обвернуто в ссылку */
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;z-index:20;display:none;margin:0;padding:0;}
/* The slices in the Slider */
.nivo-slice{display:block;position:absolute;z-index:10;height:100%;}
/* Стили заголовка */
.nivo-caption{position:absolute;left:0;bottom:0;font:13px calibri;color:#CCC;background:#000;opacity:0.7px;width:100%;z-index:29;margin:0;padding:0;}
.nivo-caption p{margin:0;padding:10px 15px;}
.nivo-caption a{color:#efe9d1;text-decoration:underline;display:inline !important;}
.nivo-html-caption{display:none;}
Или вот, на крайняк:
Code <link rel="stylesheet" type="text/css" href="http://likbezz.ru/_source/_js/nivo/nivo_style.css" />
Замени. |
|
| [13] Koeshiro [06.07.2012, 22:56] |
|
likbezz, пясяб ^^ Добавлено (06.07.2012, 22:56)
---------------------------------------------
likbezz, последний вопрос по этому долбаному слайдеру . . . думал выделенную часть убрать и заменить менюшкой но что-то не могу понять что к чему . ... толи усталость сказывактся толи ещё что  |
|
| [14] likbezz [06.07.2012, 23:47] |
Koeshiro, могу понять что к чему . ... толи усталость сказывактся толи ещё что
Ну отдохни немного, переключись - на свежую голову лучше думается) |
|
| [15] Koeshiro [06.07.2012, 23:48] |
likbezz, да на самом деле  |
|
:o