|
js
|
|
Пятница, 25.05.2012, 15:06
Проверенный
Quote Размер слайдера изменился. Вроде всё отлично, но за исключением одного: слайдер растянулся.
Сама рамка изменилась или картинки?
#slider-wrapper {
background:url(/images/slider.png) no-repeat;
width:998px;
height:392px;
margin:0 auto;
padding-top:74px;
}
Один из друх параметров отвечает за сам слайдер и за размер изображений, не совсем понял что всё отлично но слайдер растянулся?
Нужно смотреть я не могу помочь так, нужно пробовать картинки ставить разные и смотреть что меняется. |
host-food.ru - отличный хостинг с поддержкой PHP и MySQL |
|
Пятница, 25.05.2012, 15:10
Пользователь
Вот тестовый сайт http://muzic-portal.ucoz.ru/
Слайдер в самом внизу |
|
Пятница, 25.05.2012, 15:46
Проверенный
| DEMO я же предоставил что в этой версии не устраивает?? |
host-food.ru - отличный хостинг с поддержкой PHP и MySQL |
|
Пятница, 25.05.2012, 17:36
Пользователь
|
Пятница, 25.05.2012, 18:07
Проверенный
| Taz2, тогда пользуйтесь, если будут вопросы пишите. |
host-food.ru - отличный хостинг с поддержкой PHP и MySQL |
|
Пятница, 25.05.2012, 18:13
Пользователь
| Подожди, подожди, а ты код напишешь?) Ведь у тебя на демо всё ровно. |
|
Пятница, 25.05.2012, 18:33
Проверенный
Faq:
1. залить файлы на сервер папки css, images, js: Скачать
2. между <head></head> пишем:
Code
<link rel="stylesheet" href="/css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />
3. между <body></body>
Code <div id="wrapper"> <div class="slider-wrapper theme-default"> <div class="ribbon"></div> <div id="slider" class="nivoSlider"> <img src="images/header.jpg" alt="" /> <img src="images/header.jpg" alt="" title="This is an example of a caption" /></a> <img src="images/header.jpg" alt="" data-transition="slideInLeft" /> <img src="images/header.jpg" alt="" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div> </div> </div>
Выберите подходящий из:
Code
title="This is an example of a caption"
или
data-transition="slideInLeft"
или
title="#htmlcaption"
Не обязательно:
Code <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
4. Подключаем js:
Code
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
5. В файле jquery.nivo.slider.pack.js в низу:
directionNav:false - отключить стрелки
controlNav:false - отключить нижние кнопки
manualAdvance:true - ручной слайдер
ну думаю разберётесь.
Ах да забыл:
высота ширина в файле style.css
Code
.theme-default #slider {
margin:100px auto 0 auto;
width:460px; /* Make sure your images are the same size */ ширина
height:215px; /* Make sure your images are the same size */ высота
}
|
Пост отредактировал Diesel101 - Пятница, 25.05.2012, 18:40 |
host-food.ru - отличный хостинг с поддержкой PHP и MySQL |
|
Пятница, 25.05.2012, 19:01
Пользователь
| Не получается пока. На своём сайте почему-то дизайн поменялся. На демо сайте всё нормально |
|
Пятница, 25.05.2012, 19:19
Проверенный
| Taz2, скачайте архив заново, забыл добавить картинки переключателей, и default.css замените. Добавлено (25.05.2012, 19:09)
---------------------------------------------
Конечно зачем копировать всё нужно только:
Code
.theme-default #slider {
margin:100px auto 0 auto;
width:460px; /* Make sure your images are the same size */
height:215px; /* Make sure your images are the same size */
}
Добавлено (25.05.2012, 19:19)
---------------------------------------------
CSS и убрать
Code
title="#htmlcaption"
а также этот:
Code <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
чтобы не было ссылки в слайдере. |
Пост отредактировал Diesel101 - Пятница, 25.05.2012, 19:04 |
host-food.ru - отличный хостинг с поддержкой PHP и MySQL |
|
Пятница, 25.05.2012, 19:28
Пользователь
| Всё отлично! Всё работает прекрасно! Кропотливая работа, однако. Спасибо тебе огромное) |
|
Пятница, 25.05.2012, 19:39
Проверенный
Пожалуйста есть и такие варианты ну уже объяснять не буду кто прочитает думаю поймёт как делать
Demo2 требует 630px x 235px
Demo3 требует 630px x 235px
Так что стандартный самый лучший можно ставить любой размер.
Не забудьте удалять в style.css не нужные стили иначе изменит ваш шаблон. |
Пост отредактировал Diesel101 - Пятница, 25.05.2012, 19:41 |
host-food.ru - отличный хостинг с поддержкой PHP и MySQL |
|
Суббота, 26.05.2012, 18:14
Пользователь
| Diesel101, а можно как-то сдвинуть скрипт вверх? Есть для этого код? |
|
Суббота, 26.05.2012, 21:10
Проверенный
Taz2, вверху на станице поставить?, если этот вопрос то можно ставьте куда угодно этот код:
Code <div id="wrapper"> <div class="slider-wrapper theme-default"> <div class="ribbon"></div> <div id="slider" class="nivoSlider"> <img src="images/header.jpg" alt="" /> <img src="images/header.jpg" alt="" /> <img src="images/header.jpg" alt="" /> <img src="images/header.jpg" alt="" /> </div> </div> </div> |
Пост отредактировал Diesel101 - Суббота, 26.05.2012, 21:10 |
host-food.ru - отличный хостинг с поддержкой PHP и MySQL |
|
Воскресенье, 27.05.2012, 08:01
Пользователь
Нет. Посмотри на картинку http://s019.radikal.ru/i607/1205/a5/aaba2b848ad3.jpg
Видишь, слайдер ниже горизонтального меню. В принципе так и должно быть, но слишком большое расстояние. |
|
Воскресенье, 27.05.2012, 17:05
Проверенный
В CSS а вернее в style.css вот ссылка есть строчка:
Code
.theme-default #slider {
margin:100px auto 0 auto;
width:460px; /* Make sure your images are the same size */
height:215px; /* Make sure your images are the same size */
}
margin:100px auto 0 auto;
margin - устанавливает величину отступа от каждого края элемента.
Сменить на любой другой вот так:
margin:50px auto 0 auto; <- можно убрать вообще можно установить свою строчку:
magrin: 0 0 0 0; или magrin: 10px 10px 10px 10px; или magrin: 10% 10% 10% 10%; - поочередно устанавливается отступ от верхнего, правого, нижнего и левого края. |
Пост отредактировал Diesel101 - Воскресенье, 27.05.2012, 17:06 |
host-food.ru - отличный хостинг с поддержкой PHP и MySQL |
|
