imitronov

imitronov

Кто я?

Веб разработчик. Работаю с WordPress, 1C-Bitrix, modX, OctoberCMS. Делаю обзоры онлайн сервисов и малоизвестных CMS.


О чем я пишу


Свежие записи

Magnific Popup на русском

Используем на сайте Magnific Popup для фотогалереи переведенный на русский язык

Magnific Popup - один из популярных JavaScript плагинов. Предназначен для создания popup окон любых типов (информационных, с формами обратной связи, фотогалерей, видеопроигрывателей). В данном примере приведен код отвечающий за работу фотогалереи.

Требования к странице

  1. Подключенная библиотека jQuery
  2. Подключенный плагин Magnific Popup (js и css файлы)
  3. Правильная разметка html

Пример HTML разметки

<div class="popup-gallery">

    <!-- gallery item -->
    <a href="http://placehold.it/1600x1200" title="Название фото #1">
        <img src="http://placehold.it/300x300">
    </a>
    <!-- /gallery item -->

    <!-- gallery item -->
    <a href="http://placehold.it/1600x1200" title="Название фото #2">
        <img src="http://placehold.it/300x300">
    </a>
    <!-- /gallery item -->

</div>

Сам код вызова Magnific Popup на русском языке

$(document).ready(function(){
    $('.popup-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        tLoading: 'Загрузка фотографии #%curr%...',
        tClose: 'Закрыть (Esc)',
        mainClass: 'mfp-img-mobile',
        gallery: {
            tPrev: 'Предыдущее фото (Стрелочка влево)',
            tNext: 'Следующее фото (Стрелочка вправо)',
            tCounter: 'Фото %curr% из %total%',
            enabled: true,
            navigateByImgClick: true,
            preload: [0,1]
        },
        image: {
            tError: 'Не удалось загрузить <a href="%url%">фотографию #%curr%</a>.',
            titleSrc: function(item) {
                return item.el.attr('title') + '<small>Фотогалерея</small>';
            }
        },
        ajax: {
            tError: 'Не удалось загрузить <a href="%url%">фотографию #%curr%</a>.'
        }
    });
});