/ Scripts & jquery

Scripts & jquery

95

Слайдер Swiper

Слайдер Swiper

Недавно ознакомился со слайдером Swiper. По функционалу он более комплексный по сравнению с Owl.Carousel и Slick. Swiper, и, судя по рейтингам, становится всё более популярным. Будем публиковать тут интересные решения Читать далее »

Перезагрузка слайдера Owl Carousel

Перезагрузка слайдера Owl Carousel

Перезагрузим содержимое слайдера Owl Carousel с помощью Ajax. Предположим что у нас есть слайдер с классом doctors и поле select с переключением категорий докторов. Вывод в данном примере специфический, кастомный Читать далее »

Создаём корзину

Создаём корзину

Создадим самостоятельно корзину товаров. Будем использовать такие технологии как: js (jQuery), localStorage и JSON как формат. Если очень упростить то нужно сделать следующее: т.е. сохраняем параметры корзины в LocalStorage, но Читать далее »

Управление Owl-каруселью внешним интерфейсом

Управление Owl-каруселью внешним интерфейсом

Подключим к управлению Owl-каруселью различные варианты внешнего интерфейса. Кастомные стрелки навигации Кастомные стрелки навигации (чтобы, например, сделать их по ширине контейнера): Стандартные стрелки скрываем стилями. Скрипт управления: Можно использовать этот Читать далее »

Создание карусели Owl параметрами из HTML

Создание карусели Owl параметрами из HTML

Создадим универсальный скрипт создания Owl-карусели. Параметры для каждой отдельной карусели будут задаваться из атрибутов элемента самой карусели. Верстка Атрибуты нельзя оставлять пустыми. Если тот или иной атрибут не нужен лучше Читать далее »

Добавим корзину на сайт. Angry-cart.js

Добавим корзину на сайт. Angry-cart.js

Будем добавлять на сайт корзину, без использования плагина woocomemrce. Подключаем к сайту js-плагин angry-cart.js. Из всех файлов по сути нужен только angry-cart.js. Данное решение работает на чистом js. Данные корзины Читать далее »

Добавление кнопки more при узком меню

Добавление кнопки more при узком меню

Если пункты меню не вмещаются в его заданную ширину, то их можно спрятать в кнопку more. Вариант 1 Работает в целом неплохо. Но если именно придираться, то при изменении размера Читать далее »

Поле Color Picker во фронтенде

Поле Color Picker во фронтенде

Различные варианты добавления поля Color Picker во фронтенде. Поле color HTML5 Может работать не во всех браузерах, но при этом не требует дополнительных подключений. Получить данные с поля Плагин jQuery Читать далее »

ProgressBar для Owl.Carousel v.2

ProgressBar для Owl.Carousel v.2

Добавим к плагину карусели Owl Carousel (2 версии) progressbar при автоперемотке слайдов. Я наткнулся на 2 решения: попроще и посложнее. Вариант попроще Данное решение довольно примитивное. Необходимо самостоятельно добавлять к Читать далее »

Экспорт в Excel средствами js

Экспорт в Excel средствами js

Экспортируем таблицу (html) в файл Excel скриптами. Чистый скрипт js Пример таблицы Скрипт Добавляем кнопку для формирования и скачивания файла: Работает данное решение хорошо. При открытии таблицы выводится предупреждение о Читать далее »

Изменение контента при скроллинге

Изменение контента при скроллинге

Пример реализации: https://codepen.io/mmbotelho/pen/NLRLYN т.е. когда меняется информация (заголовок, текст, изображение) в статичной области при скроллинге. Предположим что такой блок нужен на лэндинге, причем располагается не на первом экране, а где-то Читать далее »

Получение образцов цвета из изображения

Получение образцов цвета из изображения

Рассмотрим скрипты по получению цветов из изображения. Color Thief Отличное решение по данному функционалу. В скрипте есть 2 основные функции: основной цвет, палитра (несколько основных цветов). Помимо подключения основного скрипта, Читать далее »

Вертикальное многоуровневое меню

Вертикальное многоуровневое меню

Создадим вертикальное многоуровневое меню. За основу берем верстку стандартного меню WordPress. Условно у меню будет id menu. Стили:

Скрипт предупреждение о переходе

Скрипт предупреждение о переходе

На некоторых страницах приходиться заполнять какие-либо данные формы. И если посетитель в процессе заполнения случайно кликнет на ссылку или случайно перезагрузит — поля обновятся. Чтобы этого избежать на данных страницах Читать далее »

Создание динамических графиков

Создание динамических графиков

В основе используем JS плагин CanvasJS jQuery Charting Plugin. В плагине множество различных вариантов графиков: линейный, диаграмма, области, сектора и т.д. Подключаем скрипт для jQuery: В нем уже заложена генерация Читать далее »

Добавляем в галерею фильтр

Добавляем в галерею фильтр

Добавим в стандартную галерею функционал карусели и фильтрации с помощью скрипта slick. Галерея с каруселью У созданной галереи задаем класс, например cgallery. Инициируем slick для галереи с классом cgallery Добавляем Читать далее »

Виджеты jQuery UI

Виджеты jQuery UI

Виджеты jQuery UI — это фреймворк различных решений для интерфейсов, полей и блоков. Разберем некоторые компоненты данного фреймворка. Можно собрать необходимые компоненты, а не весь комплекс. Для работы виджетов нужно Читать далее »

Автоматическое определение координат по адресу

Автоматическое определение координат по адресу

В данном решении используется сервис geocode-maps.yandex.ru. Функция определения координат по адресу my_url_encode, my_url_decode — вспомогательные функции по кодировке/декодировке символов для правильного url-запроса. Использование функции Ajax-функция определения координат Добавим функцию подключения Читать далее »

Срок действия записи

Срок действия записи

Рассмотрим функционал назначения для записи срока действия, т.е. даты после которой запись меняет статус. WP Post Expires (2 000) Простой плагин позволяющий назначать записям время, после которого будет выполнено одно Читать далее »

Версия сайта для слабовидящих

Версия сайта для слабовидящих

Создадим блок с настройками в котором будут изменятся параметры сайта, такие как цветовая схема и размер шрифта. Для полноценной работы данного решения потребуется подключение jquery.cookie.js. Блок настроек Данный блок я Читать далее »

Image Magnifier

Image Magnifier

Ранее был описан функционал увеличения фрагмента изображения (имитация лупы), но данный функционал действует по немного другому принципу. Image Magnifier может создавать увеличенный фрагмент изображения рядом с исходным. Для начала подключаем Читать далее »

Incredibly Basic Slider
Рекомендации для васIncredibly Basic SliderOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.