

Nivo Slider
#21
Отправлено 22 Июнь 2012 - 11:56
#24
Отправлено 02 Июль 2012 - 13:35
#25
Отправлено 02 Июль 2012 - 23:35
#26
Отправлено 19 Июль 2012 - 14:35
#27
Отправлено 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
Отправлено 26 Июль 2012 - 18:48
#29
Отправлено 26 Июль 2012 - 21:40
#30
Отправлено 27 Июль 2012 - 09:12
Vaccina (26 Июль 2012 - 21:40) писал:
#31
Отправлено 27 Июль 2012 - 20:19
#32
Отправлено 30 Июль 2012 - 10:28
support (31 Май 2012 - 17:31) писал:
- Скачиваем себе на компьютер следующий архив, я его специально подготовил, все до одного лишние файлы удалил:
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
Если слайдер не завёлся и не поехал, то видимо что-то сделали не так, напишите об этом постараюсь рассказать ещё детальней о том месте, где возникла ошибка.
Пример живого слайдера (демо)
Добрый день! Помогите со слайдером

Вот сайт Моя ссылка
Пытаюсь установить на шапку, появились вопрсы и вылезло несколько проблем:
1. Какого размера, лучше делать изображения и размер слайдера(самого окна) меняется только здесь?
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
Если я меняю процент, то при просмотре выдаёт 100% , а потом уменьшается(
2.На картинке из мультфильма "вверх" (дедушка с собачкой) слайдер останавливается и уже не крутится, даже с помощью стрелок! Как это исправить?
3 В FF слайдер при перемотке уменьшается до точки и опять появляется! Прилагаю скрин, в момент превращения в точку))))Описала, как смогла)))
#33
Отправлено 30 Июль 2012 - 22:40
Так же размеры изображения должны быть такие же как и размер слайдера - иначе возможны ошибки отображения. Вероятно все ваши проблемы именно с этим и связаны.
#34
Отправлено 31 Июль 2012 - 09:50
Vaccina (30 Июль 2012 - 22:40) писал:
Так же размеры изображения должны быть такие же как и размер слайдера - иначе возможны ошибки отображения. Вероятно все ваши проблемы именно с этим и связаны.
Добрый день!
Вы не подскажите, где конкретно найти эти размеры слайдера, в с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
Отправлено 31 Июль 2012 - 20:50
.nivoSlider { position:relative; width:100%; height:auto; overflow: hidden; }
width например 256px
далее вам необходимы изображения с таким же размером.
#36
Отправлено 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
Отправлено 02 Август 2012 - 16:48
support (31 Май 2012 - 17:31) писал:
- Скачиваем себе на компьютер следующий архив, я его специально подготовил, все до одного лишние файлы удалил:
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
Отправлено 02 Август 2012 - 22:00
Цитата
В вашем случае необходимо вставлять слайдер в шаблон "HTML" например перед {BODY}, а так же убрать {% IF index_page %} и {% ENDIF %}
Цитата
Если я не ошибаюсь, то данный слайдер не поддерживает ссылки.
Цитата
Сообщите ваш адрес сайта.
#39
Отправлено 02 Август 2012 - 23:32
#40
Отправлено 03 Август 2012 - 06:00
Vaccina (02 Август 2012 - 22:00) писал:
Если я не ошибаюсь, то данный слайдер не поддерживает ссылки.
Сообщите ваш адрес сайта.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных