< Заур Магомедов />

профессиональный верстальщик и блоггер

Мое хобби - разработка сайтов, но со временем это переросло в постоянный и стабильный источник дохода.

Заур Магомедов
Главная » Приятные полезности для сайта » Создаем всплывающие окна для сайта — Magnific Popup

Создаем всплывающие окна для сайта — Magnific Popup

Создаем всплывающие окна для сайта — Magnific Popup

Пост был обновлен: Янв 07, 2017

Приветствую всех посетителей моего блога! Писать статьи получается очень редко, что не есть хорошо. Уже боюсь что-то обещать, как раньше — писать буду чаще и все такое. Причина вся та же  — нехватка времени. Ну ладно, сегодняшний пост не об этом. Поговорим о всплывающих окнах для сайта. На просторах интернета практически нет сайтов, которые не используют всплывающие (модальные) окна. В связи с этим я посчитал, что данная тема для веб-разработчика очень важна. Скриптов модальных окон в сети интернет очень много. Какой из них выбрать, чтобы было проще подключать, проще пользоваться, обладал широкими возможностями и т.д.? Я для себя такой нашел…

Magnific Popup — jQuery плагин всплывающих окон, сделанный с акцентом на производительность и удобство пользования. Так кратко описывает автор скрипта — Дмитрий Семенов и я с ним абсолютно согласен. Я уже достаточно долго использую Magnific Popap для модальных окон и успел в этом убедиться.

Вообще хотелось бы отметить, что Magnific очень популярен, как в рунете, так и в буржуйнете, не смотря на то, что разработчик русскоговорящий. В общем, Magnific Popup заслужил то, чтобы я про него написал отдельный пост.

Вот основные преимущества плагина, которые я могу выделить от себя:

  1. Легкость и модульность. Минимизированная версия скрипта со всеми включенными модулями весит всего лишь ~20 кб. В процессе компиляции (об этом поговорим чуть ниже) вы можете выбрать только те модули, которые вам нужны. Модули это типы всплываемых окон:
    • Inline — обычные блочные окна, содержащие любой контент;
    • Image — всплывание изображений;
    • Ajax — подгрузка данных в окне посредством технологии Ajax;
    • Iframe — подгрузка данных окна в Iframe, например, видео Youtube;
    • Gallery — по сути Image, но с возможностью листать фото с помощью стрелок, т.е. минигалерея;
    • High-DPI (retina) — только для типа Image. Данный модуль позволяет показывать изображения с высоким разрешением на устройствах с дисплеями разной плотностью пикселей. Честно говоря, с этим я не разобрался, так что особо нечего сказать по данному поводу. Надо будет выделить время и разобраться.
    • Image zoom animation — анимация при всплывании изображения. Если кому не нужна анимация можно не включать данный модуль в пакет.
  2. Размер окна можно задать средствами CSS, не через JavaSript, как это сделано во многих других скриптах. Вообще я скажу, что через CSS можно настраивать внешний вид окна на свое усмотрение, хотя и вид по умолчанию меня устраивает более чем…
  3. Поддержка адаптивности. Например, мы можем отключить всплывание окна после определенного размера окна браузера. Я считаю это просто замечательная опция. По сути, зачем увеличивать изображение на мобильной версии, ведь изображение итак подстраивается максимально под размер экрана устройства.
  4. Гибкая настройка. Например, мы можем поменять анимацию всплывания, передав свой класс через параметры (опция mainClass ниже). Далее для данного класса описываем анимацию правилами CSS (а это как раз то, о чем я говорил, когда имел ввиду, что через CSS можно гибко настраивать всплывающие окна). Примерно, как это может выглядеть вы можете посмотреть здесь.
  5. Conditional lightbox — опция, которая позволяет определить свободное пространство для всплывания окна. Т.е. если место имеется, то сработает лайтбокс. Скрипт автоматически определяет размер экрана. Честно сказать данную опцию я в документации пока не нашел и не тестировал еще. Но автор заявляет, что такая возможность есть.
  6. Пошаговость открытия модальных окон — вы можете открывать окна пошагово, например, 2 окна. Смотрите пример и все поймете.
  7. Имеется плагин для WordPress — вам не надо заморачиваться с подключением, просто устанавливаете и активируете плагин.

Для того, чтобы сачать Magnific Popup переходим на официальный сайт разработчика. Жмем по ссылке «Build tool» и в модальном окне выбираем нужные нам модули. После всего жмем «Generate build» и получаем код плагина. Данный код необходимо скопировать в редактор кода, например, Notepade++ или Sublime Text и сохранить с расширением «.js«. Также в этом же окне билда вам надо сохранить код CSS. Для этого щелкаем правом кнопкой мыши по ссылке «CSS version» и сохраняем файл стилей. Если вы пользуетесь препроцессором, то сохраните файл «Sass version«.  Если не получается сохранить перейдите по ссылке сохраните код самостоятельно в редакторе кода.

Скачать Magnific Popup

Подключение Magnific Popup

Подключить плагин и начать работать с ним достаточно просто. Вообще на сайте есть подробная документация, правда она на английском. Но я скажу вам — чтобы заниматься веб-разработкой крайне важно знать английский язык на техническом уровне. Без этого никуда. Для меня лично не составляет труда изучить документацию по скриптам на английском языке. В конце концов есть также гугл переводчик, которым можно воспользоваться, если что-то непонятно.

В данной статье я рассмотрю только те моменты модальных окон, с которыми я разобрался и которые активно внедряю в процессе разработки сайтов. И так давайте начнем.

Подключаем файл плагина и файл стилей Magnific Popup. Если у вас не подключена библиотека jQuery, то обязательно следует подключить и ее. В общем, здесь подключение ничем не отличается от подключения любого другого скрипта jQuery. Про подключение стилей и скриптов я написал отдельную статью, советую ее почитать.

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="/css/magnific-popup.css">

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Magnific Popup core JS file -->
<script src="/js/jquery.magnific-popup.js"></script>

Типы модальных окон

Тип контента в окне — Inline

Далее нам следует инициализировать наш плагин. Для этого нам нужно определиться с типом всплываемого контента. Давайте вызовем в модальном окне обычный текст. Тогда код инциализации будет для контента с типом — Inline.

jQuery(document).ready(function($) {
    $('.popup-content').magnificPopup({
        type: 'inline'
    });
});

Как видим событие вызова модального окна вешается на объект с классом «popup-content«. Поэтому создадим его, например, это будет ссылка с якорем на вызываемый блок с id=»text-popup».

<a href="#text-popup" class="popup-content">Вызвать окно с текстом</a>

<div id="text-popup" class="white-popup mfp-hide">
<p>С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение направлений прогрессивного развития.</p>
</div>

И еще кое что. Для того, чтобы наше окно стало видно нам необходимо в файл стилей «magnific-popup.css» добавить следующий код:

.white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
}

Данное правило задает фоновый цвет окну и отступы. Их изначально его нет в файле стилей, т.к. само окно можно оформить на свое усмотрение.

Читайте также:  Горизонтальное многоуровневое меню на css с эффектом анимации

В результате у нас открывается модальное окно с нашим текстом. Все довольно просто.

Тип контента — Image

Теперь давайте откроем картинки в модальных окнах.

<!-- Без анимации -->
<p><a class="image-popup" title="Это описание изображения" href="images/images-magnific-popup/Img_1_b.jpg">
 <img src="images/images-magnific-popup/img_1_s.jpg" alt="" /></a>
</p>

<!-- С анимацией -->
<p><a class="image-popup-zoom" title="Это описание изображения с анимацией" href="images/images-magnific-popup/Img_2_b.jpg">
 <img src="images/images-magnific-popup/img_2_s.jpg" alt="" /></a>
</p>
// Type Image - картинка без анимации
 $('.image-popup').magnificPopup({
 type: 'image'
 });

// Type Image Zoom - картинка с анимацией
 $('.image-popup-zoom').magnificPopup({
 type: 'image',
 zoom: {
     enabled: true,
     duration: 300 // продолжительность анимации. Не меняйте данный параметр также и в CSS
 }
 });

Галерея картинок — Gallery

<div class="popup-gallery">
 <a href="images/images-magnific-popup/gallery/img_1_b.jpg" rel="alternate"><img src="images/images-magnific-popup/gallery/img_1_s.jpg" alt="" /></a>
 <a href="images/images-magnific-popup/gallery/img_2_b.jpg" rel="alternate"><img src="images/images-magnific-popup/gallery/img_2_s.jpg" alt="" /></a>
 <a href="images/images-magnific-popup/gallery/img_3_b.jpg" rel="alternate"><img src="images/images-magnific-popup/gallery/img_3_s.jpg" alt="" /></a>
 <a href="images/images-magnific-popup/gallery/img_4_b.jpg" rel="alternate"><img src="images/images-magnific-popup/gallery/img_4_s.jpg" alt="" /></a>
</div>

инициализация будет следующей:

// Тип Image - галерея картинок
 $('.popup-gallery').magnificPopup({
 delegate: 'a',
 type: 'image',
 tLoading: 'Загрузка изображения #%curr%...',
 gallery: {
     enabled: true,
     navigateByImgClick: true,
     preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
 }
 });

Тип контента — Iframe

Теперь давайте откроем в модальном окне видео Youtube.

<a class="popup-youtube" rel="nofollow" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Открыть видео Youtube</a>

Код инициализации будет следующим:

// Type Iframe - видео Youtube (или Vimeo), карты Гугл или другой контент в iframe 
 $('.popup-youtube').magnificPopup({ 
    type: 'iframe' 
 });

Заметьте, что адрес видео берется из адресной строки браузера, а не ссылка поделиться в Youtube. Также, если вы знаете, можно запретить в конце видео Youtube показ похожих видеороликов. Но для этого нужно добавить к адресу в коде iframe ролика параметр — ?rel=0. Но как это сделать, ведь мы копируем адрес из адресной строки? Так скажу вам, что API Magnific Popup позволяет нам настраивать код так, как нам нужно. Я поковырялся в документации и немного дополнил код инциализации.

// Type Iframe - видео Youtube (или Vimeo), карты Гугл или другой контент в iframe
 $('.popup-youtube').magnificPopup({
 type: 'iframe',
 iframe: {
 patterns: {
   youtube: {
     index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).
     id: 'v=', // String that splits URL in a two parts, second part should be %id%
     // Or null - full URL will be returned
     // Or a function that should return %id%, for example:
     // id: function(url) { return 'parsed id'; }
     src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0' // Урл, который берется из кода iframe
   }
 }
 }
 });

Исходя из данного кода, видно, что мы создаем свой шаблон видео Youtube. В параметре «src» в конце добавляем параметр «rel=0» и все, теперь в конце видео не будет похожих роликов. Можете промотать видео до конца и посмотреть.

Тип — Ajax

В модальных окнах Magnific можно подгружать контент асинхронно, посредством технологии Ajax. Например, на демо-сайте я загружу страницу какой либо статьи в модальном окне. Демо-сайт работает на Joomla.

<a class="simple-ajax-popup" href="/novosti/5-novost-1.html?tmpl=component>Загрузить страницу в мод. окне Ajax</a>

Это обычная ссылка на страницу статьи. Это всего лишь пример и я ставлю адрес статьи со своего сайта. Чтобы показать только контент, отбросив ненужные блоки (шапка сайта, сайдбар, подвал и т.д.) я добавлю в конец адреса параметр — ?tmpl=component.

Код инициализации:

// Тип Ajax - загрузка контента в модальном окне
$('.simple-ajax-popup').magnificPopup({
    type: 'ajax'
 });
Важное замечание! Загружаемый контент должен быть обернут блочными тегами так, чтобы был только один корневой элемент. Иначе, ваше окно будет закрываться по клику в любой его части.

Форма в модальном окне

В данном случае форма будет загружаться с типом контента «inline«. В этом случае вы сможете спросить — а чем она отличается от первого варианта, где мы показывали просто текст? Ведь вместо теста мы можем вставить код формы. Да, все правильно, вместо текста будет просто код формы с дополнительной опцией в инициализации. Данная опция будет ставить фокус на определенном поле при загрузке формы. А это в свою очередь удобство. Лично мне нравится, что при открытии, скажем, формы поиска фокус сразу идет на поле ввода ключевого запроса.

// Форма в модальном окне с фокусом на поле Имя
$('.popup-with-form').magnificPopup({
   type: 'inline',
   focus: '#name'
});
<a href="#form-popup" class="popup-with-form">Открыть форму в модальном окне</a>

<div id="form-popup" class="white-popup mfp-hide">
 <form action="#">
 <div><input id="name" class="inputbox" type="text" placeholder="Ваше имя" /></div>
 <div><input id="email" class="inputbox" type="email" placeholder="Ваше e-mail" /></div>
 <div><textarea name="mess" id="mess" class="inputbox" cols="30" rows="10" placeholder="Ваше сообщение"></textarea></div>
 <div><input type="submit" value="Отправить"></div>
 </form>
</div>

В данном случае при открытии формы фокус срабатывает на поле с id=»name» — Имя.

Диалоговые модальные окна

Чем данное окно отличается от предыдущих с типом inline? Практически ничем, за исключением того, что данное окно не закрывается по клику на затемненной области. Также скрыта кнопочка с крестиком. Для закрытия мы будет использовать другой объект. Таким образом можно создавать диалоговые окна на сайте.

Читайте также:  CSS анимация на сайте посредством библиотеки Animate.css
// Диалоговое окно
$('.popup-modal').magnificPopup({
    type: 'inline',
    preloader: false,
    modal: true
});
$(document).on('click', '.popup-modal-dismiss', function(e) {
    e.preventDefault();
    $.magnificPopup.close();
});

Здесь, как видим, используются дополнительные опции. О некоторых из них мы поговорим ниже.

<a class=»popup-modal» href=»#test-modal»>Открыть модальное окно</a>

<div id="test-modal" class="white-popup mfp-hide">
   <p style="text-align: right;"><a class="popup-modal-dismiss" href="#">Закрыть</a></p>
   <h3>Диалоговое окно</h3>
   <p>You won't be able to dismiss this by usual means (escape or
   click button), but you can close it programatically based on
   user choices or actions.</p> 
</div>

Опции плагина

Теперь давайте рассмотрим некоторые опции плагина Magnific Popup.

mainClass

Тип — string (строка)
По умолчанию — empty

Данной опцией мы можем задать класс общему родительскому блоку всплываемого контента. Исходя из этого мы можем задать свое оформление конкретному окну. Также класс присваивается и блоку с затемненным фоном. Опять таки, можем задать цвет не черный, а скажем, белый. Здесь уже ваш полет фантазии расширяется.

Также, отталкиваясь от присваиваемого класса, мы можем задавать различные эффекты всплывания окна. Делается это все на CSS. Давайте зададим анимацию первому модальному окну, рассмотренного в данной статье выше. Это окно с текстом.

Создадим отдельную инициализацию с возможностью анимации.

// Модальное окно с эффектом ZoomIn
 $('.popup-with-zoom-anim').magnificPopup({
 type: 'inline',
 removalDelay: 300,
 mainClass: 'my-mfp-zoom-in'
 });

Создадим правила анимации в CSS

/**
 * Fade-zoom animation for first dialog
 **/
/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
 opacity: 0;
 -webkit-transition: all 0.2s ease-in-out; 
 -moz-transition: all 0.2s ease-in-out; 
 -o-transition: all 0.2s ease-in-out; 
 transition: all 0.2s ease-in-out; 
 -webkit-transform: scale(0.8); 
 -moz-transform: scale(0.8); 
 -ms-transform: scale(0.8); 
 -o-transform: scale(0.8); 
 transform: scale(0.8); 
}
/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
 opacity: 1;
 -webkit-transform: scale(1); 
 -moz-transform: scale(1); 
 -ms-transform: scale(1); 
 -o-transform: scale(1); 
 transform: scale(1); 
}
/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
 -webkit-transform: scale(0.8); 
 -moz-transform: scale(0.8); 
 -ms-transform: scale(0.8); 
 -o-transform: scale(0.8); 
 transform: scale(0.8);
 opacity: 0;
}
/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
 opacity: 0;
 -webkit-transition: opacity 0.3s ease-out; 
 -moz-transition: opacity 0.3s ease-out; 
 -o-transition: opacity 0.3s ease-out; 
 transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
 opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
 opacity: 0;
}
/**
 * Fade-move animation for second dialog
 */
/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
 opacity: 0;
 -webkit-transition: all 0.2s ease-out;
 -moz-transition: all 0.2s ease-out;
 -o-transition: all 0.2s ease-out;
 transition: all 0.2s ease-out;
 -webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
 -moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
 -ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
 -o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
 transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
 opacity: 1;
 -webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
 -moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
 -ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
 -o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
 transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
 opacity: 0;
 -webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
 -moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
 -ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
 -o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
 transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
}
/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
 opacity: 0;
 -webkit-transition: opacity 0.3s ease-out; 
 -moz-transition: opacity 0.3s ease-out; 
 -o-transition: opacity 0.3s ease-out; 
 transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
 opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
 opacity: 0;
}
<p><a class="popup-with-zoom-anim" href="#text-popup-anim">Вызвать окно с текстом</a></p>
 
<div id="text-popup-anim" class="zoom-anim-dialog white-popup mfp-hide">
<p>С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет оценить значение направлений прогрессивного развития.</p>
</div>

Если заметите в коде инициализации мы использовали дополнительную опцию — removalDelay. Без данной опции анимация срабатывать не будет.

removalDelay

Тип — integer
По умолчанию — 0

Задержка удаления Popup из DOM. Значение соответствует миллисекундам.

preloader

Тип — boolean
По умолчанию — true

Индикатор текущего состояния. По умолчанию при загрузке контента выводится надпись — Loading… Если опция включена, она всегда присутствует в DOM, меняется только текст внутри него. В зависимости от состояния у блока меняется класс. В CSS мы можем задать разное оформление. Вот список классов:

/* Процесс загрузки */
.mfp-s-loading { }

/* Удачная загрузка */
.mfp-s-ready { }

/* Загрузка с ошибкой */
.mfp-s-error { }

closeBtnInside

Тип — boolean
По умолчанию — true

Если включено, скрипт добавляет кнопку с крестиком в контейнер popup окна. Если вам нужно, чтобы она была за пределами модального окна, то достаточно передать значение — false

closeBtnInside: false

closeOnBgClick

Тип — boolean
По умолчанию — true

Закрывает модальное окно по клику на затемненной области.

alignTop

Тип — boolean
По умолчанию — false

Если включено, выравнивает окно по верхнему краю, а не по центру. Выравнивание работает с помощью добавления класса — mfp-align-top.

disableOn

Тип — integer
По умолчанию — null

Отключает действие, если максимальная ширина окна браузера равна заданному значению. Может принимать и функцию, которая должна вернуть правду или ложь.

disableOn: 768
или
disableOn: function() {
 if( $(window).width() < 600 ) {
 return false;
 }
 return true;
}

Это далеко не все опции плагина. Я выбрал лишь некоторые из них, которые сам использую. Если брать все во внимание, то статья получится слишком большой. Вы можете расширить этот список самостоятельно, если заглянете в документацию на официальном сайте.

Я надеюсь вы поняли каковы возможности Magnific Popup. Лично я сам еще не все возможности данного плагина изведал. Даже сейчас по ходу написания данной статьи я открыл для себя новые возможности Magnific.

Напоследок  хочу дать вам ссылку на Codepen автора с некоторыми примерами Magnific Popap — http://codepen.io/collection/nLcqo/. Все, на этом и завершу.

Надеюсь вам данная статья пригодится. Всем спасибо за внимание. На связи был Заур Магомедов. До встречи в следующих постах!

Пост был обновлен: Янв 07, 2017

Заур Магомедов
Заур Магомедов

Верстальщик с огромным опытом работы. Занимаюсь созданием сайтов с 2009 года. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (7 оценок, среднее: 4,14 из 5)
Загрузка...

Проверка орфографии

Система Orphus

34 комментариев к статье "Создаем всплывающие окна для сайта — Magnific Popup"

  • Виктория Фев 08, 2017 в 9:00

    Добрый день! я все сделала как было написано на этом сайте как установить и вставить, использовала тип Gallery и все равно не получилось. Помогите

    • Заур Магомедов
      Заур Магомедов Фев 08, 2017 в 12:20

      Ну скорее всего не все сделали, иначе все работало. А что конкретно не получается, какая ошибка?

  • Владимир Фев 06, 2017 в 15:53

    А у меня не работает, вот просто ни на что не реагирует. Прописано все по инструкции, но реакции нет. И в консоли реакции нет. Как будто и не существует его вовсе на моем сайте! Как такое может быть?

    • Заур Магомедов
      Заур Магомедов Фев 06, 2017 в 18:28

      Селектор правильно указали в коде вызова плагина?

  • Сашка Фев 01, 2017 в 19:24

    Не знаю почему, но окно открывается, а видео в нем нет. Просто черный квадрат. Может конфликт с PrettyPhoto? Плагин инициализации брал или на прямую с вашего сайта , или прописывал согласно уроку у себя перед /body. Никак не работает.

    • Заур Магомедов
      Заур Магомедов Фев 02, 2017 в 1:20

      Видео Youtube? Урл правильный вводите?

      • Сашка Фев 02, 2017 в 11:17

        Я тупо взял ваш адрес видео…

      • Сашка Фев 02, 2017 в 11:26

        Да. Видео Youtube.Может быть у вас случайно есть ещё какие-то уроки по всплывающим окнам?…Может у меня конфликт скриптов?

        • Заур Магомедов
          Заур Магомедов Фев 02, 2017 в 11:44

          Дайте ссылку на сайт, я гляну.

          • Сашка Фев 02, 2017 в 13:25

            К сожалению он на локалке пока…((Я использую prettyPhoto. но мне не нравится то, как он адаптирует под мобильную версию и скорость не нравится…не знаю может какой то другой скрипт воткну.

            • Заур Магомедов
              Заур Магомедов Фев 02, 2017 в 14:32

              Вы как галерею хотите магнифик использовать? Если, как галерею, то обратите внимание на эту галерею — http://www.balbooa.com/joomla-gallery. Она на Joomla, есть и бесплатная версия.

              • Сашка Фев 02, 2017 в 14:39

                Мне этот скрипт нужен был с единственной целью- вывод ВИДЕО в модальном окне. В общем я по быстрому «натянул» страницу с видео на CMS MODx и посмотрел работу скрипта на хостинге…окно заработало. Возможно были проблемы с файлом compressed.js (в нем одном были сжаты все мои скрипты) я переподключил на хостинге скрипты уже по нормальному без компрессии и вроде все работает)) Даже не знаю с чем был связан баг..Спасибо большое за помощь!

                • Заур Магомедов
                  Заур Магомедов Фев 02, 2017 в 14:41

                  Не за что

  • Игорь Николаев Дек 19, 2016 в 22:13

    На официальном сайте, ссылку на который вы дали, про плагин для WP написано «Magnific WordPress Plugin is under development!»

    • Заур Магомедов
      Заур Магомедов Дек 19, 2016 в 23:27

      Может обновление какое выкатывает. Подождем, увидим…

  • Александр Бет Авг 27, 2016 в 3:27

    Приветствую, Заур! Спасибо за подробную информацию по такому полезному и технически грамотному плагину! Ваш блог — супер.

    • Заур Магомедов
      Заур Магомедов Авг 27, 2016 в 11:20

      Спасибо!

  • issue Авг 24, 2016 в 14:36

    Notepade++ или Sublime Text» ? этож динозавры без автоматизации…
    brackets лучше: предпросмотр PSD-шек прямо в редакторе с молниеносным вычислением отступов, предпросмотр цветов css и html(допустим все H1) в коде, масса фишек, которых нет в саблайме.

    A у Вас есть аккаунт на гитхабе? Если нет, где храните нужное и как деплоите? Через синхронизацию по ftp в редакторе?

    • Заур Магомедов
      Заур Магомедов Авг 24, 2016 в 15:59

      Я пользуюсь Sublime, пока доволен. Про Brackets не слышал ничего. Программа платная? Вообще до недавних пор пользовался Adobe Assets, там была вишка Extract — разбивает макет по слоям и можно тоже как раз отступы вычислять, предпросмотр всех цветов, получить сразу готовый css-код и т.д. Одно время прикрыли лавочку бесплатную, теперь вошел смотрю (кстати Photoshop у меня лицензионный) — опять есть. Непонятно че за политика у них.
      Надо будет попробовать ваш редактор.

      Аккаунт на гитхабе есть, правда там только пока один репозиторий. Недавно начал пользоваться гитхаб гистами + плагин для Sublime — очень удобно. Гисты — это наработки, кусочки кода, которыми часто пользуюсь. Вот ссылка — https://gist.github.com/zaurmag

      Также использую Evernote для хранения всех своих заметок. А для хранения задач использую Wunderlist. Их фишка в том, что есть синхронизация, а это для меня самое главное.

  • Роман Авг 23, 2016 в 19:15

    Когда нашел статью, обрадовался, что в ней будет описан способ подключения Magnific Popup плагина к Joomla-сайту. Но,к сожалению, в статье не нашел ответа на этот вопрос. Разочарован. Демо ссылки ведут на Joomla-сайт, а как сделано подключение — ни слова. Всё остальное можно было и так прочитать в оригинальной документации на плагин.

    • Заур Магомедов
      Заур Магомедов Авг 23, 2016 в 19:25

      Как о подключении ни слова? Вы внимательно читали статью?

      Подключаем файл плагина и файл стилей Magnific Popup.

      Ищите эту строку и читайте…

      Подключается одинаково, что для joomla сайта, что для wordpress сайта, что html сайта, что для всех остальных.

      • Роман Авг 23, 2016 в 19:45

        Всё написано таким образом, как будто речь идёт о вставке плагина в html-сайт, а не в Joomla-сайт. Это же касается и всех остальных фрагментов html-кода и js-кода, которые встречаются в статье. Применительно к Joomla информации нет. Если Вы ориентируете статью на широкий круг читателей, то следует учитывать, что некоторые вещи, которые являются для Вас очевидными, могут для всех таковыми не являться.
        Нет ответа на вопрос: как подключить Magnific Popup к Joomla-сайту, если нет стандартного расширения для Joomla (такого как стандартный плагин для WordPress’а)?

        • Заур Магомедов
          Заур Магомедов Авг 23, 2016 в 19:54

          В данной статье не о Joomla идет речь. А какие проблемы в joomla подключить? Т.е. вы хотите, чтобы я в данной статье еще и затронул тему подключения стилей и скриптов в Joomla? Это какая большая статья получится можете представить? Извините, но это отдельная статья. И вообще делается это проще простого — открываете папку вашего шаблона -> index.php и в секцию head вставляете подключение стилей Magnific и сам плагин. В 3-й Joomla jQuery уже подключена, если не подключена, то подключаете и ее. Вот это кратко. Напишу статью отдельно — Как подключать стили скрипты в Joomla.

          • Роман Авг 24, 2016 в 12:12

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

            • Заур Магомедов
              Заур Магомедов Авг 24, 2016 в 12:21

              Статья не только для вас пишется. Вам одно непонятно, другому другое будет непонятно, третьему — третье и т.д. А вам хочу сказать, если вы занимаетесь этим, то должны знать как подключаются плагины jQuery и куда вставляются коды инициализации. Я же писал в статье, что плагин Magnific Popup подключается так же, как и любой другой jQuery плагин.

              Код инициализации по идее можете вставить в любой скрипт, обрамив его:

              jQuery(document).ready(function($) {
              
              // Здесь код инициализации
              
              ...
              
              }
              

              Обычно я создаю отдельный файл init.js и добавляю все инициализации в него. Ну и естественно подключаем его в файле шаблона index.php.

              • Роман Авг 24, 2016 в 19:32

                Нашлось решение:

                $('.gallery').each(function() { // the containers for all your galleries
                    $(this).magnificPopup({
                        delegate: 'a', // the selector for gallery item
                        type: 'image',
                        gallery: {
                          enabled:true
                        }
                    });
                });
                • Заур Магомедов
                  Заур Магомедов Авг 24, 2016 в 19:40

                  Да, можно и так. Где нашли решение?

                • Роман Авг 24, 2016 в 20:04

                  В документации

            • Роман Авг 24, 2016 в 15:08

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

              • Заур Магомедов
                Заур Магомедов Авг 24, 2016 в 16:06

                По анимациям я вам скажу — здесь только ограничено вашими фантазиями. Там можно свои анимации писать в CSS. Я вот свою написал — mfp-scale. Добавляю данный класс и все работает как нужно. Вот можете пример посмотреть — http://fashioncaramel.ru/ — нажмите на Вход/регистрация.

                По остальным возможностям разбираться надо. А следующая статья будет посвящена как раз правильному подключению скриптов в Joomla и WordPress. Это надо сразу усвоить, потом переходить к изучению jQuery библиотек.

              • Роман Авг 24, 2016 в 17:27

                Действительно, красиво окошко всплывает.
                А я вот нашёл один «минус», который не смог обойти. На одной странице не получается разделить две и более галерей. Несмотря на то, что они находятся в разных контейнерах, при листании всё равно показывает сквозную нумерацию и все фотографии из всех галерей. Если у Вас возникнет такой же вопрос, и с ним получится разобраться, поделитесь, пожалуйста.

                • Заур Магомедов
                  Заур Магомедов Авг 24, 2016 в 18:39

                  Если у вас на странице несколько галерей, то создайте разные контейнеры и разные инициализации, т.е. для каждого контейнера своя инциализация плагина.

  • Вадим Авг 22, 2016 в 17:31

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

    • Заур Магомедов
      Заур Магомедов Авг 22, 2016 в 18:56

      Всплывающие окна — это элемент юзабилити. Например, зачем переходить и загружать страницу авторизации/регистрации, когда ее можно быстро показать в модальном окне, кликнув по кнопке. У меня на блоге тоже пока модалок нет, но я скорее всего сделаю форму обратной связи в модальном окне.

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]