jQuery range slider + carousel price
Здравствуйте !
Заранее прошу прощения, за свои познания, по этому и решил обратиться за помощью к вам. Я, только начал изучение библиотеки а мне дали задание, весьма сложное для начинающего... Нужно создать range slider с каруселью изображений товаров, и привязать ползунок к ценам, что бы в диапазоне от 50 до 500 при движение ползунка появлялись соответственные товары отсортированные в зависимости от выбранного диапазона цен. Единственное что пока получилось так это сам ползунок
<script>
jQuery(function(){
jQuery("#range").ionRangeSlider({
type: "double",
grid: true,
min: 0,
max: 500,
from: 200,
to: 300,
step: 100
});
});
</script>
Понимаю, что можно сделать так, при выборе диапазона с текстом цены от 50 до 150, будут видны только элементы у которых цена соответствует этим значениям, но как это сделать, уже ломаю голову не первый день :( Проблема именно в том, что я только начал изучать javascript и попросту знаю всего ничего. Буду очень признателен за любые фрагменты кода, которые будут понятны для человека моего уровня, а так же ссылки и любую информацию которая поможет в обучение. Изображение собственно по ссылке. http://joxi.ru/Q2KLba5f4e1qLA.jpg |
Цитата:
|
Вот пример. У вас скрипт отдает две переменные from и to (диапазон). Его надо отправлять на сервер через AJAX и получать товары, а затем вставлять в слайдер. Так? А если товары типа уже загружены, то перебирать их в цикле и проверять, что если их цена больше from и меньше to, тогда их выводить в слайдер.
Строка 42.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/ion.rangeSlider.css">
<link rel="stylesheet" href="css/ion.rangeSlider.skinFlat.css">
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/ion.rangeSlider.js"></script>
</head>
<body>
<div style="position: relative; padding: 200px;">
<div>
<input type="text" id="range" value="" name="range" />
</div>
</div>
<script>
$(function () {
var $range = $("#range");
$range.ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 50,
max: 500,
from: 100,
to: 300,
type: 'double',
step: 1,
prefix: "$",
grid: true
});
$range.on("change", function () {
var $this = $(this),
from = $this.data("from"),
to = $this.data("to");
/* И здесь нужно сформировать AJAX запрос на сервер. */
});
});
</script>
</body>
</html>
|
Цитата:
Цитата:
Наверное это вы и имели в виду ? Картинки хранятся в медиатеке сайта wordpress. <div class="slick-slide slick-current slick-active" > <span class="content-section"> <img class="alignnone size-full wp-image-254" src="/wp-content/uploads/galery-9.png"> <p>185×210</p> <h5>ORIGINAL LARGE Abstract Painting</h5> <h6>EUR 400</h6> <br> </span> </div> |
Some Way, Это не важно, что у вас карусель. Загвоздка в том, что нужно получить как-то карточки товара. Схема примерно такая: 1. Создаем файл php, что-то вроде shopCard.php. Закрываем его от индексации. В нем пишем: <?php echo ... и отдаем готовый HTML клиенту здесь. 2. К тому коду, который я привел выше, добавляем на 42 строке аякс запрос к php. Что-то вроде этого:
function ajaxGet(){
var request = new XMLHttpRequest();
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
OVL.CARUSEL.innerHTML = request.response;
}
}
request.open('GET', 'shopCard.php');
request.send(from, to);
}
Передаем на сервер в параметрах from и to. А в php уже получаем from и to и отбираем картинки, тесты-описания, цену и т.д. и возвращаем готовый HTML. И вставляем его в карусель легким движением руки). Это просто схема. Попробуйте для начала просто достучаться до сервера, передать ему параметры и получить хоть какой-то ответ. Затем ответ вставьте в карусель. После этого уже можно лучше проработать php. Откуда брать тексты и цены? Где-то в базе лежит, но где? И какова структура у картинок? Или это я чет не понимаю?) P.S. Потом еще нужно будет продумать, как не слать много запросов на сервер, нужно сделать задержку (таймаут) после события изменения бегунка. Иначе будет не очень круто, на каждое микродвижение бегунка будут идти запросы. Другой вариант - отсылать по нажатию на кнопку, после того как будет задан диапазон. |
Цитата:
Мне казалось, что можно как-то намного проще прикрутить ползунок к слайдеру изображений и отображать контент в соответствии с диапазоном. |
Вот самый простой пример, который я смог придумать. Но он не подходит для боевого проекта. Если только для себя или в учебных целях.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пример</title>
</head>
<body>
<div class="owl-carousel"></div>
<button onclick="sort();">Отсортировать</button>
<script>
/* Описываем здесь свои данные (например, ссылки на картинки по ключу цены) */
var imges = {
50: ['imges1', 'imges2', 'imges3','imges4'],
100: ['imges5', 'imges6', 'imges7','imges8'],
250: ['imges9', 'imges10', 'imges11','imges12']
};
// Получаем owl-carousel в переменную
var carous = document.querySelector('.owl-carousel');
/* Это переменные, которые генерирует бегуток - значения ОТ и ДО */
var iFrom = 50;
var iTo = 250;
/* Перебераем данные и выводим в карусель только те, которые соответствуют требованиям from-to */
function sort(){
for(var key in imges){
if(key > iFrom && key < iTo){
for(var k = 0; k < imges[key].length; k++){
carous.innerHTML += '<img src="' + imges[key][k] + '">';
}
}
}
}
</script>
</body>
</html>
|
Цитата:
|
Some Way,
В основном потому, что данные (картинки и цены) прописаны в JS. Строки 13-18. А это значит, что когда в магазин нужно будет добавить новые товары или удалить какие-то из них, то придется изменять вручную и этот JS. То есть не получится так, что добавил товар через админку или изменил цену и все работает, придется еще тут правки вносить. |
Цитата:
Примерно с таким кодом моя карусель показывает слайды <div class="slick-track"> <div calss="slick-slide"> <span class="content-section"> <p><img src="izobrajenie"></p> <p>text small</p> <h5>LARGE text</h5> <h6><span class="mid">EUR 300</span></h6> </span> </div> </div> Но в таком случае придется редактировать не сам JS а слайд (добавлять тексту спан с классом цены например: low,mid,high), верно ? |
Some Way,
Давайте разберем все по полочкам. Есть плагин бегунок, плагин карусель и товары. 1. Плагин с бегунком - это черный ящик. Не важно как он работает, самое главное, что он генерирует 2 переменные from и to. Больше от него ничего не нужно. 2. Плагин карусели представляет собой черный ящик с контейнером. Для ovl-карусели это контейнер такого вида: <div class="owl-carousel"></div> В этот блок можно положить любые элементы и они автоматически становятся слайдами. 3. Теперь у меня к вам вопрос - где взять товары, которые надо вставить в карусель и отсортировать по критерию from-to? ======== Если вы их уже выводите в карусель, то можно хотя бы так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span class="content-section" style="display:block">
<p><img src="un.jpg"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 600</span></h6>
</span>
<span class="content-section" style="display:block">
<p><img src="un.jpg"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 250</span></h6>
</span>
<span class="content-section" style="display:block">
<p><img src="un.jpg"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 550</span></h6>
</span>
<span class="content-section" style="display:block">
<p><img src="un.jpg"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 250</span></h6>
</span>
<script>
var prise = document.querySelectorAll('.mid');
var ifrom = 100;
var ito = 300;
for(var i = 0; i < prise.length; i++){
var elemPrise = prise[i].innerHTML.replace('EUR ', '');
if(elemPrise > ifrom && elemPrise < ito){
prise[i].parentNode.parentNode.style.display='block';
}else{
prise[i].parentNode.parentNode.style.display='none';
}
}
</script>
</body>
</html>
|
Цитата:
Соответственно аддоном пихаю в ряд карусель а в карусель уже слайды в которых текстовые блоки с инфой. Товарами являются простые изображения(из медиатеки сайта), под которыми дописывается нужный текст, на первой странице в конце поста я приложил ссылку с тем как это должно выглядеть. Возможно есть намного проще решение моей проблемы при помощи этакого аддона, но я их уже перебрал очень много и подходящий не попадался. Изображение "карточки товара" http://joxi.ru/VrwbR6VFOLPyoA |
Кажется понял. То есть вы сразу в карусель пихаете все товары, ок.
Вот рабочий вариант на первый случай. Зависимости В принципе все зависимости можно увидеть в разделе <head> - все подключенные файлы. Но на всякий случай. Версия jQuery jquery-1-12-3 Бегунок - ion.rangeslider Карусель - owlcarousel2 Пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<script src="js/jquery-1.12.3.min.js"></script>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/ion.rangeSlider.css">
<link rel="stylesheet" href="css/ion.rangeSlider.skinHTML5.css">
<script src="js/ion.rangeSlider.js"></script>
<script src="js/owl.carousel.js"></script>
<link rel="stylesheet" href="css/owl.carousel.min.css">
</head>
<body>
<!-- Слайды с товарами -->
<div class="owl-carousel owl-theme">
<div class="item">
<span class="content-section">
<p><img src="izobrajenie"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 250</span></h6>
</span>
</div>
<div class="item">
<span class="content-section">
<p><img src="izobrajenie"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 150</span></h6>
</span>
</div>
<div class="item">
<span class="content-section">
<p><img src="izobrajenie"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 200</span></h6>
</span>
</div>
<div class="item">
<span class="content-section">
<p><img src="izobrajenie"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 600</span></h6>
</span>
</div>
<div class="item">
<span class="content-section">
<p><img src="izobrajenie"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 250</span></h6>
</span>
</div>
<div class="item">
<span class="content-section">
<p><img src="izobrajenie"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 130</span></h6>
</span>
</div>
<div class="item">
<span class="content-section">
<p><img src="izobrajenie"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 76</span></h6>
</span>
</div>
<div class="item">
<span class="content-section">
<p><img src="izobrajenie"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span class="mid">EUR 420</span></h6>
</span>
</div>
</div>
<!-- Бегунок с диапазонами цен -->
<div style="position: relative; padding: 200px;">
<div>
<input type="text" id="range" value="" name="range" />
</div>
</div>
<script>
$(function () {
var $range = $("#range");
$range.ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 50,
max: 500,
from: 100,
to: 400,
type: 'double',
step: 1,
prefix: "$",
grid: true
});
$range.on("change", function () {
var $this = $(this),
from = $this.data("from"),
to = $this.data("to");
/* скрипт на первый случай. Его не возбороняется улучшать и совершенствовать :) */
var prise = document.querySelectorAll('.mid');
for(var i = 0; i < prise.length; i++){
var elemPrise = prise[i].innerHTML.replace('EUR ', '');
if(elemPrise > from && elemPrise < to){
prise[i].parentNode.parentNode.parentNode.parentNode.style.display='block';
}else{
prise[i].parentNode.parentNode.parentNode.parentNode.style.display='none';
}
}
});
});
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
</script>
</body>
</html>
|
Цитата:
С вашей неоценимой помощью, у меня появился прогресс, последний скрипт начал прятать все слайды :) Думаю, каким-то образом нужно сортировать слайды только по наявности текста со значением 'EUR и "стоимость слайда"' и показывать те, которые подходят под from и to(их и отображать, без класса тегу h6). Таким образом при добавление нового слайда, с новой ценой он должен отобразиться при диапазоне выбора в который попадает. Даже не знаю, может еще так, если у слайда есть текст "EUR" со значением 50, и ползунок установлен на 50 и 100 будут показываться все слайды цена которых не превышает 100, если ползунок "to" стоит на номере 350 а "from" на 250, показываются все слайды с текстом цены "EUR от 250 до 350" ну и так аж до 500. |
Some Way,
У меня этот скрипт работает корректно, все в динамике обновляется и сортируется. Может у вас разметка айтемов отличается или еще что-то... Но бегунок срабатывает только после того, как им воспользуются. При загрузке же страницы, можно сортировать вручную, как-то так:
window.onload = function(){ // после загрузки страницы...
var prise = document.querySelectorAll('.mid'); // получаем все дивы, в которых записана цена
for(var i = 0; i < prise.length; i++){ // начинаем их по очереди перебирать...
var elemPrise = prise[i].innerHTML.replace('EUR ', ''); // Сначала получаем цены без "EUR" - только цифра
if(elemPrise > 50 && elemPrise < 500){ // Если цифра больше 50 и меньше 500 то -
prise[i].parentNode.parentNode.parentNode.parentNode.style.display='block'; // показать родителя родителя родителя )
}else{
prise[i].parentNode.parentNode.parentNode.parentNode.style.display='none'; // иначе - скрыть
}
}
}
Залил архив с примером на гугл.диск - так будет проще https://drive.google.com/file/d/1qoQ...ew?usp=sharing |
Цитата:
Но, проблема в том, что карусель я добавляю аддоном в админке( c помощью visual composer), не пишу html, кроме как <input type="text" id="range" value="" name="range"> Класс .mid, прописывал руками, что вообще не желательно( делал это для того, что бы получить хоть какой-то результат)! Возможно ли без назначения класса тегу h6 отображать элементы только используя текст(цену) ? Есть возможность добавлять класс каждому слайду через админку, но основная идея в том, что бы максимально упростить код для человека который слабо разбирается в админке, что бы он с помощью инструкции смог просто добавить новый слайд с ценой и внести его в перечень отображающихся. З.Ы. Мне очень неудобно перед вами, за потраченое на мою проблему время, но за ваши комментарии в коде огромное спасибо, по скольку я только начал, это просто бесценные вещи(помогает разобраться в синтаксисе и в целом по написание кода, ведь я только открываю для себя такие вещи как "if","else","var")!!! |
Some Way,
:D меня не напрягает. Все равно я все свободное время трачу на учебники, задачники и курсы по JS и решение самых разных задач по JS :) Проблема в другом - я вас не понимаю. Не знаю, как обратиться к данным (товарам). Где они у вас лежат, какая у них структура и т.д. Может, кто-нибудь другой еще вам поможет) |
Цитата:
|
Если слайды так выглядят:
<div class="item">
<span class="content-section">
<p><img src="izobrajenie"></p>
<p>text small</p>
<h5>LARGE text</h5>
<h6><span>EUR 130</span></h6>
</span>
</div>
Тогда строку:
var prise = document.querySelectorAll('.mid');
Заменить на:
var prise = document.querySelectorAll('.content-section span');
И должно заработать. |
Цитата:
http://joxi.ru/a2XKLJ4H1v8Nvm Цитата:
Перечитываю ваши сообщения, ищу что еще можно изменить. |
Some Way,
Вот оказывается, что вы так долго скрывали) Смотрите, вот для вашей структуры - должно работать. На строчке 51 цифры 50 и 500 нужно заменить на переменные from и to. Разберетесь? Видите, тут есть 3 слайда, но выводятся всего 2, поскольку один из них не удовлетворяет условиям - его цена 650 EUR.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="owl-stage-outer">
<div class="owl-item">
<div class="wpb_text_column">
<div class="wpb_wrapper">
<p>200x200</p>
<h5>Title</h5>
<h6>EUR 200</h6>
<p> </p>
</div>
</div>
</div>
<div class="owl-item">
<div class="wpb_text_column">
<div class="wpb_wrapper">
<p>200x200</p>
<h5>Title</h5>
<h6>EUR 240</h6>
<p> </p>
</div>
</div>
</div>
<div class="owl-item">
<div class="wpb_text_column">
<div class="wpb_wrapper">
<p>200x200</p>
<h5>Title</h5>
<h6>EUR 650</h6>
<p> </p>
</div>
</div>
</div>
</div>
<script>
window.onload = function(){
var prise = document.querySelectorAll('.wpb_wrapper h6');
for(var i = 0; i < prise.length; i++){
var elemPrise = prise[i].innerHTML.replace('EUR ', '');
if(elemPrise > 50 && elemPrise < 500){
prise[i].parentNode.parentNode.parentNode.style.display='block';
}else{
prise[i].parentNode.parentNode.parentNode.style.display='none';
}
}
}
</script>
</body>
</html>
|
Цитата:
C 51 строкой разобрался, существенные изменения произошли
<script>
$(function () {
var $range = $("#range");
$range.ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 50,
max: 500,
from: 250,
to: 350,
type: 'double',
step: 50,
grid: true
});
$range.on("change", function () {
var $this = $(this),
from = $this.data("from"),
to = $this.data("to");
/* скрипт на первый случай. Его не возбороняется улучшать и совершенствовать :) */
var prise = document.querySelectorAll('.wpb_wrapper h6');
for(var i = 0; i < prise.length; i++){
var elemPrise = prise[i].innerHTML.replace('EUR ', '');
if(elemPrise > from && elemPrise < to){
prise[i].parentNode.parentNode.parentNode.style.display='block';
}else{
prise[i].parentNode.parentNode.parentNode.style.display='none';
}
}
});
});
</script>
Но, у меня в наличие слайды с ценой от 100 до 500, каждого слайда по 4е штуки и при изменение ползунка все слайды с ценой в 500 перестают отображаться, даже при выборе максимального значения. |
Some Way,
Логично. На той же строке нужно заменить знаки "больше" и "меньше" ( > < ) на "больше или равно" и "меньше или равно" (>= и <=). Ну, в общем так:
if(elemPrise >= from && elemPrise <= to){
|
Цитата:
При изменение параметров самого ползунка начинается каша :( Но я вам очень благодарен, плюсики в карму уже поставил. Проблемы только с анимацией карусели, работает непонятно теперь, думаю, что нужно искать файл и исправлять саму анимацию карусельки... Кстати, вы говорили что тратите много свободного времени на изучение javascript, посоветуете "руководство для чайников ?" |
Some Way,
Хорошо план Б. Код не претендует на красивое решение, но зато вроде работает отлично - никаких проблем ни с анимцией ни с чем-то еще. Его можно улучшить, если все ок.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinHTML5.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.min.js"></script>
<style>.owl-item{background-color: #c0bdbd;}</style>
</head>
<body>
<div id="avatar-carousel" class="owl-carousel">
<div class="owl-item">
<div class="wpb_text_column">
<div class="wpb_wrapper">
<p>200x200</p>
<h5>Title</h5>
<h6>EUR 70</h6>
<p> </p>
</div>
</div>
</div>
<div class="owl-item">
<div class="wpb_text_column">
<div class="wpb_wrapper">
<p>200x200</p>
<h5>Title</h5>
<h6>EUR 90</h6>
<p> </p>
</div>
</div>
</div>
<div class="owl-item">
<div class="wpb_text_column">
<div class="wpb_wrapper">
<p>200x200</p>
<h5>Title</h5>
<h6>EUR 230</h6>
<p> </p>
</div>
</div>
</div>
<div class="owl-item">
<div class="wpb_text_column">
<div class="wpb_wrapper">
<p>200x200</p>
<h5>Title</h5>
<h6>EUR 210</h6>
<p> </p>
</div>
</div>
</div>
<div class="owl-item">
<div class="wpb_text_column">
<div class="wpb_wrapper">
<p>200x200</p>
<h5>Title</h5>
<h6>EUR 270</h6>
<p> </p>
</div>
</div>
</div>
</div>
<div style="position: relative; padding: 200px;">
<div>
<input type="text" id="range" value="" name="range" />
</div>
</div>
<script>
var arr = [];
var iFrom = 50;
var iTo = 500;
/* формируется массив с товарами */
window.onload = function(){
var p = document.querySelectorAll('.wpb_wrapper p');
var h5 = document.querySelectorAll('.wpb_wrapper h5');
var h6 = document.querySelectorAll('.wpb_wrapper h6');
for(var i = 0; i < p.length; i++){
var temp = {};
if(i%2 == 0){
temp.p = p[i].innerHTML;
}else{
temp.p = p[i+1].innerHTML;
}
temp.h5 = h5[i].innerHTML;
temp.h6 = h6[i].innerHTML.replace('EUR ', '');
arr[arr.length] = temp;
}
}
/* отбор товаров, соответствующих критериям */
function sort(from, to) {
var from = from;
var to = to;
var good = [];
for(var i = 0; i < arr.length; i++){
var x = arr[i]['h6'];
if(x >= from && x <= to){
good[good.length] = arr[i];
}
}
add(good);
}
// добаавление товаров в карусель
function add(good) {
var good = good;
for(var i = 0; i < good.length; i++){
$('#avatar-carousel').trigger('add.owl.carousel', [
'<div class="owl-item"><div class="wpb_text_column"><div class="wpb_wrapper">' +
'<p>' + good[i]['p'] + '</p>' +
'<h5>' + good[i]['h5'] + '</h5>' +
'<h6> EUR ' + good[i]['h6'] + '</h6>' +
'<p> </p></div></div></div>'
]).trigger('refresh.owl.carousel');
}
};
// удаление товаров из карусели
function del() {
var el = document.querySelectorAll('.wpb_wrapper');
for(var i = 0; i < el.length; i++){
$('#avatar-carousel').trigger('remove.owl.carousel',i).trigger('refresh.owl.carousel');
}
}
/* Инициализация карусели */
$('#avatar-carousel').owlCarousel({
loop:true,
lazyLoad:true,
margin:10,
dots: false,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
var globalTimeout = null;
$(function () {
var $range = $("#range");
$range.ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 50,
max: 500,
from: 50,
to: 500,
type: 'double',
step: 1,
prefix: "$",
grid: true
});
$range.on("change", function () {
var $this = $(this),
from = $this.data("from"),
to = $this.data("to");
if (globalTimeout != null) {
clearTimeout(globalTimeout);
}
globalTimeout = setTimeout(function() {
globalTimeout = null;
del();
sort(from, to);
}, 2000);
});
});
</script>
</body>
</html>
|
|
Прошу прощения, начал сбоить плагин Easy Modal
http://joxi.ru/EA4Xg3QFw8J0XA При отключение библиотеки JQuery, плагин работает нормально, но ползунок не инициализируется Сам скрипт подключаю перед </body> в таком виде
<script>
$(function () {
var $range = $("#range");
$range.ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 100,
max: 500,
from: 250,
to: 350,
type: 'double',
step: 1,
grid: true
});
$range.on("change", function () {
var $this = $(this),
from = $this.data("from"),
to = $this.data("to");
/* скрипт на первый случай. Его не возбороняется улучшать и совершенствовать :) */
var prise = document.querySelectorAll('.wpb_wrapper h6');
for(var i = 0; i < prise.length; i++){
var elemPrise = prise[i].innerHTML.replace('EUR', '');
if(elemPrise >= from && elemPrise <= to){
prise[i].parentNode.parentNode.parentNode.style.display='block';
}else{
prise[i].parentNode.parentNode.parentNode.style.display='none';
}
}
});
});
</script>
Структура немножко вот так :) <div class="owl-item active center"> <div class="wpb_text_column wpb_content_element "> <div class="wpb_wrapper"> <p><img src="/wp-content/uploads/galery-9.png"></p> <p>200×200</p> <h5>LARGE Title open</h5> <h6>EUR 10</h6> </div> </div> </div> |
Some Way,
не могу догадаться, почему сбоит Easy Modal.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinHTML5.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.min.js"></script>
<style>.owl-item{background-color: #c0bdbd;} img{width: 50px;}</style>
</head>
<body>
<div id="avatar-carousel" class="owl-carousel">
<div class="owl-item active center">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p><img src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Photos.png"></p>
<p>200×200</p>
<h5>LARGE Title open</h5>
<h6><span>EUR 100</span></h6>
</div>
</div>
</div>
<div class="owl-item active center">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p><img src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Photos.png"></p>
<p>200×200</p>
<h5>LARGE Title open</h5>
<h6><span>EUR 120</span></h6>
</div>
</div>
</div>
<div class="owl-item active center">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p><img src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Photos.png"></p>
<p>200×200</p>
<h5>LARGE Title open</h5>
<h6><span>EUR 180</span></h6>
</div>
</div>
</div>
<div class="owl-item active center">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p><img src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Photos.png"></p>
<p>200×200</p>
<h5>LARGE Title open</h5>
<h6><span>EUR 250</span></h6>
</div>
</div>
</div>
<div class="owl-item active center">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p><img src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Photos.png"></p>
<p>200×200</p>
<h5>LARGE Title open</h5>
<h6><span>EUR 350</span></h6>
</div>
</div>
</div>
<div class="owl-item active center">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p><img src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Photos.png"></p>
<p>200×200</p>
<h5>LARGE Title open</h5>
<h6><span>EUR 450</span></h6>
</div>
</div>
</div>
</div>
<div style="position: relative; padding: 50px 300px;">
<div>
<input type="text" id="range" value="" name="range" />
</div>
</div>
<script>
// тут будут храниться распарсенные товары
var arr = [];
/* формируется массив с товарами */
window.onload = function(){
var p = $('.wpb_wrapper p');
var h5 = $('.wpb_wrapper h5');
var h6 = $('.wpb_wrapper h6 span');
for(var i = 0; i < p.length; i++){
var temp = {};
if(i%2 == 0){
temp.img = p[i].innerHTML;
temp.p = p[i+1].innerHTML;
}else{
temp.img = p[i+1].innerHTML;
temp.p = p[i].innerHTML;
}
temp.h5 = h5[i].innerHTML;
temp.h6 = h6[i].innerHTML.replace('EUR ', '');
arr[arr.length] = temp;
console.log(arr);
}
}
/* отбор товаров, соответствующих критериям */
function sort(from, to) {
var from = from;
var to = to;
var good = [];
for(var i = 0; i < arr.length; i++){
var x = arr[i]['h6'];
if(x >= from && x <= to){
good[good.length] = arr[i];
}
}
add(good);
}
// добаавление товаров в карусель
function add(good) {
var good = good;
for(var i = 0; i < good.length; i++){
$('#avatar-carousel').trigger('add.owl.carousel', [
'<div class="owl-item active center"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper">' +
'<p>' + good[i]['img'] + '</p>' +
'<p>' + good[i]['p'] +'</p>' +
'<h5>' + good[i]['h5'] + '</h5>' +
'<h6><span>EUR ' + good[i]['h6'] + '</span></h6>' +
'</div></div></div>'
]).trigger('refresh.owl.carousel');
}
};
// удаление товаров из карусели
function del() {
var el = document.querySelectorAll('.wpb_wrapper');
for(var i = 0; i < el.length; i++){
$('#avatar-carousel').trigger('remove.owl.carousel',i).trigger('refresh.owl.carousel');
}
}
/* Инициализация карусели */
$('#avatar-carousel').owlCarousel({
loop:true,
lazyLoad:true,
margin:10,
dots: false,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
// переменная нужна для таймера
var globalTimeout = null;
// инициализация бегунка
$(function () {
var $range = $("#range");
$range.ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 50,
max: 500,
from: 50,
to: 500,
type: 'double',
step: 1,
prefix: "$",
grid: true
});
$range.on("change", function () {
var $this = $(this),
from = $this.data("from"),
to = $this.data("to");
// задержка после задания диапазона 1,5 секунды
if (globalTimeout != null) {
clearTimeout(globalTimeout);
}
globalTimeout = setTimeout(function() {
globalTimeout = null;
del();
sort(from, to);
}, 1500);
});
});
</script>
</body>
</html>
|
Цитата:
http://joxi.ru/82QObxZij0QQvr Стало намного лучше, это заметно, но появился новый бичь :( http://joxi.ru/DmBzwMlfwnVV1m http://joxi.ru/YmE9b6Ku01dZdm |
Some Way,
Была проблема в том, что owl-карусель клонирует товары, чтоб сделать цикл из них. И эти клоны надо изначально отсеивать. Архив на google.doc |
| Часовой пояс GMT +3, время: 06:20. |