Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.12.2018, 19:05
Кандидат Javascript-наук
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 116

Почему получаю разный эффект при подгрузке слайдов
Всем привет и с наступающим!

Разрабатываю проект и у меня 2 вопроса по поводу слайдера в первом экране где при клике на стрелки или надписи происходит смена слайдера с заменой товара и всех надписей:

1) Почему на некоторых (но, не всех) девайсах разный эффект при смене слайда при подгрузке картинок (в одном плавно появляется, а во втором резко) и что можно с этим сделать?
Видео

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

Код:
jQuery.noConflict();
jQuery(document).ready(function($) {
    $('.header-slider').slick({
        adaptiveHeight: true,
        prevArrow: '<div class="prev"></div>',
        nextArrow: '<div class="next"></div>',
        fade: true,
        speed: 900,
        cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
      });
    $('#slider-info-arrow-1').on('click', function() {
      if($('.slick-current').find('img').attr('alt')=="Шуфанский ключ") {  	
	    $(this).removeClass('silver-key-img').addClass('silver-key-img-hover');
	    $('#slider-info-arrow-2').removeClass('shufansky-key-img-hover').addClass('shufansky-key-img');
	    $('.href').attr( "data-target", '#modal-natural-water').text("Природная вода");
	    $('.href-mobile').attr( "data-target", '#modal-natural-water').text("Природная вода");
	    $('.order-water').attr("href", "shop/?add-to-cart=209");
	    $('.order-water').attr("data-product_id", "209");
	    $('.product-text-mobile').text("Серебряный ключ 19 л");
	    $('.product-img-wrapper-mobile').find('.wp-post-image').attr('src','wp-content/themes/silverkey/img/img-silver-key.jpg');
        $('.header-slider').slick('slickGoTo', 0, true);
      }
	});
	$('#slider-info-arrow-2').on('click', function() {
      if($('.slick-current').find('img').attr('alt')=="Серебряный ключ") {
	  	$(this).removeClass('shufansky-key-img').addClass('shufansky-key-img-hover');
	    $('#slider-info-arrow-1').removeClass('silver-key-img-hover').addClass('silver-key-img');
	    $('.href').attr( "data-target", '#modal-flint-water').text("Кремниевая вода");
	    $('.href-mobile').attr( "data-target", '#modal-flint-water').text("Кремниевая вода");
		$('.order-water').attr("href", "shop/?add-to-cart=155");
		$('.order-water').attr("data-product_id", "155");
		$('.product-text-mobile').text("Шуфанский ключ 19 л");
		$('.product-img-wrapper-mobile').find('.wp-post-image').attr('src','wp-content/themes/silverkey/img/img-shufansky-key.jpg');
        $('.header-slider').slick('slickGoTo', 1, true);
      }
	});
	$('.prev.slick-arrow').on('click', function(event) {
		event.preventDefault();
		if($('.href').attr( "data-target")=="#modal-flint-water") {
			$('#slider-info-arrow-1').removeClass('silver-key-img').addClass('silver-key-img-hover');
			$('#slider-info-arrow-2').removeClass('shufansky-key-img-hover').addClass('shufansky-key-img');
			$('.href').attr( "data-target", '#modal-natural-water').text("Природная вода");
			$('.href-mobile').attr( "data-target", '#modal-natural-water').text("Природная вода");
			$('.order-water').attr("href", "shop/?add-to-cart=209");
			$('.order-water').attr("data-product_id", "209");
			$('.product-text-mobile').text("Серебряный ключ 19 л");
			$('.product-img-wrapper-mobile').find('.wp-post-image').attr('src','wp-content/themes/silverkey/img/img-silver-key.jpg');
			$('.header-slider').slick('slickGoTo', 0, true);
		}
		else {
	  		$('#slider-info-arrow-2').removeClass('shufansky-key-img').addClass('shufansky-key-img-hover');
	    	$('#slider-info-arrow-1').removeClass('silver-key-img-hover').addClass('silver-key-img');			
			$('.href').attr( "data-target", '#modal-flint-water').text("Кремниевая вода");
			$('.href-mobile').attr( "data-target", '#modal-flint-water').text("Кремниевая вода");
			$('.order-water').attr("href", "shop/?add-to-cart=155");
			$('.order-water').attr("data-product_id", "155");
			$('.product-text-mobile').text("Шуфанский ключ 19 л");
			$('.product-img-wrapper-mobile').find('.wp-post-image').attr('src','wp-content/themes/silverkey/img/img-shufansky-key.jpg');
			$('.header-slider').slick('slickGoTo', 1, true);
		}
	});
	$('.next.slick-arrow').on('click', function(event) {
		event.preventDefault()
		if($('.href').attr( "data-target")=="#modal-flint-water") {
			$('#slider-info-arrow-1').removeClass('silver-key-img').addClass('silver-key-img-hover');
			$('#slider-info-arrow-2').removeClass('shufansky-key-img-hover').addClass('shufansky-key-img');
			$('.href').attr( "data-target", '#modal-natural-water').text("Природная вода");
			$('.href-mobile').attr( "data-target", '#modal-natural-water').text("Природная вода");
			$('.order-water').attr("href", "shop/?add-to-cart=209");
			$('.order-water').attr("data-product_id", "209");
			$('.product-text-mobile').text("Серебряный ключ 19 л");
			$('.product-img-wrapper-mobile').find('.wp-post-image').attr('src','wp-content/themes/silverkey/img/img-silver-key.jpg');
			$('.header-slider').slick('slickGoTo', 0, true);
		}
		else {
	  		$('#slider-info-arrow-2').removeClass('shufansky-key-img').addClass('shufansky-key-img-hover');
	    	$('#slider-info-arrow-1').removeClass('silver-key-img-hover').addClass('silver-key-img');			
			$('.href').attr( "data-target", '#modal-flint-water').text("Кремниевая вода");
			$('.href-mobile').attr( "data-target", '#modal-flint-water').text("Кремниевая вода");
			$('.order-water').attr("href", "shop/?add-to-cart=155");
			$('.order-water').attr("data-product_id", "155");
			$('.product-text-mobile').text("Шуфанский ключ 19 л");
			$('.product-img-wrapper-mobile').find('.wp-post-image').attr('src','wp-content/themes/silverkey/img/img-shufansky-key.jpg');
			$('.header-slider').slick('slickGoTo', 1, true);
		}
	});


Не претендую на то, что это лучшее решение, но здесь есть пару нюансов, поясню некоторые, чтобы было понятно для чего так делаю: прозрачные картинки с ховер эффектом и насколько я понял перерыв гору инфы - на сегодня нет кроссбраузерного решения тени вокруг прозрачного объекта, поэтому обхожусь заменами изображений вместо css стилей.

Картинки подгружаю заранее таким образом:
body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
    content:url(img/bottle-shufansky-key.png) url(img/bottle-silver-key.png);
}

Последний раз редактировалось giwuf, 29.12.2018 в 21:11.
Ответить с цитированием
  #2 (permalink)  
Старый 29.12.2018, 19:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,556

giwuf,
может обычный tabs вместо slider-а?
Ответить с цитированием
  #3 (permalink)  
Старый 29.12.2018, 20:05
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,161

И

if($('.href').attr( "data-target")=="#modal-flint-water") ...
//вот так
if($('.href').data("target")=="#modal-flint-water")
//дважды получать объект тоже не стоит
$('.order-water').attr({"href": "shop/?add-to-cart=209", "data-product_id": "209"}); //кстати, что других значений как кроме 209 не может быть?


А вообще повторяется практически одно и тоже, наверное лучше определить параметры по условию, затем получить объекты и установить их.
Ответить с цитированием
  #4 (permalink)  
Старый 29.12.2018, 21:17
Кандидат Javascript-наук
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 116

Сообщение от рони
giwuf,
может обычный tabs вместо slider-а?
рони, у меня не получилось - там же 2 стрелки и 2 надписи переключалки, которые ведут себя по-разному. И это решило бы указанную проблему?
Совсем забыл сайт указать - здесь

laimas,
а как это сможет решить мои 2 вопроса? Ради чего затея?
Цитата:
А вообще повторяется практически одно и тоже, наверное лучше определить параметры по условию, затем получить объекты и установить их.
Ответить с цитированием
  #5 (permalink)  
Старый 29.12.2018, 22:08
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,161

Сообщение от giwuf
а как это сможет решить мои 2 вопроса?
Мне некогда анализировать что и почему у вас не работает, я просто вижу, что много пишется одного и того же - вызываются одни и те же объекты, одни и те же параметры изменяются в условиях, разница только в значениях. Так зачем же повторять вызовы объектов, если выгоднее в условиях определить только значения параметров, а их установку производить вне условий.

Правда и глядя на значения параметров тоже не понять ничего, это что галерея для двух имеющихся в магазине товаров с id 155 и 209, других товаров нет?
Ответить с цитированием
  #6 (permalink)  
Старый 29.12.2018, 22:15
Кандидат Javascript-наук
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 116

Сообщение от laimas
Правда и глядя на значения параметров тоже не понять ничего, это что галерея для двух имеющихся в магазине товаров с id 155 и 209, других товаров нет?
laimas
а я разве писал, что у меня что-то не работает? - я писал про баги в эффектах, причем не на любом девайсе - вот и ищу причину. есть, но в слайдере выводятся только 2 самых основных на которых сделан акцент -разве это странно?

Последний раз редактировалось giwuf, 29.12.2018 в 22:18.
Ответить с цитированием
  #7 (permalink)  
Старый 30.12.2018, 06:15
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,161

Сообщение от giwuf
я писал про баги в эффектах
Если есть аритмия сердечная, то нельзя сказать, что в организме все работает.

Сообщение от giwuf
есть, но в слайдере выводятся только 2 самых основных на которых сделан акцент -разве это странно?
Нет, странного ничего нет, странное в подходе - а что будет, если акцентов будет более двух и нужно будет больше картинок показывать? Вместо того чтобы прогонять код клиентский через РНР вывод ради подстановки в него id и других характеристик объекта, а тем более писать код ручками для N объектов, монотонно практически дублируя одно и тоже, нужно делать это через конфигурацию и РНР обработчик. Те объекты, что "акцентированы" выводятся на страницу со всеми необходимыми характеристиками, которые клиентский сценарий будет получать у них, то есть у текущего/смежных/родителя и т.п. объектов, работая анонимно с ключами/именами. И кода на клиенте будет гораздо меньше, и он не будет таким как у вас трудным для восприятия, и не перевариваемым.

Впрочем дело хозяйское, я же не заставляю, я лишь заметил.
Ответить с цитированием
  #8 (permalink)  
Старый 31.12.2018, 00:17
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 614

Цитата:
насколько я понял перерыв гору инфы - на сегодня нет кроссбраузерного решения тени вокруг прозрачного объекта
Кроссбраузерное решение – CSS-фильтры, а именно функция drop-shadow. https://caniuse.com/#search=filter

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

Пример, передающий суть без точного копирования.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<style>
		
@font-face {
	font-family: Circe;
	src: url("https://cors-anywhere.herokuapp.com/http://key.alexunyr.beget.tech/wp-content/themes/silverkey/fonts/Circe-Regular.woff");
}
	
.water-delivery {
	display: flex;
	flex-flow: wrap;
	color: white;
	font: 1em Circe;
	background:
		url(http://key.alexunyr.beget.tech/wp-content/themes/silverkey/img/header-bg.jpg)
		center / cover
		#56d7fc
	;
	text-shadow: 0 .1em .1em rgba(0, 0, 0, 0.3);
}
		
.water-delivery h1 {
	font-size: 2em;
}
		
.water-delivery p {
	font-size: 1em;
}
		
.water-delivery > section {
	text-align: center;
	flex: 1;
}
		
.water-delivery > section button[data-key] {
	width: 20em;
	height: 0;
	padding: 10em 0 0 0;
	color: transparent;
	border: 0;
	transition: 300ms;
	background:
		no-repeat
		center / contain
}
		
.water-delivery > section button[data-key]:hover {
	filter: drop-shadow(0 0 1em #009af7);
}
		
.water-delivery figure {
	position: relative
}
		
.water-delivery > section:last-child img {
	max-width: 100%;
	opacity: 0;
	transition: 500ms;
	will-change: opacity;
}

.water-delivery .slick-arrow {
	align-self: center;
	width: 2em;
	height: 2em;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 2em;
	border-radius: 100%;
	border: none;
	background: #009af7;
	color: white;
	margin: .25em;
}

.water-delivery .slick-arrow.right {
	order: 1;
	align-self: center;
}
		
.water-delivery > section:last-child img:not(:last-of-type) {
	position: absolute;
}

	</style>
</head>
<body>
	<section class="water-delivery">
		<button class="slick-arrow left">&larr;</button>
		<button class="slick-arrow right">&rarr;</button>
		<section>
			<h1>Доставка воды</h1>
			<p><strong>Природная вода</strong> из скважины<br>прямо с месторождения</p>
			<div>
				<button data-key="silver">Серебрянный ключ</button>
				<button data-key="shufansky">Шуфанский ключ</button>
			</div>
		</section>
		<section>
			<figure>
				<img class="img-fluid" src="http://key.alexunyr.beget.tech/wp-content/themes/silverkey/img/bottle-silver-key.png" alt="Серебряный ключ">
				<img class="img-fluid" src="http://key.alexunyr.beget.tech/wp-content/themes/silverkey/img/bottle-shufansky-key.png" alt="Шуфанский ключ">
			</figure>
		</section>
	</section>
	<script>
		
		const keys = ["silver", "shufansky"];
		
		document.head.appendChild((style => {
			style.textContent = keys.map(key => `
				.water-delivery > section button[data-key="${key}"] {
					background-image:
						url(http://key.alexunyr.beget.tech/wp-content/themes/silverkey/img/${key}-key-slider.png)
				}

				.water-delivery[data-key="${key}"] > section:last-child img[src*="${key}-key"] {
					opacity: 1;
				}

				.water-delivery[data-key="${key}"] > section button[data-key="${key}"] {
					filter: drop-shadow(0 0 1em #009af7) drop-shadow(0 0 1em white);
				}
			`).join("\n\n");
			return style;
		})(document.createElement("style")));
		
		document.addEventListener("click", ({ target }) => {
			if(!target.matches(
				`${keys.map(k => `[data-key="${k}"]`).join(", ")}, .slick-arrow`
			)) return;
			
			const root = target.closest(".water-delivery");
			const key = target.dataset.key;
			const index = keys.indexOf(key);
			root.dataset.key = key;
			
			for(const arrow of root.querySelectorAll(".slick-arrow")) {
				arrow.dataset.key = keys[
					(keys.length + (
						arrow.classList.contains("left") ? -1 : 1
					) + index) % keys.length
				];
			}
		});
		
		for(const e of document.querySelectorAll(`[data-key="${keys[0]}"]`))
			e.click();
		
	</script>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 02.01.2019, 14:46
Кандидат Javascript-наук
Отправить личное сообщение для giwuf Посмотреть профиль Найти все сообщения от giwuf
 
Регистрация: 16.05.2017
Сообщений: 116

Сообщение от Malleys
Кроссбраузерное решение – CSS-фильтры, а именно функция drop-shadow. https://caniuse.com/#search=filter
Malleys, супер! Не знаю насколько это правда, но даже в эмуляции ie8 работает, хотя caniuse в это не верит)
На всякий случай, лучше дополнительно использовать вебкиты для лучшей совместимости
-webkit-filter

Сообщение от laimas
Впрочем дело хозяйское, я же не заставляю, я лишь заметил.
laimas спасибо за ваше наблюдение, похоже, что вы правы, но я пока не разобрался, как это можно сделать правильно.

Всех с наступившим!!
Ответить с цитированием
  #10 (permalink)  
Старый 02.01.2019, 15:51
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,161

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

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

Галерея подключает необходимое либо через html структуру ею же определяемую, либо через определяемые ею атрибуты у элементов, либо через объект указываемый при инициализации. Пусть база хранит некие товары имеющие оценки, на основании которых серверный сценарий согласно условиям галереи выводит их на страницу для нее. В атрибуты элементов можно поместить необходимое и для пользовательского сценария. Не надо прогонять JS скрипт через РНР вывод для чтобы подставлять в JS скрипт конкретные id, тексты и т.п., это плохо. А тем более плохо, если это делается руками, ибо при смене объектов или их добавлении, придется править клиентский скрипт.

Если по условию определяются некие значение для вывода или атрибутов элементов, то наверное выгоднее определить значения, а потом описать вывод, установку атрибутов. Здесь удобнее либо тернарный оператор, либо описание значений в массиве/объекте, индексом для выборки в котором будет служить результат условия преобразованный в число. То есть:

var cond = $('.href').data("target")=="#modal-flint-water", //или  +($('.href').data("target")=="#modal-flint-water") для индекса
    opt1 = cond ? val1 : val2,
    opt2 = cond ? val1 : val2,
    .......
//используем
$('.order-water').attr({href: opt1, oth: opt2, ...});
.....

Последний раз редактировалось laimas, 02.01.2019 в 17:09.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Эффект переворачивания картинки при наведении Tchort Элементы интерфейса 0 30.10.2011 13:47
Эффект при прокрутке страницы deNSe_01 Events/DOM/Window 2 19.08.2011 22:53
Почему Div не успевает за мышкой при быстром перемещии? PAMAC Общие вопросы Javascript 7 31.01.2011 13:32
Увеличение части изображения при наведении, эффект лупы. Simpleplan Общие вопросы Javascript 3 13.12.2010 22:27
Почему в Opera исчезает курсор при нажатии клавиши Esc ? Маэстро Opera, Safari и др. 3 23.11.2010 16:31