Доброе утро, Гость! Представляем Вам наши форумы. Вы можете зарегистрироваться чтобы писать на форумах или зайдите под своим именем, если Вы уже регистрировались.
   
   


Форум
 SX CMS / Техническая помощь
         Nivo-slider криво стал

Похожие темы

Nivo-slider криво стал


События Понедельник, 17.09.2012, 10:55

lugobor

Группа: Пользователь
Ранг: Новичок
Cообщений: 28
Регистрация: 26.05.2012
Город: Харьков
Устанавливаю Nivo-slider на http://erotic-shop.org.ua
Почему-то не изменяется ширина/высота, не выводятся стрелки к слайдеру и скачет изображение.

Делал так:

в папку сайт/javascripts залил jquery.nivo.slider.pack.js

в файле /сайт/theme/standard/page/main.tpl
вставил
Код
<script type="text/javascript" src="/javascripts/jquery.nivo.slider.pack.js"></script>

перед тегом </head>
и
Код
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

перед тегом </body>

в файле /сайт/theme/standard/css/standard/style.main.css в самый низ добавил
Код
/*Слайдер*/
.theme-default #slider {
margin:0 auto 0 auto;
width:745px; /* Make sure your images are the same size */
height:300px; /* Make sure your images are the same size */
}
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#ccc;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
/*дефолт тема*/
.theme-default .nivoSlider {
position:relative;
background:#fff url('../../images/loading.gif') no-repeat 50% 50%;
margin-bottom:50px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.theme-default .nivoSlider a {
border:0;
display:block;
}

.theme-default .nivo-controlNav {
position:absolute;
left:50%;
bottom:-42px;
margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url('../../images/bullets.png') no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.theme-default .nivo-controlNav a.active {
background-position:0 -22px;
}

.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url('../../images/arrows.png') no-repeat;
text-indent:-9999px;
border:0;
}
.theme-default a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
}

.theme-default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
color:#fff;
}


Ну и картинки слайдера (стрелки, кнопки и загрузку) кинул в папку /сайт/theme/standard/images/

после этого вывожу слайдер кодом
Код
<div id="wrapper">
<div>

<div id="slider">
<a href="ссылка"><img src="Путь к картинке" alt="" title="Надпись к изображению" /></a>
<img src="Путь к картинке" alt=""/>
<img src="Путь к картинке" alt="" data-transition="slideInLeft" />
<img src="Путь к картинке" alt=""/>
</div>

</div>

</div>



Что сделал не так?

P.S. В настройках сайта выключил сжатие, кеширование, оптимизацию, вобщем все выключил

Отредактировано lugobor: 17.09.2012, 10:58:43
Вложения
ns.zip   (14 x загружено | 7,1 Кб)   


Пользователь офлайн
События Вторник, 18.09.2012, 09:51

Kurman

Группа: Пользователь
Ранг: Продвинутый
Cообщений: 237
Регистрация: 26.10.2009
Город: Moscow
Выставь правильный "Путь к картинке", в том числе и к стрелкам, и все будет работать. Ширину можешь указать в самой ссылке к изображения - ширину и высоту каждого изображения.

Отредактировано Kurman: 18.09.2012, 09:52:55
Благодарности lugobor
Пользователь офлайн
События Вторник, 18.09.2012, 10:32

lugobor

Автор текущей темы
Группа: Пользователь
Ранг: Новичок
Cообщений: 28
Регистрация: 26.05.2012
Город: Харьков
Выставил вообще прямой путь http://erotic-shop.org.ua/f/arrows.png картинку по ссылке видно, в слайдере нет...
Цитата
Ширину можешь указать в самой ссылке к изображения - ширину и высоту каждого изображения.

Пробовал, размер конечно меняется, но изображения все равно иногда выпадают ниже.

У меня вообще такое впечатление, что я стили добавляю не в том файле.
Пока еще не разобрался с вашей структурой...
На других движках ставил легко, тут например http://bikini-shop.com.ua/ все стили в одном файле...
Mожет стиль слайдера добавлять не в style.main.css ?

Отредактировано lugobor: 18.09.2012, 10:46:50
Пользователь офлайн
События Вторник, 18.09.2012, 14:25

SX

Группа: Администратор
Cообщений: 3016
Регистрация: 23.10.2009
Стили в правильный файл добавляете.
По ссылке кстати ваши картинки не вижу
Инициализацию скрипта оберните в
Код
$(document).ready(function() {

}



Благодарности lugobor
Пользователь офлайн
События Вторник, 18.09.2012, 17:14

lugobor

Автор текущей темы
Группа: Пользователь
Ранг: Новичок
Cообщений: 28
Регистрация: 26.05.2012
Город: Харьков
Спасибо за советы, все оказалось намного проще, - сам тупанул, не подключил стиль, ошибка в коде вывода.

Нужно так писать
Код
<div id="wrapper">
<div class="slider-wrapper theme-default">

<div id="slider" class="nivoSlider">
<a href="ссылка"><img src="Путь к картинке" alt="" title="Надпись к изображению" /></a>
<img src="Путь к картинке" alt=""/>
<img src="Путь к картинке" alt="" data-transition="slideInLeft" />
<img src="Путь к картинке" alt=""/>
</div>

</div>

</div>



Все работает. Можно кстати и в блок засунуть, тоже работает.
Пользователь офлайн


Похожие темы  |   Предыдущая тема  |   Следующая тема

Быстрый переход:  
 

 Сейчас на сайте

Пользователей: 0, Гостей: 3

Поисковые боты: 81
Bot(74), oBot(2), BingBot(4), Baidu.com
 Статистика форума

  Темы Сообщения Пользователи
За сутки:
За неделю:
За месяц:
Всего:
Мы приветствуем нового участника: wonad81290
 Дни рождения

yurymaslov (85), Роман (38), Салихбек (32)
Copyright © 2009 - 2024 SX All rights reserved | Powered by SX CMS 1.06 UTF | Контакты