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


Как Сделать Слайдер Кликабельным?


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

#1 ProninT

ProninT

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

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

Отправлено 06 Июль 2015 - 18:34

Здравствуйте нужно сделать чтобы слайдер был кликабельным и ссылки вели на новую вкладку. babo4ek.net

#2 Firefly

Firefly

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

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

Отправлено 06 Июль 2015 - 19:06

Просмотр сообщенияProninT (06 Июль 2015 - 18:34) писал:

Здравствуйте нужно сделать чтобы слайдер был кликабельным и ссылки вели на новую вкладку. babo4ek.net

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
	  <!-- Jssor Slider Слайдер Начало -->
	  {% IF index_page %}
	  <div id="slideshow" class="wrap">
		<div id="slider">
		  <!-- Slides Container -->
		  <div u="slides" class="slides_container">
			<div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" />
			</div>
			<div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" />
			</div>
			<div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" />
			</div>
			<div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" />
			</div>
			 <div>
			  <img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" />
			</div>
		  </div>
		</div>
	  </div>
	  {% ENDIF %}
	  <!-- Jssor Slider Слайдер Конец -->

Замените на:
	  <!-- Jssor Slider Слайдер Начало -->
	  {% IF index_page %}
	  <div id="slideshow" class="wrap">
		<div id="slider">
		  <!-- Slides Container -->
		  <div u="slides" class="slides_container">
			<div>
			  <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" /></a>
			</div>
			<div>
			  <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /></a>
			</div>
			<div>
			  <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /></a>
			</div>
			<div>
			  <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /></a>
			</div>
			 <div>
			  <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" /></a>
			</div>
		  </div>
		</div>
	  </div>
	  {% ENDIF %}
	  <!-- Jssor Slider Слайдер Конец -->

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

#3 ProninT

ProninT

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

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

Отправлено 06 Июль 2015 - 19:28

Просмотр сообщенияFirefly (06 Июль 2015 - 19:06) писал:

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
	 <!-- Jssor Slider Слайдер Начало -->
	 {% IF index_page %}
	 <div id="slideshow" class="wrap">
	 <div id="slider">
		 <!-- Slides Container -->
		 <div u="slides" class="slides_container">
		 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" />
		 </div>
		 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" />
		 </div>
		 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" />
		 </div>
		 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" />
		 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" />
		 </div>
		 </div>
	 </div>
	 </div>
	 {% ENDIF %}
	 <!-- Jssor Slider Слайдер Конец -->

Замените на:
	 <!-- Jssor Slider Слайдер Начало -->
	 {% IF index_page %}
	 <div id="slideshow" class="wrap">
	 <div id="slider">
		 <!-- Slides Container -->
		 <div u="slides" class="slides_container">
		 <div>
			 <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" /></a>
		 </div>
		 <div>
			 <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /></a>
		 </div>
		 <div>
			 <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /></a>
		 </div>
		 <div>
			 <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /></a>
		 </div>
			 <div>
			 <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" /></a>
		 </div>
		 </div>
	 </div>
	 </div>
	 {% ENDIF %}
	 <!-- Jssor Slider Слайдер Конец -->

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

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

#4 Cupuyc

Cupuyc

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

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

Отправлено 06 Июль 2015 - 19:56

Просмотр сообщенияProninT (06 Июль 2015 - 19:28) писал:

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

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

#5 ProninT

ProninT

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

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

Отправлено 07 Июль 2015 - 12:41

Просмотр сообщенияCupuyc (06 Июль 2015 - 19:56) писал:

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

ну и хорошо, как сделать!?

#6 ProninT

ProninT

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

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

Отправлено 08 Июль 2015 - 15:11

Просмотр сообщенияCupuyc (06 Июль 2015 - 19:56) писал:

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

АУУУУ!!!! Помогите!!!!

#7 yan_komlev

yan_komlev

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

  • Пользователи
  • PipPip
  • 12 сообщений
  • ГородСанкт-Петербург

Отправлено 08 Июль 2015 - 15:41

Просмотр сообщенияProninT (08 Июль 2015 - 15:11) писал:

АУУУУ!!!! Помогите!!!!

По умолчанию в шаблоне не прописаны ссылки на слайдере. Вы потом их сами добавляли?

#8 MikDark

MikDark

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

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

Отправлено 08 Июль 2015 - 18:37

Просмотр сообщенияProninT (08 Июль 2015 - 15:11) писал:

АУУУУ!!!! Помогите!!!!

Стрелки Вам установили.

#9 ProninT

ProninT

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

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

Отправлено 20 Июль 2015 - 03:33

Просмотр сообщенияMikDark (08 Июль 2015 - 18:37) писал:

Стрелки Вам установили.

Спасибо! заметил проблему что люди мимо них часто промахиваются, как сделать, чтобы площадь нажатия была больше, а можно и сами стрелки

#10 RayLi

RayLi

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

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

Отправлено 20 Июль 2015 - 15:21

Просмотр сообщенияProninT (20 Июль 2015 - 03:33) писал:

Спасибо! заметил проблему что люди мимо них часто промахиваются, как сделать, чтобы площадь нажатия была больше, а можно и сами стрелки

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

.jssora21r {
  background-position: -63px -33px;
}

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

.jssora21r {
  background-position: -60px 230px !important;
  margin-top: -255px;
  height: 550px !important;
}


После этого в том же шаблоне найдите следующий код:

.jssora21l {
  background-position: -3px -33px;
}

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

.jssora21l {
  background-position: -5px 230px !important;
  margin-top: -255px;
  height: 550px !important;
}


#11 ProninT

ProninT

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

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

Отправлено 20 Июль 2015 - 15:33

Просмотр сообщенияRayLi (20 Июль 2015 - 15:21) писал:

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

.jssora21r {
background-position: -63px -33px;
}

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

.jssora21r {
background-position: -60px 230px !important;
margin-top: -255px;
height: 550px !important;
}


После этого в том же шаблоне найдите следующий код:

.jssora21l {
background-position: -3px -33px;
}

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

.jssora21l {
background-position: -5px 230px !important;
margin-top: -255px;
height: 550px !important;
}


Спасибо, получилось то, что хотел!!!!!

#12 Гельд

Гельд

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

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

Отправлено 04 Август 2015 - 12:22

В итоге, подскажите как убрать этот "свайп", что бы были просто стрелочки и ссылки на каждый слайд соответственно. Заранее спасибо!

#13 Firefly

Firefly

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

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

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

Просмотр сообщенияГельд (04 Август 2015 - 12:22) писал:

В итоге, подскажите как убрать этот "свайп", что бы были просто стрелочки и ссылки на каждый слайд соответственно. Заранее спасибо!

Здравствуйте.
Уточните, пожалуйста, Ваш номер аккаунта.

#14 orionych

orionych

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

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

Отправлено 05 Август 2015 - 03:57

Здравствуйте, по первой инструкции убрала свайп и сделала, чтобы каждый слайд вёл на товар, верните мне тоже стрелки, пожалуйста.

#15 Vaccina

Vaccina

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

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

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

<!-- Jssor Slider Слайдер Начало -->
		  {% IF index_page %}
		  <div id="slideshow" class="wrap">
				<div id="slider">
				  <!-- Slides Container -->
				  <div u="slides" class="slides_container">
						<div>
						  <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" /></a>
						</div>
						<div>
						  <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /></a>
						</div>
						<div>
						  <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /></a>
						</div>
						<div>
						  <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /></a>
						</div>
						 <div>
						  <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" /></a>
						</div>
				  </div>
				</div>
		  </div>
		  {% ENDIF %}
		  <!-- Jssor Slider Слайдер Конец -->

замените на:
<!-- Jssor Slider Слайдер Начало -->
		  {% IF index_page %}
		  <div id="slideshow" class="wrap">
				<div id="slider">
				  <!-- Slides Container -->
				  <div u="slides" class="slides_container">
						<div>
						  <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" /></a>
						</div>
						<div>
						  <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /></a>
						</div>
						<div>
						  <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /></a>
						</div>
						<div>
						  <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /></a>
						</div>
						 <div>
						  <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide5.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 Слайдер Конец -->


#16 orionych

orionych

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

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

Отправлено 05 Август 2015 - 04:29

Просмотр сообщенияVaccina (05 Август 2015 - 04:14) писал:

<!-- Jssor Slider Слайдер Начало -->
		 {% IF index_page %}
		 <div id="slideshow" class="wrap">
			 <div id="slider">
				 <!-- Slides Container -->
				 <div u="slides" class="slides_container">
					 <div>
						 <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" /></a>
					 </div>
					 <div>
						 <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /></a>
					 </div>
					 <div>
						 <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /></a>
					 </div>
					 <div>
						 <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /></a>
					 </div>
						 <div>
						 <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" /></a>
					 </div>
				 </div>
			 </div>
		 </div>
		 {% ENDIF %}
		 <!-- Jssor Slider Слайдер Конец -->

замените на:
<!-- Jssor Slider Слайдер Начало -->
		 {% IF index_page %}
		 <div id="slideshow" class="wrap">
			 <div id="slider">
				 <!-- Slides Container -->
				 <div u="slides" class="slides_container">
					 <div>
						 <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" /></a>
					 </div>
					 <div>
						 <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /></a>
					 </div>
					 <div>
						 <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /></a>
					 </div>
					 <div>
						 <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /></a>
					 </div>
						 <div>
						 <a href="ссылка" target="_blank"><img u="image" src="{ASSETS_IMAGES_PATH}slide5.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 Слайдер Конец -->

Спасибо, получилось!

#17 Гельд

Гельд

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

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

Отправлено 05 Август 2015 - 09:11

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

Здравствуйте.
Уточните, пожалуйста, Ваш номер аккаунта.

349820

#18 User

User

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

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

Отправлено 05 Август 2015 - 11:39

И мне подскажите, пожалуйста. Все прописал, как тут написано, но стрелок нет. У меня изначально в  main.css не было классов jssora21l и jssora21r , вероятно и стрелок тоже нет?

#19 Vaccina

Vaccina

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

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

Отправлено 06 Август 2015 - 04:01

Просмотр сообщенияUser (05 Август 2015 - 11:39) писал:

И мне подскажите, пожалуйста. Все прописал, как тут написано, но стрелок нет. У меня изначально в  main.css не было классов jssora21l и jssora21r , вероятно и стрелок тоже нет?

В main.css найдите:
/* Стрелки слайдера*/
.jssora21l {
background-position: -5px 230px !important;
margin-top: -255px;
height: 550px !important;
}
.jssora21r {
background-position: -60px 230px !important;
margin-top: -255px;
height: 550px !important;
}

замените на:
.jssora21l, .jssora21r, .jssora21ldn, .jssora21rdn {position: absolute;cursor: pointer;display: block;background: url('{ASSETS_IMAGES_PATH}a21.png?design=azure') center center no-repeat;overflow: hidden;}
.jssora21l { background-position: -3px -33px; }
.jssora21r { background-position: -63px -33px; }
.jssora21l:hover { background-position: -123px -33px; }
.jssora21r:hover { background-position: -183px -33px; }
.jssora21ldn { background-position: -243px -33px; }
.jssora21rdn { background-position: -303px -33px; }

Просмотр сообщенияГельд (05 Август 2015 - 09:11) писал:

349820

В сообщении выше #15 указан готовый код с ссылками, со стрелками и без свайпа

#20 User

User

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

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

Отправлено 06 Август 2015 - 10:57

Спасибо, нет только картинки a21.png в {ASSETS_IMAGES_PATH}, где бы ее взять?




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

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