Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

5

Nivo Slider

Автор oneram, 17 апр. 2012 14:52

Назад

Авторизуйтесь для ответа в теме

Сообщений в теме: 216

#21 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 22 Июнь 2012 - 11:56

Для отключения навигации в слайдере в виде точек - вам необходимо изменить опцию в самом слайдере - при его подключении. Все доступные опции есть тут http://nivo.dev7stud...y-plugin-usage/

Наверх

#22 ildar60686

Пользователь

Пользователи
41 сообщений

Отправлено 30 Июнь 2012 - 23:26

Подскажите как переместить слайдер ???

он у меня сейчас на самом верху страницы над шапкой
а хотель бы его передвинуть в квадрат как показано на рисунке

Прикрепленные изображения

Наверх

#23 ildar60686

Пользователь

Пользователи
41 сообщений

Отправлено 01 Июль 2012 - 13:13

Все разобрался сам все получилось :lol:

http://toptyzhka.storeland.ru/

Наверх

#24 choi_vivi

Новичок

Пользователи
3 сообщений

ГородПекин

Отправлено 02 Июль 2012 - 13:35

До этого устанавливала слайдер, всё работало. В этот раз слайды отображаются в столбик, не пойму, где ошибка. Прошу вашей помощи, магазин http://sgsshop.ru/

Наверх

#25 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 02 Июль 2012 - 23:35

Вы закрыли сайт от просмотра. В связи с этим помочь вам не представляется возможным.

Наверх

#26 Neolaef

Пользователь

Пользователи
35 сообщений

Отправлено 19 Июль 2012 - 14:35

все отлично встало, а как картинки на свои поменять?

Наверх

#27 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 19 Июль 2012 - 16:47

Изображения вам необходимо загрузить в разделе файлы, далее в блоке

<div id="slider">
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/slider.png" alt="" />
				  <a href="http://dev7studios.com"><img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/nemo.png" alt="" /></a>
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/toystory.png" alt="" title="Пример картинки с заголовком" />
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/walle.png" alt="" />
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/cars.png" alt="" />
				</div>

изменяете ссылки изображений на свои.

Наверх

#28 kaisyRUS

Активный участник

Пользователи
381 сообщений

Отправлено 26 Июль 2012 - 18:48

Кто нибудь разобрался как убрать расстояние до точек или вобще эти точки?

Наверх

#29 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 26 Июль 2012 - 21:40

На данный вопрос я отвечала выше сообщением http://forum.storela...dpost__p__22630

Наверх

#30 kaisyRUS

Активный участник

Пользователи
381 сообщений

Отправлено 27 Июль 2012 - 09:12

Vaccina (26 Июль 2012 - 21:40) писал:

На данный вопрос я отвечала выше сообщением http://forum.storela...dpost__p__22630

Да я понял. Только там на английском все. Думал может кто подскажет

Наверх

#31 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 27 Июль 2012 - 20:19

Почитайте следующее сообщение http://forum.storela...dpost__p__22924

Наверх

#32 mi-rulim.ru

Продвинутый пользователь

Пользователи
67 сообщений

ГородМосква

Отправлено 30 Июль 2012 - 10:28

support (31 Май 2012 - 17:31) писал:

Извиняюсь за возникшее недопонимание. Данная задача со слайдером является наиболее простой для любого даже начинающего верстальщика, да и инструкций полно, но некоторые мелочи очевидные ему не всегда могут быть очевидны не столь подготовленному пользователю. Попробую рассказать с максимумом деталей, на примере нашей системы, нашего редактора тем, нашего html редактора шаблонов о том как поставить слайдер на свой сайт Nivo Slider... Итак поехали:

Скачиваем себе на компьютер следующий архив, я его специально подготовил, все до одного лишние файлы удалил:
slider.zip
Распаковываем на своём компьютере.
Заходим в панель управления магазином, через форму авторизации.
Переходим в раздел "Сайт" > "Редактор тем".
Скролим вниз до блока файлов, нажимаем кнопку добавить файлы, появится 5 полей для файлов.
nyro1.jpg
В каждое поле вставляем те файлы, что распаковались из архива, их как раз 5.
nyro2.jpg
Проверяем закачались ли эти файлы, выглядят они в редакторе тем как-то так:
nyro3.jpg

Открываем файл HTML, находим следующий код (у меня это 53 строка, используйте встроенный поиск браузера, Ctrl+f, чтобы не искать глазами.):

  <!-- Скрипты магазина -->
  <script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

После него вставляем вот такой код:

  <!-- Загрузка Jquery галереии Nyro -->
  <link rel="stylesheet" href="{ASSETS_STYLES_PATH}nyro_default.css" type="text/css" media="screen" />
  <script src="{ASSETS_JS_PATH}jquery.nivo.slider.pack.js" type="text/javascript"></script>

Получается как-то так:

  <!-- Скрипты магазина -->
  <script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

  <!-- Загрузка Jquery галереии Nyro -->
  <link rel="stylesheet" href="{ASSETS_STYLES_PATH}nyro_default.css" type="text/css" media="screen" />
  <script src="{ASSETS_JS_PATH}jquery.nivo.slider.pack.js" type="text/javascript"></script>

В браузере выглядит так:
Прикрепленный файл

nyro4.jpg

Нажимаем кнопку "сохранить" сверху.

Далее скролим вниз этого файла (html) находим (естественно встроенным поиском, Ctrl+f, глазами искать не всегда есть гуд.) вот такой не сложный код:

{BODY}

Перед ним! Вставляем вот такой код:

			<!-- Вешаем слайдер на главной -->
			{% IF index_page %}
			  <!-- Обёртка, указывающая стиль темы -->
			  <div class="theme-default" style="padding-top:1em;">
				<!-- Непосредственный код слайдера -->
				<div id="slider">
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/slider.png" alt="" />
				  <a href="http://dev7studios.com"><img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/nemo.png" alt="" /></a>
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/toystory.png" alt="" title="Пример картинки с заголовком" />
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/walle.png" alt="" />
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/cars.png" alt="" />
				</div>
			  </div>
			  
			  <!-- Запуск слайдера -->
			  <script type="text/javascript">
				$(window).load(function() {
					$('#slider').nivoSlider();
				});
			  </script>
			{% ENDIF %}

Получается вот так:

			<!-- Вешаем слайдер на главной -->
			{% IF index_page %}
			  <!-- Обёртка, указывающая стиль темы -->
			  <div class="theme-default" style="padding-top:1em;">
				<!-- Непосредственный код слайдера -->
				<div id="slider">
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/slider.png" alt="" />
				  <a href="http://dev7studios.com"><img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/nemo.png" alt="" /></a>
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/toystory.png" alt="" title="Пример картинки с заголовком" />
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/walle.png" alt="" />
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/cars.png" alt="" />
				</div>
			  </div>
			  
			  <!-- Запуск слайдера -->
			  <script type="text/javascript">
				$(window).load(function() {
					$('#slider').nivoSlider();
				});
			  </script>
			{% ENDIF %}

			{BODY}

Нажимаем кнопку "сохранить", выглядит это так:
nyro5.jpg
Заходим на главную страницу сайта, нажимаем F5 либо Ctrl+R
Должен получиться вот такой результат:
nyro6.jpg nyro7.jpg nyro8.jpg

Если слайдер не завёлся и не поехал, то видимо что-то сделали не так, напишите об этом постараюсь рассказать ещё детальней о том месте, где возникла ошибка.

Пример живого слайдера (демо)

Добрый день! Помогите со слайдером :rolleyes:

Вот сайт Моя ссылка

Пытаюсь установить на шапку, появились вопрсы и вылезло несколько проблем:

1. Какого размера, лучше делать изображения и размер слайдера(самого окна) меняется только здесь?

.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
Если я меняю процент, то при просмотре выдаёт 100% , а потом уменьшается(

2.На картинке из мультфильма "вверх" (дедушка с собачкой) слайдер останавливается и уже не крутится, даже с помощью стрелок! Как это исправить?
3 В FF слайдер при перемотке уменьшается до точки и опять появляется! Прилагаю скрин, в момент превращения в точку))))Описала, как смогла)))

Прикрепленные изображения

Наверх

#33 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 30 Июль 2012 - 22:40

Тут размер зависит от вашего предпочтения. Размер задается в .nivoSlider
Так же размеры изображения должны быть такие же как и размер слайдера - иначе возможны ошибки отображения. Вероятно все ваши проблемы именно с этим и связаны.

Наверх

#34 mi-rulim.ru

Продвинутый пользователь

Пользователи
67 сообщений

ГородМосква

Отправлено 31 Июль 2012 - 09:50

Vaccina (30 Июль 2012 - 22:40) писал:

Тут размер зависит от вашего предпочтения. Размер задается в .nivoSlider
Так же размеры изображения должны быть такие же как и размер слайдера - иначе возможны ошибки отображения. Вероятно все ваши проблемы именно с этим и связаны.

Добрый день!
Вы не подскажите, где конкретно найти эти размеры слайдера, в сss файлах только проценты прописаны!
Не могу найти, какого размера картинка должна быть в пикселях((
Укажите,пожалуйста, сама не вижу(((

/*
 * jQuery Nivo Slider v3.0.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2012, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
 
/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
	width:100%;
	height:auto;
	overflow: hidden;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
}
.nivo-main-image {
	display: block !important;
	position: relative !important; 
	width: 100% !important;
}

/* 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%;
	top:0;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
	overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	width:100%;
	z-index:8;
	padding: 5px 10px;
	opacity: 0.8;
	overflow: hidden;
	display: none;
	-moz-opacity: 0.8;
	filter:alpha(opacity=8);
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;	/* Firefox, other Gecko */
	box-sizing: border-box;		 /* Opera/IE 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 {
	text-align:center;
	padding: 15px 0;
}
.nivo-controlNav a {
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}

/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: flexible
Description: The default skin for the Nivo Slider.
Version: 1.2
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
*/


.theme-default .nivoSlider {
	background: url("http://img.storeland.ru/web/upload/assets/images/63/62076/nyro_loading.gif") no-repeat scroll 50% 50% #FFFFFF;
	border-radius: 10px;
	box-shadow: 0 1px 5px 0 #4A4A4A;
	margin-bottom: 50px;
	position: relative;
}

.theme-default .nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
.theme-default .nivoSlider a {
	border:0;
	display:block;
}

.theme-default .nivo-controlNav {
	text-align: center;
	padding: 20px 0;
}
.theme-default .nivo-controlNav a {
	display:inline-block;
	width:22px;
	height:22px;
	background:url({ASSETS_IMAGES_PATH}nyro_bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin: 0 2px;
}
.theme-default .nivo-controlNav a.active {
	background-position:0 -22px;
}

.theme-default .nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url({ASSETS_IMAGES_PATH}nyro_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-default .nivo-controlNav.nivo-thumbs-enabled {
	width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
	width: auto;
	height: auto;
	background: none;
	margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
	display: block;
	width: 120px;
	height: auto;
}

Наверх

#35 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 31 Июль 2012 - 20:50

Вам необходимо задать размер в классе

.nivoSlider {
		position:relative;
		width:100%;
		height:auto;
		overflow: hidden;
}

width например 256px

далее вам необходимы изображения с таким же размером.

Наверх

#36 mi-rulim.ru

Продвинутый пользователь

Пользователи
67 сообщений

ГородМосква

Отправлено 02 Август 2012 - 00:17

Добрый вечер!
Куда надо вставить код


            {% IF index_page %}
              
              <div class="theme-default" style="padding-top:1em;">
                
                <div id="slider" style="display:none;">
                  <img src="http://files.storela...2500/11111.png" alt="" />
                  <a href="http://dev7studios.c...udios.com"><img src="http://files.storela...2501/22222.png" alt="" /></a>
                  <img src="http://files.storela...2502/33333.png" alt="" title="Пример картинки с заголовком" />
                  <img src="http://files.storela...2503/44444.png" alt="" />
                  <img src="http://files.storela...2504/55555.png" alt="" />
                </div>
              </div>
                            
              <script type="text/javascript">
                $(window).load(function()
{
                    $('#slider').show().nivoSlider({controlNav: false});
                });
              </script>
            {% ENDIF %}

Чтобы он отображался на всех страницах сайта!
Поясню, я пытаюсь поставить слайдер на шапку и хочу, чтобы при переходе в раздел каталога, например, слайдер оставался на месте, а не исчезал!

И ещё вопрос:
Как прописать ссылку к картинке? Если это возможно!

Моя ссылка

Наверх

#37 Zen

Новичок

Пользователи
8 сообщений

Отправлено 02 Август 2012 - 16:48

support (31 Май 2012 - 17:31) писал:

Извиняюсь за возникшее недопонимание. Данная задача со слайдером является наиболее простой для любого даже начинающего верстальщика, да и инструкций полно, но некоторые мелочи очевидные ему не всегда могут быть очевидны не столь подготовленному пользователю. Попробую рассказать с максимумом деталей, на примере нашей системы, нашего редактора тем, нашего html редактора шаблонов о том как поставить слайдер на свой сайт Nivo Slider... Итак поехали:

Скачиваем себе на компьютер следующий архив, я его специально подготовил, все до одного лишние файлы удалил:
slider.zip
Распаковываем на своём компьютере.
Заходим в панель управления магазином, через форму авторизации.
Переходим в раздел "Сайт" > "Редактор тем".
Скролим вниз до блока файлов, нажимаем кнопку добавить файлы, появится 5 полей для файлов.
nyro1.jpg
В каждое поле вставляем те файлы, что распаковались из архива, их как раз 5.
nyro2.jpg
Проверяем закачались ли эти файлы, выглядят они в редакторе тем как-то так:
nyro3.jpg

Открываем файл HTML, находим следующий код (у меня это 53 строка, используйте встроенный поиск браузера, Ctrl+f, чтобы не искать глазами.):

  <!-- Скрипты магазина -->
  <script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

После него вставляем вот такой код:

  <!-- Загрузка Jquery галереии Nyro -->
  <link rel="stylesheet" href="{ASSETS_STYLES_PATH}nyro_default.css" type="text/css" media="screen" />
  <script src="{ASSETS_JS_PATH}jquery.nivo.slider.pack.js" type="text/javascript"></script>

Получается как-то так:

  <!-- Скрипты магазина -->
  <script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

  <!-- Загрузка Jquery галереии Nyro -->
  <link rel="stylesheet" href="{ASSETS_STYLES_PATH}nyro_default.css" type="text/css" media="screen" />
  <script src="{ASSETS_JS_PATH}jquery.nivo.slider.pack.js" type="text/javascript"></script>

В браузере выглядит так:
Прикрепленный файл

nyro4.jpg

Нажимаем кнопку "сохранить" сверху.

Далее скролим вниз этого файла (html) находим (естественно встроенным поиском, Ctrl+f, глазами искать не всегда есть гуд.) вот такой не сложный код:

{BODY}

Перед ним! Вставляем вот такой код:

			<!-- Вешаем слайдер на главной -->
			{% IF index_page %}
			  <!-- Обёртка, указывающая стиль темы -->
			  <div class="theme-default" style="padding-top:1em;">
				<!-- Непосредственный код слайдера -->
				<div id="slider">
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/slider.png" alt="" />
				  <a href="http://dev7studios.com"><img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/nemo.png" alt="" /></a>
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/toystory.png" alt="" title="Пример картинки с заголовком" />
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/walle.png" alt="" />
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/cars.png" alt="" />
				</div>
			  </div>
			  
			  <!-- Запуск слайдера -->
			  <script type="text/javascript">
				$(window).load(function() {
					$('#slider').nivoSlider();
				});
			  </script>
			{% ENDIF %}

Получается вот так:

			<!-- Вешаем слайдер на главной -->
			{% IF index_page %}
			  <!-- Обёртка, указывающая стиль темы -->
			  <div class="theme-default" style="padding-top:1em;">
				<!-- Непосредственный код слайдера -->
				<div id="slider">
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/slider.png" alt="" />
				  <a href="http://dev7studios.com"><img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/nemo.png" alt="" /></a>
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/toystory.png" alt="" title="Пример картинки с заголовком" />
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/walle.png" alt="" />
				  <img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/cars.png" alt="" />
				</div>
			  </div>
			  
			  <!-- Запуск слайдера -->
			  <script type="text/javascript">
				$(window).load(function() {
					$('#slider').nivoSlider();
				});
			  </script>
			{% ENDIF %}

			{BODY}

Нажимаем кнопку "сохранить", выглядит это так:
nyro5.jpg
Заходим на главную страницу сайта, нажимаем F5 либо Ctrl+R
Должен получиться вот такой результат:
nyro6.jpg nyro7.jpg nyro8.jpg

Если слайдер не завёлся и не поехал, то видимо что-то сделали не так, напишите об этом постараюсь рассказать ещё детальней о том месте, где возникла ошибка.

Пример живого слайдера (демо)

Огромнейшее спасибо за инструкцию, я сделал все как написано но у меня даже ничего не появилось, пробовал переделывать все заново ничего

Наверх

#38 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 02 Август 2012 - 22:00

Цитата

Чтобы он отображался на всех страницах сайта!

В вашем случае необходимо вставлять слайдер в шаблон "HTML" например перед {BODY}, а так же убрать {% IF index_page %} и {% ENDIF %}

Цитата

Как прописать ссылку к картинке? Если это возможно!

Если я не ошибаюсь, то данный слайдер не поддерживает ссылки.

Цитата

Огромнейшее спасибо за инструкцию, я сделал все как написано но у меня даже ничего не появилось, пробовал переделывать все заново ничего

Сообщите ваш адрес сайта.

Наверх

#39 mi-rulim.ru

Продвинутый пользователь

Пользователи
67 сообщений

ГородМосква

Отправлено 02 Август 2012 - 23:32

Наверх

#40 Zen

Новичок

Пользователи
8 сообщений

Отправлено 03 Август 2012 - 06:00

Vaccina (02 Август 2012 - 22:00) писал:

В вашем случае необходимо вставлять слайдер в шаблон "HTML" например перед {BODY}, а так же убрать {% IF index_page %} и {% ENDIF %}

Если я не ошибаюсь, то данный слайдер не поддерживает ссылки.

Сообщите ваш адрес сайта.

здравствуйте вот мой сайт http://optgroup.storeland.ru