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

Форум   Пользователи   Календарь   Помощь   Поиск   Новые сообщения   Новые темы   Темы без ответов  

Форум
 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() {

}



Модули, шаблоны и виджеты для SX CMS быстро, не дорого и профессионально
Благодарности 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

Поисковые боты: 185
Bot(176), Googlebot(2), BingBot(5), Spider, Crawler
 Статистика форума

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

Tvoy Romeo (102), modulm (63), schetilin (46), mepps1988 (36)
Copyright © 2009 - 2024 SX All rights reserved | Powered by SX CMS 1.06 UTF | Контакты