Если данный туториал не то, что Вы искали, у Вас все еще остались вопросы или предложения - дайте нам знать. Пожалуйста, помогите нам обслуживать Вас лучше!

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

Новые шаблоны

JS Animated. Как применить плагин lightbox jQuery «Magnific Popup»

Данный туториал покажет, как применить плагин lightbox jQuery Magnific Popup в шаблоне JS Animated.

JS Animated. Как применить плагин lightbox jQuery «Magnific Popup»

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

  1. Скачайте файл Magnific-Popup-master.zip по ссылке https://github.com/dimsemenov/Magnific-Popup  на компьютер и разархивируйте его.

    js_animated_jquery_magnific_popup_lightbox_plugin_implementing_1

  2. Скопируйте папку dist и вставьте в папку site шаблона.

    js_animated_jquery_magnific_popup_lightbox_plugin_implementing_2

  3. Откройте файл .html с картинкой, на которую необходимо применить плагин и при помощи DreamWeaver добавьте библиотеки и таблицу стилей в тег <head> :
    <!-- Magnific Popup core CSS file -->
      <link rel="stylesheet" href="./dist/magnific-popup.css">
    
    <!-- Magnific Popup core CSS file --> 
      <link rel="stylesheet" href="./dist/magnific-popup.css"> 
    
    <!-- Magnific Popup core JS file --> 
      <script src="./dist/jquery.magnific-popup.js"></script>
    

    js_animated_jquery_magnific_popup_lightbox_plugin_implementing_3

  4. Найдите строку с картинкой, например:
  5. <img src="images/image_small.jpg" alt="" />
    
  6. Отредактируйте следующим образом
  7. <a class="image-popup-vertical-fit" href="images/image_big.jpg" title="Title">
        <img src="images/image_small.jpg">
    </a>
    

    js_animated_jquery_magnific_popup_lightbox_plugin_implementing_4

  8. В папке images должны находиться файлы image_big.jpg и image_small.jpg соответственно.
  9. js_animated_jquery_magnific_popup_lightbox_plugin_implementing_5

  10. Чтобы инициализировать выплывающее окно, добавьте данный код в файл .html после закрывающего тега </head> или в футер (перед закрывающим тегом </body>:
  11. <script>
    $(document).ready(function() {
     
        $('.image-popup-vertical-fit').magnificPopup({
            type: 'image',
            closeOnContentClick: true,
            mainClass: 'mfp-img-mobile',
            image: {
                verticalFit: true
            }
             
        });
     
    });
    </script>
    

    js_animated_jquery_magnific_popup_lightbox_plugin_implementing_6

  12. Сохраните изменения и откройте страницу в браузере: изображение должно появляться lightbox с заголовком. Для активации плагина, сайт должен находиться на удаленном/локальном сервере.

js_animated_jquery_magnific_popup_lightbox_plugin_implementing_7

Более детальную информацию можно найти в официальном руководстве: http://dimsemenov.com/plugins/magnific-popup/documentation.html#initializing_popup

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

JS Animated. Как применить плагин lightbox jQuery «Magnific Popup»