Отключен JavaScript

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

0

101 Вопрос Про Слайдер На Главной

Автор Veterok, 08 апр. 2016 11:24

Вперед

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

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

#1 Veterok

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

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

Отправлено 08 Апрель 2016 - 11:24

Добрый день!
у меня шаблон сияние, необходимо на главную поставить простенький слайдер со сменой 3-4 картинок, перечитала несколько тем, но везде разбираются вопросы как что -либо добавить/изменить\подвинуть в уже установленном слайдере,
а мне бы его для начала просто установить

помогите пожалуйста,с чего начать?

Наверх

#2 RedHead

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

Модераторы
1 052 сообщений

Отправлено 08 Апрель 2016 - 11:56

Veterok (08 Апрель 2016 - 11:24) писал:

Добрый день!
у меня шаблон сияние, необходимо на главную поставить простенький слайдер со сменой 3-4 картинок, перечитала несколько тем, но везде разбираются вопросы как что -либо добавить/изменить\подвинуть в уже установленном слайдере,
а мне бы его для начала просто установить

помогите пожалуйста,с чего начать?

Здравствуйте. Все необходимые скрипты для вывода слайдера, у Вас уже подключены. Осталось только дописать код. И добавить недостающие файлы. В шаблоне html найдите строку:

{BODY}

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

<!-- Nyvo слайдер который отображается на главной -->
{% IF index_page %}
<!-- Обёртка, указывающая стиль темы -->
<div class="theme-default" style="padding: 1em; display: none;">
<!-- Непосредственный код слайдера -->
<div id="slider">
<a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg" alt="" /></a>
<a href="#"><img src="{ASSETS_IMAGES_PATH}slide3.jpg" alt="" /></a>
<a href="#"><img src="{ASSETS_IMAGES_PATH}slide4.jpg" alt="" /></a>
<a href="#"><img src="{ASSETS_IMAGES_PATH}slide4.jpg" alt="" /></a>
</div> </div>

<!-- Запуск слайдера -->
<script type="text/javascript">// <![CDATA[

$(window).load(function() {

$('#slider').nivoSlider().parent().show(); });

// ]]></script>

{% ENDIF %}

Скачиваем прикрепленный архив, распаковываем на пк. В редакторе шаблонов, с помощью кнопки "Добавить файлы", загрузите все файлы. Чтобы изменить слайды на свои, необходимо подготовить картинки такого же размера и назвать их так же, как прикрепленные (slide1.jpg, slide2.jpg, slide3.jpg, slide4.jpg). И загрузить уже свои файлы.

Слайдер отобразится.

nyvo_slider (2).zip 560,71К 69 Количество загрузок:

Наверх

#3 Veterok

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

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

Отправлено 08 Апрель 2016 - 13:09

спасибо, буду устанавливать - проверять, попутно пара вопросов:

1. количество картинок в слайдере жестко закреплено? т.е. 4 и ни больше ни меньше?
2. при клике на картинку - происходит отсылка на определенный раздел и страницу?

Наверх

#4 RedHead

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

Модераторы
1 052 сообщений

Отправлено 08 Апрель 2016 - 13:16

Veterok (08 Апрель 2016 - 13:09) писал:

спасибо, буду устанавливать - проверять, попутно пара вопросов:

1. количество картинок в слайдере жестко закреплено? т.е. 4 и ни больше ни меньше?
2. при клике на картинку - происходит отсылка на определенный раздел и страницу?

1) В шаблоне html найдите строку:

<a href="#"><img src="{ASSETS_IMAGES_PATH}slide4.jpg" alt="" /></a>

добавьте после нее еще столько таких же строк, сколько дополнительных слайдов нужно, заменив название изображения (slide4.jpg) на необходимое

2) В этих же строках, которые отвечают за добавление слайда, есть место для вставки ссылки на какую-либо страницу:

<a href="#"><img src="{ASSETS_IMAGES_PATH}slide4.jpg" alt="" /></a>

Замените во всех слайдах # на ссылки на необходимые страницы. Если # не заменять, то при клике на слайд, ничего не произойдет.

Наверх

#5 Veterok

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

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

Отправлено 08 Апрель 2016 - 21:04

выполнила все по пунктам, слайдер появился, но огромный на весь экран и выше всех элементов ( не нашла как прикрепить скриншот),
восстановила шаблоны по бэкапу

Наверх

#6 Vaccina

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

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

Отправлено 09 Апрель 2016 - 04:37

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

Наверх

#7 Veterok

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

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

Отправлено 09 Апрель 2016 - 04:55

Veterok (08 Апрель 2016 - 21:04) писал:

выполнила все по пунктам, слайдер появился, но огромный на весь экран и выше всех элементов ( не нашла как прикрепить скриншот),
восстановила шаблоны по бэкапу

Vaccina (09 Апрель 2016 - 04:37) писал:

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

вот, такая красота

см. картинку

все изменения я производила вчера 08 апреля, и после некорректной работы восстановила бэк ап так же от 8 апреля, который был сделан до всех изменений по слайдеру

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

Наверх

#8 Vaccina

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

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

Отправлено 09 Апрель 2016 - 04:58

Скорее всего поняла в чем проблема, вы вставляете основной код слайдера перед:

<body>

а необходимо перед:

{BODY}

Наверх

#9 Gerti

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

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

Отправлено 21 Июль 2016 - 13:05

Добрый день, не могу понять ставлю слайдер выдает ошибку и не виден слайдер помогите понять в чем причина Аккаунт SL-390809

Наверх

#10 Firefly

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

Модераторы
3 810 сообщений

Отправлено 21 Июль 2016 - 16:35

Gerti (21 Июль 2016 - 13:05) писал:

Добрый день, не могу понять ставлю слайдер выдает ошибку и не виден слайдер помогите понять в чем причина Аккаунт SL-390809

Здравствуйте.
У Вас была не полностью выполнена инструкция из раздела FAQ.
Добавил Вам необходимые файлы и код слайдера переместил в редакторе шаблонов в шаблон Страница перед контентом.
Проверьте, пожалуйста.

Наверх

#11 Gerti

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

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

Отправлено 21 Июль 2016 - 16:49

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

Немного поясню
1) В самом верху требуется полоска черного цвета на ней город Москва написано(вернее там нужно будет установить выбор города, и на этой же полоске в правом углу корзина
2) Телефон перенести в право
3) и если можно расширить слайдер по ширине
Ну и убрать приветствие) Там еще будет много всего но помогите начать хотя бы с этого)

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

Наверх

#12 Vaccina

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

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

Отправлено 22 Июль 2016 - 02:24

1. Уточните пожалуйста, что должно происходить при выборе города?
2. В main.css найдите:

#contactInfo {
	position: absolute;
	font-size: 1.1em;
	top: 10px;
	left: 170px;
}

замените на:

#contactInfo {
	position: absolute;
	font-size: 1.1em;
	top: 10px;
	right: 0;
}

3. В main.css найдите:

.content_catalog {
	padding-top: 80px;
	vertical-align: top;
}

замените на:

.content_catalog {
	padding-top: 80px;
	vertical-align: top;
	display: none;
}

l

далее найдите:

.content_body {
	vertical-align: top;
}

замените на:

.content_body {
	vertical-align: top;
	width: 960px;
}

4. В шаблоне HTML найдите:

{% IF PAGE_NAME %}
  <div class="page-headline">
	<h1>{PAGE_NAME}</h1>
  </div>
{% ENDIF %}

замените на:

{% IF PAGE_NAME %}
{% IFNOT index_page %}
  <div class="page-headline">
	<h1>{PAGE_NAME}</h1>
  </div>
{% ENDIF %}
{% ENDIF %}

Наверх

#13 Gerti

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

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

Отправлено 22 Июль 2016 - 10:49

Добрый день, спасибо за помощь)
Пока просто город указать в левом углу на черной полосе а в правом уголке должна расположиться корзина.
А еще вот, поиск перенести на серый прямоугольник в шапке . И если можно так сделать чтобы сам прямоугольник поиска был обведен красным прямоугольником. см. скрин2
Вообще идея такова как на скрин 3 вот это хотелось бы воплотить помогите пожалуйста) :rolleyes:

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

Наверх

#14 Gerti

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

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

Отправлено 22 Июль 2016 - 22:24

Vaccina (22 Июль 2016 - 02:24) писал:

4. В шаблоне HTML найдите:

{% IF PAGE_NAME %}
<div class="page-headline">
<h1>{PAGE_NAME}</h1>
</div>
{% ENDIF %}

замените на:

{% IF PAGE_NAME %}
{% IFNOT index_page %}
<div class="page-headline">
<h1>{PAGE_NAME}</h1>
</div>
{% ENDIF %}
{% ENDIF %}

И еще забыла ...
Вот ни как не могу найти этого нет ни где (

Наверх

#15 Vaccina

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

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

Отправлено 23 Июль 2016 - 03:51

Gerti (22 Июль 2016 - 10:49) писал:

Добрый день, спасибо за помощь)
Пока просто город указать в левом углу на черной полосе а в правом уголке должна расположиться корзина.
А еще вот, поиск перенести на серый прямоугольник в шапке . И если можно так сделать чтобы сам прямоугольник поиска был обведен красным прямоугольником. см. скрин2
Вообще идея такова как на скрин 3 вот это хотелось бы воплотить помогите пожалуйста) :rolleyes:

В шаблоне HTML найдите и удалите:

<!-- Корзина -->
	  <div id="cartInfo">
		<a href="{CART_URL}">в корзине товаров на</a>:
		<span id="cartSum">
		  {% IF cart_count_empty %}
			<span>0</span> {CURRENCY_NAME}
		  {% ELSE %}
			{% FOR cart_sum %}
			  <span class="num">{cart_sum.NOW_WITH_DISCOUNT | money_format}</span><br />
			{% ENDFOR %}
		  {% ENDIF %}
		</span>
	  </div>
	  <!-- end Корзина -->

далее найдите:

<div class="container" id="header">

после него вставьте:

<div class="top_panel">
<!-- Геотаргетинг -->
<div class="your_city">
	<script type="text/javascript">
	  window.onload = function () {
		jQuery("#user-city").text(ymaps.geolocation.city);
	  }
	</script>
	<script src="http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
	<span>Ваш город: </span><span id="user-city"></span>
  </div>
  <!-- end Геотаргетинг -->
 
<!-- Корзина -->
	  <div id="cartInfo">
		<a href="{CART_URL}">в корзине товаров на</a>:
		<span id="cartSum">
		  {% IF cart_count_empty %}
			<span>0</span> {CURRENCY_NAME}
		  {% ELSE %}
			{% FOR cart_sum %}
			  <span class="num">{cart_sum.NOW_WITH_DISCOUNT | money_format}</span><br />
			{% ENDFOR %}
		  {% ENDIF %}
		</span>
	  </div>
	  <!-- end Корзина -->
</div>

В main.css найдите:

.container {
	position: relative;
	width: 960px;
	margin: 0px auto;
}

после него пропишите:

#header {
	width: 100%;
}
.top_panel {
	background: #000;
	padding: 15px;
	height: 18px;
}
.top_panel .your_city {
	color: #fff;
	float: left;
}

далее найдите:

#cartInfo {
	position: absolute;
	font-size: 13px;
	top: 54px;
	left: 380px;
	white-space: nowrap;
	overflow: hidden;
	height: 20px;
	width: 340px;
}

замените на:

#cartInfo {
	font-size: 14px;
	float: right;
	white-space: nowrap;
	overflow: hidden;
	height: 20px;
	color: #fff;
}

далее найдите:

#cartInfo a {
	color: #000;
	text-transform: uppercase;
	padding: 5px 0px 5px 45px;
}

замените на:

#cartInfo a {
	color: #fff;
	text-transform: uppercase;
}

В шаблоне HTML найдите:

<input type="image" class="submit alignright" src="{ASSETS_IMAGES_PATH}search_but.gif?design=shine" />

замените на:

<input type="image" class="submit alignright" src="{ASSETS_IMAGES_PATH}search_but.png?design=shine" />

и в раздел редактор шаблонов загрузите прикрепленный к этому посту файл(иконку поиска)

В main.css найдите:

.b_page {background: url({ASSETS_IMAGES_PATH}header_page.png?design=shine) no-repeat center top;}

замените на:

.b_page {background: url({ASSETS_IMAGES_PATH}header_page.png?design=shine) no-repeat center 30px;}

далее найдите:

#contactInfo {
	position: absolute;
	font-size: 1.1em;
	top: 10px;
	right: 0;
}

замените на:

#contactInfo {
	position: absolute;
	font-size: 18px;
	top: 70px;
	right: 0;
	line-height: 24px;
}

далее найдите:

#search {
	height: 35px;
	float: right;
	padding-top: 45px;
	padding-right: 15px;
	width: 245px;
}

замените на:

#search {
	height: 28px;
	width: 245px;
	position: absolute;
	top: 105px;
	right: 20%;
	background: #fff;
	border: 2px solid red;
}

далее найдите:

#search .submit {
	cursor: pointer;
	height: 28px;
	width: 28px;
}

замените на:

#search .submit {
	cursor: pointer;
	height: 28px;
	width: 28px;
	background: red;
}

В шабоне HTML после:

<div class="clr"></div>
		  </div>
		</form>
	  </div>
	  <!-- end Поиск -->

вставьте:

<div class="catalog"><div class="catalog">
  <div>Каталог товаров
	<div class="hide_block">
	<ul>
					{%IFNOT catalog_empty %}
					  {% FOR catalog %}
						{% IFNOT catalog.HIDE %}
						  <li {% IF catalog.LEVEL>0%}style="display:none;"{% ENDIF %}>
							<a href="{catalog.URL}">{catalog.NAME}</a>
						  </li>
						{% ENDIF %}
					  {% ENDFOR %}
					{% ENDIF %}
					</ul>
  </div>
  </div>  
</div>

В main.css добавьте:

.catalog {
	position: absolute;
	top: 105px;
	right: 50%;
}
.catalog > div {
	background: #fff;
	padding: 10px;
	position: relative;
	width: 100%;
}
.catalog .hide_block {
	position: absolute;
	top: 35px;
	left: 0;
	background: #fff;
	border: 1px solid #ccc;
	width: 100%;
	display: none;
	z-index: 99;
}
.catalog:hover .hide_block {
	display: block;
}
.catalog .hide_block li a {
	display: block;
	padding: 10px;
	color: #000;
}

Gerti (22 Июль 2016 - 22:24) писал:

И еще забыла ...
Вот ни как не могу найти этого нет ни где (

Простите, перепутала, искать данный код необходимо в шаблоне Страница

Наверх

#16 Gerti

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

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

Отправлено 23 Июль 2016 - 10:48

Спасибо огромное человеческое :wub:

Единственно вот по поводу иконки для скачивания, что то я как то ее совсем не найду((
И еще как бы расширить по длине строку поиска, чтобы был чуть меньше серой области

Наверх

#17 Gerti

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

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

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

.catalog {
position: absolute;
top: 105px;
right: 50%;
}
.catalog > div {
background: #fff;
padding: 10px;
position: relative;
width: 100%;
}
.catalog .hide_block {
position: absolute;
top: 35px;
left: 0;
background: #fff;
border: 1px solid #ccc;
width: 100%;
display: none;
z-index: 99;
}
.catalog:hover .hide_block {
display: block;
}
.catalog .hide_block li a {
display: block;
padding: 10px;
color: #000;
}
После последних действий все уехало вверх... как подправить?
И еще почему то под страницей которая уехала в верх на шапке еще и каталог отображается... тоже как то так вылез там
И сразу вопрос про кнопки как на скрине 3 очень желаю сделать такие же)) Только кнопка КАТАЛОГ ФАБРИКИ салатного цвета как в логотипе, а остальные такие как на скрине... Возможно ли это реализовать?

Наверх

#18 Gerti

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

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

Отправлено 25 Июль 2016 - 11:04

Все еще жду ответа)

Наверх

#19 Stasya

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

Модератоpы
4 007 сообщений

Отправлено 25 Июль 2016 - 11:29

Gerti (23 Июль 2016 - 11:02) писал:

.catalog {
position: absolute;
top: 105px;
right: 50%;
}
.catalog > div {
background: #fff;
padding: 10px;
position: relative;
width: 100%;
}
.catalog .hide_block {
position: absolute;
top: 35px;
left: 0;
background: #fff;
border: 1px solid #ccc;
width: 100%;
display: none;
z-index: 99;
}
.catalog:hover .hide_block {
display: block;
}
.catalog .hide_block li a {
display: block;
padding: 10px;
color: #000;
}
После последних действий все уехало вверх... как подправить?
И еще почему то под страницей которая уехала в верх на шапке еще и каталог отображается... тоже как то так вылез там
И сразу вопрос про кнопки как на скрине 3 очень желаю сделать такие же)) Только кнопка КАТАЛОГ ФАБРИКИ салатного цвета как в логотипе, а остальные такие как на скрине... Возможно ли это реализовать?

В шаблоне HTML найдите блок

<div class="catalog"><div class="catalog">
<div>Каталог товаров
	 <div class="hide_block">
	 <ul>
									 {%IFNOT catalog_empty %}
										 {% FOR catalog %}
											 {% IFNOT catalog.HIDE %}
												 <li {% IF catalog.LEVEL>0%}style="display:none;"{% ENDIF %}>
													 <a href="{catalog.URL}">{catalog.NAME}</a>
												 </li>
											 {% ENDIF %}
										 {% ENDFOR %}
									 {% ENDIF %}
									 </ul>
</div>
</div>
</div>

и замените его на

<div class="catalog">
<div>Каталог товаров
	 <div class="hide_block">
	 <ul>
									 {%IFNOT catalog_empty %}
										 {% FOR catalog %}
											 {% IFNOT catalog.HIDE %}
												 <li {% IF catalog.LEVEL>0%}style="display:none;"{% ENDIF %}>
													 <a href="{catalog.URL}">{catalog.NAME}</a>
												 </li>
											 {% ENDIF %}
										 {% ENDFOR %}
									 {% ENDIF %}
									 </ul>
</div>
</div>
</div>

Не могли бы Вы уточнить как именно Вы хотите расширить поле Поиска? По высоте или по длине?

Что касаемо иконки, то видимо модератор забыла прикрепить ее к сообщению. Уточните, пожалуйста, как должна выглядеть иконка? Как на присланном скриншоте?
Вы можете загрузить любую иконку с именем search_but.png в разделе Сайт-> Редактор шаблонов-> в левой колонке Добавить файл .

Наверх

#20 Gerti

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

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

Отправлено 25 Июль 2016 - 11:39

Добрый день, вот все как на скрине 3, по длинне поиск расширить) и иконка такая же)) И объединить красным прямоугольником поиск и каталог на сером фоне. В общем все как на скрине
И далее по поводу кнопок все в силе вопрос. И еще на кнопке КАТАЛОГ ФАБРИКИ при нажатии не выходит каталог а хотелось бы чтобы открывался см скрин.