/ Scripts & jquery

Scripts & jquery

73

Изменение конфигурации объекта

Изменение конфигурации объекта

Создадим функционал по изменению различных конфигураций объекта. Например сделаем конфигуратор коттеджа, у которого будут изменять цвет и материал кровли, а также цветовая схема стен. Должно получится примерно следующее: Материалы В Читать далее »

Калькуляторы на jQuery

Калькуляторы на jQuery

Создаем калькуляторы расчетов без использования плагинов. Расчет перегородки из гипсокартона Скрипт расчета: Расчет подвесной системы Скрипт расчета: Расчет потолков из гипсокартона Скрипт расчета: Расчет стен из гипсокартона Скрипт расчета: Math.ceil(число) Читать далее »

Fancybox для контента

Fancybox для контента

Fancybox — отличный инструмент не только для лайтбокса и галереи изображений. С помощью данного плагина можно быстро и просто создавать модальные окна для контента. В данном направлении есть различные интересные Читать далее »

Owl Carousel

Owl Carousel

Разберем решение по созданию слайдеров и каруселей Owl Carousel 2. У данной карусели есть ряд преимуществ по сравнению с каруселью slick: Есть возможность формировать хэш-ссылки для слайдов Работает более быстро Читать далее »

Имитация набора текста

Имитация набора текста

Различные решения по имитации набора текста. Простое решение на js Начать печать текста, только при появлении на экране, добавляем скрипт viewportChecker Плагин TypeIt Подключаем плагин (скрипт) typeit.min.js Далее инициируем его: Читать далее »

Тройной таб

Тройной таб

Сделаем таб с тройным уровнем вложенности. Уверен, что данное решение можно сделать проще и изящнее, но пока не хватает скила. Нужно сделать следующее: В данном функционале есть 3 уровня табов: Читать далее »

Квиз-форма

Квиз-форма

Создадим квиз-форму без использования какого-либо плагина на чистом html, css, jQuery и php. В данной записи приведу пример квиза по ремонту помещения. В квизе использованы различные варианты полей (текст, radio, Читать далее »

Набирающиеся цифры

Набирающиеся цифры

Нашел простое решение на jQuery чтобы сделать набирающиеся цифры при загрузке страницы. Доработал решение viewportChecker, чтобы цифры набирались только при появлении блока с ними на экране. Верстка: Тут важны класс Читать далее »

Datetimepicker

Datetimepicker

Datetimepicker — скрипт для создания продвинутого поля ввода даты и времени. Здесь буду рассматривать решение от Kartik Visweswaran. Для работы необходимо подключить сам скрипт и стили: jquery.datetimepicker.full.min, jquery.datetimepicker.min Инициализация скрипта Читать далее »

Lazyload + srcset

Lazyload + srcset

Недавно начал использовать библиотеку Lazyload от Daniel ‘Eisbehr’ Kern. Работает лучше чем вторая версия от Mika Tuupola. Особенности Lazyload Многие параметры схожи с версией Mika Tuupola (MT), инициализируется так: Корректно Читать далее »

Скрипты бронирования Travelline

Скрипты бронирования Travelline

Настраиваем скрипты Трэвел Лайн и интегрируем в них Яндекс цели и прочие инструменты интернет-маркетинга. Форма поиска TL Данная форма обычно устанавливается на всех страницах сайта чтобы вести на страницу бронирования Читать далее »

Подгрузка отдельных блоков на странице

Подгрузка отдельных блоков на странице

Прочитал в одной из статей — как подгружать методом ajax целые куски кода, в том числе и php. Сам метод действительно оказался прост. В данной статье опишем ситуации где этот Читать далее »

/
Шапка при прокрутке вверх

Шапка при прокрутке вверх

Делаем шапку, которая скрывается при прокрутке вниз и появляется при прокрутке вверх. Верстка и стили header нужно добавить class=»nav-down». Особенность стилей в том, что header должен быть fixed, a body Читать далее »

Отложенная загрузка видео

Отложенная загрузка видео

Как сделать отложенную загрузку изображений описано здесь. Теперь сделаем отложенной загрузку видеороликов, в частности подгружаемых с видеохостингов YOUtube и Vimeo. Отложенная загрузка iframe YOUtube Из исходного iframe потребуется только ID Читать далее »

Посты — метки на карте

Посты — метки на карте

Пытаясь реализовать удобный функционал по созданию меток на интерактивной карте я пришел к следующей системе. Заводим произвольный тип записи и таксономии чтобы структурировать и удобно манипулировать городами и точками. Основа Читать далее »

Заявка на товар

Заявка на товар

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

/
Быстрый просмотр товара без плагина

Быстрый просмотр товара без плагина

В одной из предыдущих статей мы научились вызывать ajax’ом содержимое записи. Теперь настроим и доработаем данный функционал для товаров woocommerce. Создание функционала Техническая часть (скрипты, стили) остается той же что Читать далее »

Подключаем КЛАДР

Подключаем КЛАДР

Подключаем к сайту систему КЛАДР — это постоянно обновляемая база адресов России. КЛАДР нужен для того, чтобы при вводе первых букв он предлагал варианты заполнения. Причем сделано это довольно интеллектуально, Читать далее »

Движение фона от мыши

Движение фона от мыши

Разберем тему несложного скрипта движения фона, либо чего угодно от движения мыши. Двигающийся фон Делаем фон, желательно на всю ширину экрана для наглядности. <div id="move-bg"> </div> Свойства блока с фоном Читать далее »

Полоса загрузки страницы

Полоса загрузки страницы

Выводим полосу загрузки, чтобы визуально показать что сайт грузится. Данные изображения «утяжеляют» страницу: NProgress NProgress — довольно минималистичная полоса загрузки, которая гармонично смотрится на любом сайте. Как обычно, подключаем скрипт Читать далее »

Заметки на изображении

Заметки на изображении

Помещаем на изображение заметки поясняющие ту или иную деталь. Данная функция может быть полезна для пояснения каких-либо чертежей или схем, выделения основных преимуществ товара и т.д. Перебрал множество скриптов с Читать далее »

Фильтр по меткам (изменение основного запроса)
Рекомендации для васФильтр по меткам (изменение основного запроса)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.