Перейти к содержимому


Nivo Slider

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

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 216

#101 frolstep

frolstep

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

  • Пользователи
  • PipPipPipPip
  • 224 сообщений
  • ГородМск

Отправлено 24 Январь 2013 - 20:15

Просмотр сообщенияVaccina (24 Январь 2013 - 01:40) писал:

Пожалуйста, сообщите подробнее размеры чего вы хотите изменить. Если вы хотите изменить размер слайдера, то для этого достаточно будет изменить размер самих слайдов(изображений).
Делал слайд по типу, который предложили в этой теме
Картинки изначально были ужасно огромные, поменял их на свои с необходимым размером для меня.
В итоге размер не поменялся, картинки растянулись.

#102 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 24 Январь 2013 - 20:23

Можете указать фиксированные размеры у слайдера.
Например. В файл стилей слайдера.
Добавить:
.theme-default {
width:400px;/*ширина*/
height:100px;/*высота*/

#103 frolstep

frolstep

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

  • Пользователи
  • PipPipPipPip
  • 224 сообщений
  • ГородМск

Отправлено 24 Январь 2013 - 20:54

Просмотр сообщенияKoderhan (24 Январь 2013 - 20:23) писал:

Можете указать фиксированные размеры у слайдера.
Например. В файл стилей слайдера.
Добавить:
.theme-default {
width:400px;/*ширина*/
height:100px;/*высота*/
Спасибо Огромное!

Я прошу прошение за вопрос, где прописать вешение слайда. чтобы он был в колонке главной странице...см. приложение.
Сайты походу не мой конек.Изображение

#104 Vaccina

Vaccina

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

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

Отправлено 25 Январь 2013 - 01:14

Вы можете вставить код слайдера в шаблон "Страница" в блок

<div class="text fnt12n">
		<div class="htmlDataBlock">
		  {PAGE_CONTENT}
		</div>
	  </div>

а именно перед или после {PAGE_CONTENT}, предварительно обвернув код слайдера в условие вида

{%IF index_page%}
код слайдера
{%ENDIF%}

#105 frolstep

frolstep

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

  • Пользователи
  • PipPipPipPip
  • 224 сообщений
  • ГородМск

Отправлено 25 Январь 2013 - 11:12

Просмотр сообщенияVaccina (25 Январь 2013 - 01:14) писал:

Вы можете вставить код слайдера в шаблон "Страница" в блок

<div class="text fnt12n">
	 <div class="htmlDataBlock">
		 {PAGE_CONTENT}
	 </div>
	 </div>

а именно перед или после {PAGE_CONTENT}, предварительно обвернув код слайдера в условие вида

{%IF index_page%}
код слайдера
{%ENDIF%}
Спасибо получилось.
Глаза все сломал, так толком ненашел, где цифры убрать, которые показывают номер картинки слайдера

#106 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 25 Январь 2013 - 11:47

В самый конец файла "Страница".
Добавить код:

<script>
$('.nivo-controlNav').css('display','none');
</script>

#107 frolstep

frolstep

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

  • Пользователи
  • PipPipPipPip
  • 224 сообщений
  • ГородМск

Отправлено 25 Январь 2013 - 13:13

Просмотр сообщенияKoderhan (25 Январь 2013 - 11:47) писал:

В самый конец файла "Страница".
Добавить код:

<script>
$('.nivo-controlNav').css('display','none');
</script>
не помогло (

с этим слайдером теперь сайт долго грузить, и картинки сперва в столбик идут по все страницы и через некоторое время только собираються в слайдер. Что это?

#108 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 25 Январь 2013 - 13:33

Код JavaScript выполняется только после загрузки всей страницы.
Поэтому картинки сначала отображаются как есть.
Можете попробовать заменить код:
<script type="text/javascript">
							 $(window).load(function() {
									 $('#slider').nivoSlider();
							 });
						 </script>
Код:
<script type="text/javascript">

									 $('#slider').nivoSlider();

						 </script>
В этом случае, скрипт не будет дожидаться полной загрузки сайта.
Но тогда может возникнуть такая ситуация, что скрипт обратится к не загруженному элементу и прервет свое выполнение.

#109 frolstep

frolstep

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

  • Пользователи
  • PipPipPipPip
  • 224 сообщений
  • ГородМск

Отправлено 25 Январь 2013 - 16:46

Просмотр сообщенияKoderhan (25 Январь 2013 - 13:33) писал:

Код JavaScript выполняется только после загрузки всей страницы.
Поэтому картинки сначала отображаются как есть.
Можете попробовать заменить код:
<script type="text/javascript">
							 $(window).load(function() {
									 $('#slider').nivoSlider();
							 });
						 </script>
Код:
<script type="text/javascript">

									 $('#slider').nivoSlider();

						 </script>
В этом случае, скрипт не будет дожидаться полной загрузки сайта.
Но тогда может возникнуть такая ситуация, что скрипт обратится к не загруженному элементу и прервет свое выполнение.
Ну пока работает все гуд
Спасибо Вам Огромнейшее!!! И безграничного терпения Вам )))!

#110 dizel1990

dizel1990

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

  • Пользователи
  • PipPipPip
  • 121 сообщений

Отправлено 06 Февраль 2013 - 23:14

Здравствуйте. Возможно ли на слайдоре сделать следущее: чтобы при на жатии на картинку переходил на другой раздел или сайт. То есть куда нужно прописать ссылку? можно получить подробную инструкцию?

#111 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 07 Февраль 2013 - 10:26

Это можно сделать достаточно просто.
Вот документация по этому поводу http://htmlbook.ru/c...achestve-ssylki
Пример кода слайдера.Адреса вам нужно будет вставить самостоятельно.
<!-- Nyvo слайдер который отображается на главной -->
{% IF index_page %}
  <!-- Обёртка, указывающая стиль темы -->
  <div class="theme-default" style="padding:1em;display:none;">
	<!-- Непосредственный код слайдера -->
	<div id="slider">
	  <a href="адрес страницы"><img src="http://storeland.ru/img/faq/questions/nyvo_slider/slider.jpg" alt="" /></a>
	  <a href="адрес страницы"><img src="/img/faq/questions/nyvo_slider/nemo.jpg" alt="" /></a>
	  <a href="адрес страницы"><img src="http://storeland.ru/img/faq/questions/nyvo_slider/toystory.jpg" alt="" title="Пример картинки с заголовком" /></a>
	  <a href="адрес страницы"><img src="http://storeland.ru/img/faq/questions/nyvo_slider/walle.jpg" alt="" /></a>
	  <a href="адрес страницы"><img src="http://storeland.ru/img/faq/questions/nyvo_slider/cars.jpg" alt="" /></a>
	</div>
  </div>
 
  <!-- Запуск слайдера -->
  <script type="text/javascript">
	$(window).load(function() {
		$('#slider').nivoSlider().parent().show();
	});
  </script>
  {% ENDIF %}

#112 dizel1990

dizel1990

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

  • Пользователи
  • PipPipPip
  • 121 сообщений

Отправлено 07 Февраль 2013 - 20:32

Спасибо, помогли.

Просмотр сообщенияKoderhan (07 Февраль 2013 - 10:26) писал:

Это можно сделать достаточно просто.
Вот документация по этому поводу http://htmlbook.ru/c...achestve-ssylki
Пример кода слайдера.Адреса вам нужно будет вставить самостоятельно.
<!-- Nyvo слайдер который отображается на главной -->
{% IF index_page %}
<!-- Обёртка, указывающая стиль темы -->
<div class="theme-default" style="padding:1em;display:none;">
<!-- Непосредственный код слайдера -->
<div id="slider">
	 <a href="адрес страницы"><img src="http://storeland.ru/img/faq/questions/nyvo_slider/slider.jpg" alt="" /></a>
	 <a href="адрес страницы"><img src="/img/faq/questions/nyvo_slider/nemo.jpg" alt="" /></a>
	 <a href="адрес страницы"><img src="http://storeland.ru/img/faq/questions/nyvo_slider/toystory.jpg" alt="" title="Пример картинки с заголовком" /></a>
	 <a href="адрес страницы"><img src="http://storeland.ru/img/faq/questions/nyvo_slider/walle.jpg" alt="" /></a>
	 <a href="адрес страницы"><img src="http://storeland.ru/img/faq/questions/nyvo_slider/cars.jpg" alt="" /></a>
</div>
</div>

<!-- Запуск слайдера -->
<script type="text/javascript">
$(window).load(function() {
	 $('#slider').nivoSlider().parent().show();
});
</script>
{% ENDIF %}

#113 dizel1990

dizel1990

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

  • Пользователи
  • PipPipPip
  • 121 сообщений

Отправлено 26 Февраль 2013 - 23:51

Здравствуйте. Извините за глупой вопрос, не могу найти. Что нужно прописать и где, чтобы поднять слайдер, растянуть влево, вправо. И ещё, чтобы просто передвинуть слайдер влево, вправо.
Спасибо.

#114 Vaccina

Vaccina

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

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

Отправлено 27 Февраль 2013 - 04:10

Пожалуйста, сообщите номер вашего аккаунта или адрес вашего сайта, где находиться установленный слайдер.

#115 dizel1990

dizel1990

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

  • Пользователи
  • PipPipPip
  • 121 сообщений

Отправлено 27 Февраль 2013 - 09:15

Просмотр сообщенияVaccina (27 Февраль 2013 - 04:10) писал:

Пожалуйста, сообщите номер вашего аккаунта или адрес вашего сайта, где находиться установленный слайдер.

Сайт macinbox.ru

#116 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 27 Февраль 2013 - 09:31

Просмотр сообщенияdizel1990 (27 Февраль 2013 - 09:15) писал:

Сайт macinbox.ru

Изменить ширину и длину вы можете в этом коде:
#slider {
width: 618px; /*ширина*/
height: 246px; /*длина*/
background: url(loading0.gif) no-repeat 50% 50%;
}
в файле main.csstemplate.

А передвигать можете так:
Найдите код в шаблоне HTML или на Главной странице (Сайт>Страницы>Главная>Описание>Редактор html кода):
<div class="theme-default" style="padding: 1em;">
и замените на:
<div class="theme-default" style="padding-top: 10px; /*отступ сверху*/ padding-left: 20px;/*отступ слева*/">

#117 dizel1990

dizel1990

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

  • Пользователи
  • PipPipPip
  • 121 сообщений

Отправлено 27 Февраль 2013 - 11:55

Просмотр сообщенияmiyako (27 Февраль 2013 - 09:31) писал:

Изменить ширину и длину вы можете в этом коде:
#slider {
width: 618px; /*ширина*/
height: 246px; /*длина*/
background: url(loading0.gif) no-repeat 50% 50%;
}
в файле main.csstemplate.

А передвигать можете так:
Найдите код в шаблоне HTML или на Главной странице (Сайт>Страницы>Главная>Описание>Редактор html кода):
<div class="theme-default" style="padding: 1em;">
и замените на:
<div class="theme-default" style="padding-top: 10px; /*отступ сверху*/ padding-left: 20px;/*отступ слева*/">
А как поднять слайдер вверх? Как я понимаю оступ сверху, это слайдер вниз опускать.

#118 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 27 Февраль 2013 - 12:01

Просмотр сообщенияdizel1990 (27 Февраль 2013 - 11:55) писал:

А как поднять слайдер вверх? Как я понимаю оступ сверху, это слайдер вниз опускать.
Можно добавить еще.
padding-bottom: 10px;
это отступ снизу

#119 dizel1990

dizel1990

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

  • Пользователи
  • PipPipPip
  • 121 сообщений

Отправлено 27 Февраль 2013 - 13:42

А варианты есть ещё поднять слайдер вверх. Я хочу просто закрыть белое пространство сверху и с боков. Возможно это сделать?
macinbox.ru

Просмотр сообщенияKoderhan (27 Февраль 2013 - 12:01) писал:

Можно добавить еще.
padding-bottom: 10px;
это отступ снизу
А варианты есть ещё поднять слайдер вверх. Я хочу просто закрыть белое пространство сверху и с боков. Возможно это сделать?
macinbox.ru

#120 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 27 Февраль 2013 - 13:48

Просмотр сообщенияdizel1990 (27 Февраль 2013 - 13:42) писал:

А варианты есть ещё поднять слайдер вверх. Я хочу просто закрыть белое пространство сверху и с боков. Возможно это сделать?
macinbox.ru

А варианты есть ещё поднять слайдер вверх. Я хочу просто закрыть белое пространство сверху и с боков. Возможно это сделать?
macinbox.ru

Найдите строчку:
<div class="theme-default" style="padding-left: 0px;">
и замените на:
<div class="theme-default" style="padding-left: 0px;margin-left: -22px;margin-top: -29px;">

Обратно в Другое


Количество пользователей, читающих эту тему: 1

0 пользователей, 1 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Вопросы общие для всех шаблонов
  5. → Другое
  6. Privacy Policy