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


Слайдер

Автор Janna_Brauer, 18 нояб. 2015 11:23

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

#1 Janna_Brauer

Janna_Brauer

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

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

Отправлено 18 Ноябрь 2015 - 11:23

Здравствуйте!
Интересуют такие вопросы:
1. нужен код, чтобы добавить картинки в слайдер (уже загруженные).
2. сделать эти картинки кликабельными.

#2 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 18 Ноябрь 2015 - 11:42

Просмотр сообщенияJanna_Brauer (18 Ноябрь 2015 - 11:23) писал:

Здравствуйте!
Интересуют такие вопросы:
1. нужен код, чтобы добавить картинки в слайдер (уже загруженные).
2. сделать эти картинки кликабельными.

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

	<!-- Jssor Slider Слайдер -->
	{% IF index_page %}
	<div id="slideshow">
	  <div class="preloader"><span class="content-loading"></span></div>
	  <div id="slider">
		<!-- Slides Container -->
		<div u="slides" class="slides_container">
		  <div>
			<a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" /></a>
		  </div>
		  <div>
			<a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" /></a>
		  </div>
		  <div>
			<img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" />
		  </div>
		  <div>
			<img u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" />
		  </div>
		</div>
		<!-- Arrow Left -->
		<span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;" title="Предыдущий слайд"></span>
		<!-- Arrow Right -->
		<span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px" title="Следующий слайд"></span>
	  </div>
	</div>
	{% ENDIF %}
	<!-- /END Jssor Slider Слайдер -->

И в нём. заместо # - вам необходимо установить прямые ссылки, чтобы сделать ваш слайдер кликабельным.
А чтобы сменить изображения в слайдере - вам необходимо либо в бэк-офис вашего интернет-магазина, в разделе Сайт -> Редактор шаблонов , в левом блоке "Изображения" найти файлы slide1.jpg и slide2.jpg , открыть и заменить их на свои.
либо загрузить нужные вам изображения проcто в данный раздел и их имена установить в код слайдера, заместо имён slide1.jpg и slide2.jpg .
Проверьте, пожалуйста.

#3 Janna_Brauer

Janna_Brauer

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

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

Отправлено 18 Ноябрь 2015 - 12:21

Просмотр сообщенияRayLi (18 Ноябрь 2015 - 11:42) писал:

И в нём. заместо # - вам необходимо установить прямые ссылки, чтобы сделать ваш слайдер кликабельным.
Ссылку установила, но баннер не стал кликабельным, появляются четыре стрелки в разные стороны вместо указателя.

#4 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 18 Ноябрь 2015 - 12:41

Просмотр сообщенияJanna_Brauer (18 Ноябрь 2015 - 12:21) писал:

Ссылку установила, но баннер не стал кликабельным, появляются четыре стрелки в разные стороны вместо указателя.

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

#5 Janna_Brauer

Janna_Brauer

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

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

Отправлено 18 Ноябрь 2015 - 13:00

Просмотр сообщенияRayLi (18 Ноябрь 2015 - 12:41) писал:

На данный момент у вас лишь один слайд является кликабельным и он работает совершенно корректно.
Проверьте, пожалуйста.
http://savepic.su/6517818.png
изображение теперь кликабельно, но искажено.

#6 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 18 Ноябрь 2015 - 13:04

Просмотр сообщенияJanna_Brauer (18 Ноябрь 2015 - 13:00) писал:

http://savepic.su/6517818.png
изображение теперь кликабельно, но искажено.

Тогда попробуйте, пожалуйста, сделать следующее:
В шаблоне html найдите данный код:

	<!-- Jssor Slider Слайдер -->
	{% IF index_page %}
	<div id="slideshow">
	  <div class="preloader"><span class="content-loading"></span></div>
	  <div id="slider">
		<!-- Slides Container -->
		<div u="slides" class="slides_container">
		  <div>
			<a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" /></a>
		  </div>
		  <div>
			<a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" /></a>
		  </div>
		<div>
		<div>
			<a href="http://spektr2.storeland.ru/goods/Nastojka-pantovaya-Legendy-Altaya" u="image"><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=summer" /></a>
		  </div>
			<img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" />
		  </div>
		  <div>
			<img u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" />
		  </div>
		</div>
		<!-- Arrow Left -->
		<span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;" title="Предыдущий слайд"></span>
		<!-- Arrow Right -->
		<span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px" title="Следующий слайд"></span>
	  </div>
	</div>
	{% ENDIF %}
	<!-- /END Jssor Slider Слайдер -->

И замените его вот этим вот кодом:

	<!-- Jssor Slider Слайдер -->
	{% IF index_page %}
	<div id="slideshow">
	  <div class="preloader"><span class="content-loading"></span></div>
	  <div id="slider">
		<!-- Slides Container -->
		<div u="slides" class="slides_container">
		  <div>
			<a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" /></a>
		  </div>
		  <div>
			<a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" /></a>
		  </div>
		<div>
		<div>
			<a href="http://spektr2.storeland.ru/goods/Nastojka-pantovaya-Legendy-Altaya" u="image"><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=summer" /></a>
		  </div>
			<img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" />
		  </div>
		  <div>
			<img u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" />
		  </div>
		  <div>
			<img u="image" src="{ASSETS_IMAGES_PATH}slide3.jpg?design=summer" />
		  </div>
		</div>
		<!-- Arrow Left -->
		<span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;" title="Предыдущий слайд"></span>
		<!-- Arrow Right -->
		<span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px" title="Следующий слайд"></span>
	  </div>
	</div>
	{% ENDIF %}
	<!-- /END Jssor Slider Слайдер -->

#7 Janna_Brauer

Janna_Brauer

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

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

Отправлено 18 Ноябрь 2015 - 13:20

Просмотр сообщенияRayLi (18 Ноябрь 2015 - 13:04) писал:

Тогда попробуйте, пожалуйста, сделать следующее:
В шаблоне html найдите данный код:

<!-- Jssor Slider Слайдер -->
{% IF index_page %}
<div id="slideshow">
	 <div class="preloader"><span class="content-loading"></span></div>
	 <div id="slider">
	 <!-- Slides Container -->
	 <div u="slides" class="slides_container">
		 <div>
		 <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" /></a>
		 </div>
		 <div>
		 <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" /></a>
		 </div>
	 <div>
	 <div>
		 <a href="http://spektr2.storeland.ru/goods/Nastojka-pantovaya-Legendy-Altaya" u="image"><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=summer" /></a>
		 </div>
		 <img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" />
		 </div>
		 <div>
		 <img u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" />
		 </div>
	 </div>
	 <!-- Arrow Left -->
	 <span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;" title="Предыдущий слайд"></span>
	 <!-- Arrow Right -->
	 <span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px" title="Следующий слайд"></span>
	 </div>
</div>
{% ENDIF %}
<!-- /END Jssor Slider Слайдер -->

И замените его вот этим вот кодом:

<!-- Jssor Slider Слайдер -->
{% IF index_page %}
<div id="slideshow">
	 <div class="preloader"><span class="content-loading"></span></div>
	 <div id="slider">
	 <!-- Slides Container -->
	 <div u="slides" class="slides_container">
		 <div>
		 <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" /></a>
		 </div>
		 <div>
		 <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" /></a>
		 </div>
	 <div>
	 <div>
		 <a href="http://spektr2.storeland.ru/goods/Nastojka-pantovaya-Legendy-Altaya" u="image"><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=summer" /></a>
		 </div>
		 <img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" />
		 </div>
		 <div>
		 <img u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" />
		 </div>
		 <div>
		 <img u="image" src="{ASSETS_IMAGES_PATH}slide3.jpg?design=summer" />
		 </div>
	 </div>
	 <!-- Arrow Left -->
	 <span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;" title="Предыдущий слайд"></span>
	 <!-- Arrow Right -->
	 <span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px" title="Следующий слайд"></span>
	 </div>
</div>
{% ENDIF %}
<!-- /END Jssor Slider Слайдер -->
Взгляните пожалуйста после изменений. Встало дополнительное изображение и перекос с первого слайда

#8 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 18 Ноябрь 2015 - 13:28

Просмотр сообщенияJanna_Brauer (18 Ноябрь 2015 - 13:20) писал:

Взгляните пожалуйста после изменений. Встало дополнительное изображение и перекос с первого слайда

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

#9 Janna_Brauer

Janna_Brauer

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

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

Отправлено 18 Ноябрь 2015 - 13:36

Открывала с другого компьютера, встает четвертый слайд с перекосом от первого.

#10 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 18 Ноябрь 2015 - 13:59

Просмотр сообщенияJanna_Brauer (18 Ноябрь 2015 - 13:36) писал:

Открывала с другого компьютера, встает четвертый слайд с перекосом от первого.

Тогда сделайте, пожалуйста, следующее:
В шаблоне html найдите данный код:

	<!-- Jssor Slider Слайдер -->
	{% IF index_page %}
	<div id="slideshow">
	  <div class="preloader"><span class="content-loading"></span></div>
	  <div id="slider">
		<!-- Slides Container -->
		<div u="slides" class="slides_container">
		  <div>
			<a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" /></a>
		  </div>
		  <div>
	<!-- Jssor Slider Слайдер -->
	{% IF index_page %}
	<div id="slideshow">
	  <div class="preloader"><span class="content-loading"></span></div>
	  <div id="slider">
		<!-- Slides Container -->
		<div u="slides" class="slides_container">
		  <div>
			<a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" /></a>
		  </div>
		  <div>
			<a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" /></a>
		  </div>
		<div>
		<div>
			<a href="http://spektr2.storeland.ru/goods/Nastojka-pantovaya-Legendy-Altaya" u="image"><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=summer" /></a>
		  </div>

			<img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" />
		  </div>
		  <div>
			<img u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" />
		  </div>
		  <div>
			<img u="image" src="{ASSETS_IMAGES_PATH}slide3.jpg?design=summer" />
		  </div>
		</div>
		<!-- Arrow Left -->
		<span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;" title="Предыдущий слайд"></span>
		<!-- Arrow Right -->
		<span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px" title="Следующий слайд"></span>
	  </div>
	</div>
	{% ENDIF %}
	<!-- /END Jssor Slider Слайдер -->

И замените его вот этим вот кодом:

		  <!-- Slides Container -->
		  <div u="slides" class="slides_container">
			<div>
			  <a href="#"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" /></a>
			</div>
			<div>
			  <a href="#"><img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /></a>
			</div>
			<div>
			  <a href="http://spektr2.storeland.ru/goods/Nastojka-pantovaya-Legendy-Altaya"><img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /></a>
			</div>
		  </div>
		  <!-- Arrow Left -->
		<span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
		</span>
		<!-- Arrow Right -->
		<span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px">
		</span>
		</div>
	  </div>
	  {% ENDIF %}
	  <!-- Jssor Slider Слайдер Конец -->

#11 Janna_Brauer

Janna_Brauer

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

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

Отправлено 19 Ноябрь 2015 - 07:51

Выдается ошибка компиляции шаблона, неверный синтаксис ENDIF на 261 строке.

#12 polosatoff

polosatoff

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

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

Отправлено 16 Декабрь 2015 - 21:33

скажите а как удалить слайдер безболезненно?

удаляю вот это

Цитата

<!-- Jssor Slider Слайдер -->
    {% IF index_page %}
    <div id="slideshow">
      <div class="preloader"><span class="content-loading"></span></div>
      <div id="slider">
        <!-- Slides Container -->
        <div u="slides" class="slides_container">
          <div>
            <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" /></a>
          </div>
          <div>
            <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" /></a>
          </div>
          <div>
            <img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=summer" />
          </div>
          <div>
            <img u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg?design=summer" />
          </div>
        </div>
        <!-- Arrow Left -->
        <span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;" title="Предыдущий слайд"></span>
        <!-- Arrow Right -->
        <span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px" title="Следующий слайд"></span>
      </div>
    </div>
    {% ENDIF %}
    <!-- /END Jssor Slider Слайдер -->

перестает работать кнопка "показать все"

как удалить чтобы все работало?

#13 RedHead

RedHead

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

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

Отправлено 17 Декабрь 2015 - 18:40

Просмотр сообщенияpolosatoff (16 Декабрь 2015 - 21:33) писал:

скажите а как удалить слайдер безболезненно?
удаляю вот это
перестает работать кнопка "показать все"
как удалить чтобы все работало?

Здравствуйте! Вы не указали номер аккаунта.
Попробуйте в конец файла main.css добавить
#slideshow {display:none;}
либо
.slideshow {display:none;}
Если не получится, пришлите номер аккаунта.

#14 polosatoff

polosatoff

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

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

Отправлено 18 Декабрь 2015 - 17:45

Спасибо! Получилось!
Обратно в Главная


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

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

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