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


Сделать Слайдер


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

#1 Dizelde

Dizelde

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

  • Пользователи
  • PipPipPip
  • 64 сообщений
  • ГородТюмень

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

Доброго времени суток! Подскажите, как создать слайдер на пространстве рядом с логотипом, предварительно переместив поиск по сайту наверх к корзине.

#2 Taisia

Taisia

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

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

Отправлено 02 Август 2013 - 18:06

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

http://storeland.ru/...<br /> <br /> после того как ваш слайдер будет работать в том месте где вы его установили по инструкции можно будет перенести его в шапку в то место куда вы хотите.

#3 Dizelde

Dizelde

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

  • Пользователи
  • PipPipPip
  • 64 сообщений
  • ГородТюмень

Отправлено 04 Август 2013 - 09:26

Спасибо. а как перенести поиск наверх, чтобы он был слева от корзины?

#4 miyako

miyako

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

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

Отправлено 04 Август 2013 - 11:14

Просмотр сообщенияDizelde (04 Август 2013 - 09:26) писал:

Спасибо. а как перенести поиск наверх, чтобы он был слева от корзины?

Найдите код в шаблоне HTML -
<!-- Форма поиска -->
	  <form action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;" role="search">
		<div>
		  <input class="search" name="q" type="search"  value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" />
		  <input title="Искать" type="submit" value="Поиск" />
		</div>
	  </form> 
	  <!-- /Форма поиска -->
и удалите его

Далее найдите код -
<!-- /Блок навигации -->
	
	  <!-- Корзина -->
и замените на -
<!-- /Блок навигации -->
		 <!-- Форма поиска -->
	  <form action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;" role="search">
		<div>
		  <input class="search" name="q" type="search"  value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" />
		  <input title="Искать" type="submit" value="Поиск" />
		</div>
	  </form> 
	  <!-- /Форма поиска -->
	  <!-- Корзина -->

Найдите код в style.css -
form[role="search"] {
position: absolute;
right: 2em;
top: 2.5em;
}
и замените на -
form[role="search"] {
position: absolute;
right: 15.5em;
top: 0.5em;
}


#5 Dizelde

Dizelde

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

  • Пользователи
  • PipPipPip
  • 64 сообщений
  • ГородТюмень

Отправлено 04 Август 2013 - 15:03

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

#6 miyako

miyako

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

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

Отправлено 05 Август 2013 - 08:26

Просмотр сообщенияDizelde (04 Август 2013 - 15:03) писал:

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

Найдите код слайдера в шаблоне HTML -
	<!-- Nyvo слайдер который отображается на главной -->
{% IF index_page %}
  <!-- Обёртка, указывающая стиль темы -->
  <div class="theme-default" style="padding:1em;display:none;">
	<!-- Непосредственный код слайдера -->
	<div id="slider">
	  <img src="http://design.contanti.ru/Louis-Vuitton-Summer-2013-Collection-2_1350x700.jpg?7866" />
	 
	  <img src="http://design.contanti.ru/wallpapers_28980_1350x700.jpg?7932" />
	  <img src="http://design.contanti.ru/CoMe_Louis_Vuitton_Handbags_Icons_OTH_1350x700.jpg?8249"
	  <img src="http://storeland.ru/img/faq/questions/nyvo_slider/" alt="" />
	</div>
  </div>
 
  <!-- Запуск слайдера -->
  <script type="text/javascript">
	$(window).load(function() {
		$('#slider').nivoSlider().parent().show();
	});
  </script>
  {% ENDIF %}
и удалите

Далее найдите код -
<!-- Если в тарифном плане подключен модуль сравнения товаров -->
	  {% IF TARIFF_FEATURE_GOODS_COMPARE %}
		<!-- Если не выключен модуль сравнения товаров, то покажем этот блок -->
		{% IFNOT SETTINGS_COMPARE_DISABLE %}
		  {% IF COMPARE_GOODS_COUNT=0 %}
			<div class="compare hide">
			  <p>Ваш список сравнения пуст</p>
			</div>
		  {% ELSE %}
			<div class="compare">
			  <p><a href="{COMPARE_URL}">Сейчас на сравнении {COMPARE_GOODS_COUNT} товар{COMPARE_GOODS_COUNT | gen_word_end("","а","ов")}.</a></p>
			</div>
		  {% ENDIF %}
		{% ENDIF %}
	  {% ENDIF %}
	  <!-- END Если в тарифном плане подключен модуль фильтров по товарам -->
	</header>
и перед этим кодом вставьте -
	<!-- Nyvo слайдер который отображается на главной -->
{% IF index_page %}
  <!-- Обёртка, указывающая стиль темы -->
  <div class="theme-default" style="padding:1em;display:none;">
	<!-- Непосредственный код слайдера -->
	<div id="slider">
	  <img src="http://design.contanti.ru/Louis-Vuitton-Summer-2013-Collection-2_1350x700.jpg?7866" />
	 
	  <img src="http://design.contanti.ru/wallpapers_28980_1350x700.jpg?7932" />
	  <img src="http://design.contanti.ru/CoMe_Louis_Vuitton_Handbags_Icons_OTH_1350x700.jpg?8249"
	  <img src="http://storeland.ru/img/faq/questions/nyvo_slider/" alt="" />
	</div>
  </div>
 
  <!-- Запуск слайдера -->
  <script type="text/javascript">
	$(window).load(function() {
		$('#slider').nivoSlider().parent().show();
	});
  </script>
  {% ENDIF %}

Далее в конец файла nyvo.css добавьте код -
.theme-default{position:relative;}

Уменьшить размеры слайдера можно в nyvo.css в коде -
.nivoSlider {
position: relative;
right: 81px;
width: 1350px; /*ширина*/
height: 700px; /*длина*/
overflow: hidden;
}


#7 Никита

Никита

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

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

Отправлено 14 Октябрь 2013 - 01:42

Подскажите, пожалуйста, как убрать точки навигации под слайдером, я понял, что нужно здесь что-то поменять, но что?))

$('#slider').nivoSlider({
animSpeed: 500,
pauseTime: 8000
}).parent().show();
        });
Аккаунт SL-238895

#8 empty9228

empty9228

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

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

Отправлено 14 Октябрь 2013 - 07:00

Здравствуйте! Найдите у себя в файле nivo.css блок
.theme-default .nivo-controlNav {
text-align: center;
padding: 0px 0;
margin-bottom: -15px;
padding-top: 10px;
}

замените его на
.theme-default .nivo-controlNav {
text-align: center;
padding: 0px 0;
margin-bottom: -15px;
padding-top: 10px;
display: none;
}


#9 Никита

Никита

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

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

Отправлено 14 Октябрь 2013 - 21:33

спасибо!

ещё один вопрос. А можно логотип в левом верхнем углу положить поверх слайдера? или проще его прям в самих фотках слайдера сделать?

#10 Vaccina

Vaccina

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

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

Отправлено 15 Октябрь 2013 - 05:56

Если вы хотите изображение использовать как ватемарк, то лучше все же накладывать такое изображение уже поверх изображения в любом графическом редакторе.

#11 Никита

Никита

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

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

Отправлено 15 Октябрь 2013 - 09:50

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

#12 miyako

miyako

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

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

Отправлено 15 Октябрь 2013 - 12:13

Просмотр сообщенияНикита (15 Октябрь 2013 - 09:50) писал:

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

Найдите код в шаблоне HTML -
<div class="theme-default" style="padding: 1em;">
и замените на  -
<div class="theme-default" style="padding: 1em;">
<img src="путь до изображения" style="position: absolute;z-index: 9999;" />
Укажите путь до изображения

#13 Никита

Никита

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

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

Отправлено 15 Октябрь 2013 - 13:21

сделал, но при загрузке страницы она сначала открывается как на первом изображении, а потом как на втором
может я что-то не так вставил в этот код?

<div class="theme-default" style="padding:1em;display:none;">
  <img src="logo1.png" style="position: absolute;z-index: 9999;" />

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

  • 1.png
  • 2.png


#14 miyako

miyako

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

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

Отправлено 15 Октябрь 2013 - 14:21

Просмотр сообщенияНикита (15 Октябрь 2013 - 13:21) писал:

сделал, но при загрузке страницы она сначала открывается как на первом изображении, а потом как на втором
может я что-то не так вставил в этот код?

<div class="theme-default" style="padding:1em;display:none;">
  <img src="logo1.png" style="position: absolute;z-index: 9999;" />

Вы неверно указали путь до изображения. Если Вы загрузили в раздел Сайт - Редактор шаблонов, то путь нужно указать следующий -
<img src="{ASSETS_IMAGES_PATH}logo1.png" style="position: absolute;z-index: 9999;" />
А если в раздел Сайт - Файлы, тогда путь Вы сможете скопировать, нажав на иконку "бесконечности"

#15 Никита

Никита

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

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

Отправлено 16 Октябрь 2013 - 22:51

Спасибо!

#16 Никита

Никита

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

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

Отправлено 17 Октябрь 2013 - 13:17

Здравствуйте, ещё один вопрос:
У меня теперь 2 логотипа на главной странице отображается, один который стоит перед слайдером, второй со всех остальных страниц. Я разобрался как их поставить один за другим, чтобы этого не было видно, но  если экран уменьшить то они съезжают как на фото. Можно ли это исправить?

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

  • 3.png


#17 empty9228

empty9228

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

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

Отправлено 17 Октябрь 2013 - 13:43

Здравствуйте, да можно это сделать, Вам нужно вашу картинку, которая у вас будет только на главной "обвернуть в условие "
{%IF index_page%} ...  {%ENDIF%}

#18 Никита

Никита

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

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

Отправлено 17 Октябрь 2013 - 13:55

Спасибо! а можно так же номер телефона и время работы сделать? если да, то как?

#19 empty9228

empty9228

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

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

Отправлено 17 Октябрь 2013 - 14:00

Да можно конечно, напишите у себя пожалуйста в профиле номер своего аккаунта, так будет проще, чтоб каждый раз не спрашивать.
Для того что бы провернуть тоже самое с номер телефона и временем работы вам нужно найти в файле HTML эти блоки и тоже "обвернуть" их(только их) в условие {%IF index_page%} ...  {%ENDIF%}

#20 Никита

Никита

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

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

Отправлено 27 Октябрь 2013 - 14:48

спасибо, за ответы! подскажите ещё пожалуйста, не могу найти, где в шаблонах находятся картинка, телефон и время работы. заранее спасибо!




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

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