Устанавливаем

📎Качаем модуль с Гугл диска или с GitHub.

🪓Подрубаем его перед </body> :

<script src="js/jquery.maskedinput.min.js"></script>

Не забудьте подключить jQuery!

Используем

🪓Вставляем в файл скриптов, либо в HTML сайта через <script>...</script> эту кодулю:

$(document).ready(function () {
$(".phonemask").mask("+7 (999) 999 99-99");
});

Здесь мы указали: класс поля .phonemask, к которому будем прикручивать маску для телефона, и собственно саму маску +7 (999) 999 99-99 которая любую вводимую в поле информацию будет приводить к этому виду.

🪓И дописываем этот класс к нашему полю:

<input type="text" name="phone" class="phonemask">

Другие маски

Помимо масок для номеров телефона, плагин позволяет сделать маски:

🗓Для даты

$(".datemask").mask("99/99/9999");

💳Для номера карты

$(".cardmask").mask("9999-9999-9999-9999");

🔢И даже для обычных чисел

$(".numbermask").mask("0.9?9");

Подписаться на @wjourn 🔥

Так вот, как и со слайдерами, для создания модальных окон есть дохрена различных JS-библиотек. Можно делать их и вообще без JS, можно по-быстрому написать свою. Но нам же нужна современная, отлаженная, быстрая и легкая реализация модальных окон, верно? Да конечно верно, о чем разговор.

Установка fancybox 3

1. Качаем сам плагин отсюда: https://fancyapps.com/fancybox/3/ (кнопка Download)

2. У нас появится архив с кучей всего непонятного. Без паники, нам нужны в папке dist всего 2 файла:

3. После того как закинули файлы, самое время их подключить, на нужных страницах перед </body> вставляем:

<link rel='stylesheet prefetch' href='/css/jquery.fancybox.min.css'>
<script src='/js/jquery.fancybox.min.js'></script>

Убедите также что подключена библиотека jQuery! Кстати, подключить по-быстрому ее можно так:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

4. Да впринципе все, можем пользоваться 🙌

Делаем модальное окно на fancybox 3

<a data-fancybox data-src="#modal" href="javascript:;">Открыть окно</a>
 
<div style="display: none;" id="modal">
  <p>Здарова отец</p>
</div>

Собственно что мы тут видим. В <a> у нас ссылочка при клике на которую будем открывать модальное окно с id #modal . И ниже - само модальное окно.

Также его можно вызывать из функции JS и генерировать контент прямо в скрипте:

$.fancybox.open('<div class="message"><h2>Здарова</h2><p>Отец</p></div>');

Делаем увеличение картинки через fancybox 3

<a href="image_1.jpg" data-fancybox="gallery" data-caption="Подпись к картинке">
    <img src="thumbnail_1.jpg" alt="" />
</a>

В href="" указываем ссылку на ту картинку, которая будет открывать при клике. В data-fancybox можно указать название галереи, что бы оно сгруппировалось в слайдшоу. И внутри всей ссылки у нас лежит картинка, можно и нужно там указывать уменьшенный вариант изображения.

Загружаем окно по AJAX

Вот тут есть небольшое пересечение с AJAX. Fancybox может загружать контент окна по ajax запросу, делается это так:

<a data-fancybox data-type="ajax" data-src="/ajax/ajax.php" data-filter="#two" href="javascript:;">
    AJAX content
</a>

Теперь при клике на кнопку, мы будем забирать ответ из файла ajax.php.

Можно также круто работать с фреймами и с видео. Больше настроек и опций тут.

Подписаться на @wjourn 🦩

Можно и свой сделать, но зачем? Существует туева хуча популярных велосипедов, таких как: Slick.js, bxSlider, OWL Carousel и т.д. Я долго и нудно пользовался сликом, пока не наткнулся на OWL Carousel 2.

На мой испорченный вкус - очень удобная и сильно кастомизабельная штука.

Базар базаром, но давайте подробней.
Первое что хочется посмотреть, это демки - они тут. Кому впадлу переходить, напишу что слайдер имеет 60+ опций и подойдет практически под любую задачу.

Пару строк как его использовать

1. Скачиваем слайдер с официального гита: https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip

2. Подрубаем стили:

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

Кстати, в последнем файле правится внешний вид слайдера.

3. Подрубаем скриптули:

<script src="owlcarousel/owl.carousel.min.js"></script>

Убедитесь что вы подключили jQuery!

4. Собственно ставим в HTML в нужное место наш слайдер:

<!— Слайдер для фоток жопы -->
<div class="owl-carousel"> 
<div> Your Content </div> 
<div> Your Content </div> 
<div> Your Content </div> 
<div> Your Content </div> 
<div> Your Content </div> 
<div> Your Content </div> 
<div> Your Content </div> 
</div>

5. Наконец, дописываем скриптулю в ваш файл скриптов, ну или под слайдером в тег <script></script>:

$(document).ready(function(){
$(".owl-carousel").owlCarousel(); 
});

У слайдера есть много опций, они тут - https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

Прописываются они примерно так:

$(".owl-carousel").owlCarousel({
nav: true, //Навигация стрелочками
loop: true, //Бесконечный слайдер
dots: false, //Навигация точками
autoplay:true //Автоматическая смена слайдов
});

Подписаться на @wjourn 🦉

Sypex Geo как раз предоставляет такую возможность. Сразу немного инфы по количеству запросов:

• 10 000 запросов в месяц на каждого пользователя
• если мы зарегистрируемся - у нас будет 30 000 запросов в месяц на каждого пользователя

Про платную подписку даже писать не буду, потому как такого количества с головой хватит большинству корпоративных сайтиков.

Итак, все что нам нужно - это закинуть им запрос. На пыхе (PHP), можно написать так:

if($request = filegetcontents("https://api.sypexgeo.net/json/".$SERVER['REMOTEADDR']))
{
$array = json_decode($request);
$geoipcity = $array->city->name_en;
}

Где $SERVER['REMOTEADDR'] - IP нашей жертвы.

Ответ нам придет такой (в JSON):

При этом, на скрине не видно, но там еще валяется информация о стране (население, телефонный код, ближайшие соседи) и о регионе. Имена мы получаем сразу на 7 языках, что наверняка пригодится.

Подписаться на @wjourn