Fancybox api: fancybox3 · Documentation

jQuery — Занимательная веб-картография

На своем блоге я уже рассказывал о том, как вывести содержимое CSV-файла на Яндекс.Карту. В этой заметке я покажу как тоже самое сделать несколькими способами для API Яндекс.Карт 2.х.

В свое время я на страницах блога писал о том, как вывести Яндекс.Карту в модальном окне, используя плагин FancyBox для javascript-библиотеки jQuery., смотрите заметку. В этот раз я хочу рассказать, как тоже самое можно сделать, используя API Яндекс.Карт 2.х и плагина FancyBox v2.

Продолжаю рассказ о том, как можно организовать добавление меток на карту пользователями, используя API Яндекс.Карт v2.x. В этой части я рассмотрю возможность сохранения добавленных меток в базу данных MySQL, с последующим выводом на карту. С начала создадим в базе данных таблицу ymapapiv2_markers для хранения параметров меток.

На страницах своего блога я не раз писал о том, как можно организовать добавление меток на карту пользователями. В этой заметке я начну рассказ о том, как это можно сделать используя возможности API Яндекс.Карт v2.x. Начну с реализации добавления меток, а в последующих заметках расскажу о сохранении полученной информации в базе данных и вывода ее… Читать далее »

Существуют различные готовые решения для использования API Яндекс.Карт в CMS Joomla, их Вы можете успешно использовать. Но иногда нужно просто встроить какую-либо карту в статью Joomla не используя сложных расширений. В этой заметке я расскажу об одном из решений данной проблемы.

На своем блоге, я уже рассматривал пример «Создание карты на сайте с адресами магазинов, с использованием API Яндекс.Карт». Но та версия была для API Яндекс.Карт 1.x. В этой заметке я расскажу как можно реализовать данный пример, с использованием API Яндекс.Карт версии 2.х.

На страницах своего блога, я уже рассказывал на примере, об использовании связки jQuery, JSON и API Google Maps v3, смотрите заметку: «Пример совместного использования Google Maps API, JSON и jQuery». Но, тот пример слишком сложный для понимания, особенно новичкам. В этой заметке я покажу, как можно использовать jQuery и JSON в месте с Google Maps… Читать далее »

В этой заметке я расскажу о том, как можно реализовать интерактивный сервис о кафе с использованием Google Maps API, jQuery и данных в формате JSON. Пример работы можно увидеть здесь.

Иногда, при разработке картографических сервисов, возникает необходимость вывести Яндекс.Карту во всплывающем (модальном) окне. В этой заметке я покажу как это сделать, используя плагин FancyBox для javascript-библиотеки jQuery.

Вам наверно известно о существовании электронного справочника по 134 городам России и 2 городам Украины (Одесса и Ильичёвск) 2ГИС (ДубльГИС). Сообщаю интересную новость для разработчиков — теперь любой из Вас может использовать данные 2ГИС совершенно бесплатно через справочное API 2ГИС. Данные представляют собой подробную информацию по каждой организации в каждом городе — начиная от названия… Читать далее »

Как сделать увеличение изображения в fancybox

Fancybox — весьма современный и удобный скрипт для показа изображений и всего прочего. Но часто изображение в окне оказывается мелким (например — документ) и его неудобно рассматривать.

Сделаем так, что бы по клику на картинку она увеличивалась в два раза, а по клику на увеличенном изображении — уменьшалась до исходных размеров.

Идея проста: после появления окна fancybox (событие afterShow), навесим обработчик события click на изображение внутри этого окна (img.fancybox-image). В этом обработчике будем менять размеры изображения и двигать fancybox так, что бы он оставался всегда по середине экрана. А для пущей наглядности — поменяем курсор картинки на zoom-in/zoom-out.

Получается так:

$('a.gallery1').fancybox({
    afterShow: function () {
                // вначале картинка маленькая - назначим курсор zoom-in
                $("img.fancybox-image").css('cursor', 'zoom-in');
                // уменьшим области листания, чтоб не мешали нашему курсору
                $(".fancybox-nav").css('width', '15%');
                $("img.fancybox-image").click(function () {
                  var h = $(this).height();
                  var w = $(this).width();
                  if ($(this).hasClass('enlarged')) {
                    // картинка уже увеличена. уменьшить в два раза. или не в два?  
                    h = Math.round(h / 2); w = Math.round(w/2);
                    $(this).removeClass('enlarged');
                    $(this).css('cursor', 'zoom-in');
                  } else {
                    // еще не увеличена. увеличить в два раза. 
                    h = h*2; w = w*2;
                    $(this).addClass('enlarged');
                    $(this).css('max-height', h + 'px');
                    $(this).css('cursor', 'zoom-out');
                  }
                  // меняем размеры картинки
                  $(this).css('width', w + 'px');
                  $(this).css('height', h + 'px');
                  $(this).css('max-width', w + 'px');
                  $(this).css('max-height', h + 'px');
                  // меняем размеры окна fancybox
                  $('div.fancybox-wrap').css('width', w + 30 + 'px');
                  $('div.fancybox-wrap').css('height', h + 30 + 'px');
                  $('div.fancybox-skin').css('height', h + 'px');
                  // двигаем fancybox так, чтоб он оставался по центру
                  $('div.fancybox-wrap').css('left', Math.round(($(document).width()-w)/2));
                });
    }
});

И все дела.

Разумеется, при генерации кода в CMS надо подумать о том, чтоб размер картинки оказался достаточным для увеличенного формата.

Как определить из скрипта, что fancybox popup уже открыт?

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

К сожалению, в официальной документации к API fancуbox нет упоминаний о методе, позволяющем определить — открыто ли всплывающее окно в текущий момент. Явное упущение разработчиков.

Но гарантированно проверить этот факт не сложно.

Достаточно посмотреть добавлен ли в <body> css класс fancybox-active или нет:

if ($(‘body’).hasClass(‘fancybox-active’)) { // .. окно активно } else { // .. открытых окон fancybox в текущий момент нет }

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

Данная запись опубликована в 13.12.2018 21:07 и размещена в jQuery. Вы можете перейти в конец страницы и оставить ваш комментарий.

Мало букафф? Читайте есчо !

Перебор атрибутов HTML элемента в javascript

Февраль 17, 2016 г.

За использованием библиотеки jQuery как то забываешь о базовых свойствах и методах DOM  в javascript. Как получить весь набор аттрибутов HTML элемента? Получим ссылку на элемент HTML документа каким либо образом: [crayon-6075b54d86c42751823154/] …

Критическая уязвимость в популярном плагине FancyBox for WordPress

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

Сайт содержит вредоносный код

Начали исследовать, смотреть. Google Webmaster Tools показал кусок JavaScript кода который вставляет элемент подгрузки сторонней страницы — iframe. Код выглядит примерно вот так:

if (navigator.userAgent.match(/ msie /i)) { doc​ument. write ('...') ...

Домен замечен был 203koko в еврозоне, но могут быть и другие. Вредоносного кода сразу найти не удалось, сам сайт ничего не показывал, как будто ничего не было. «Поковырявшись» еще несколько часов пытаясь вызвать показ букашки, был замечен свежая публикация на форумах WordPress.org. Узнав заветный «203koko» стали собираться всё больше и больше людей, попавших в схожую ситуацию.

Плагин FancyBox for WordPress

Спустя час обсуждения стало понятно, что объединяет нас один общий плагин под названием FancyBox for WordPress. Плагин выводит фотогалереи и другой контент в модальных окнах. Очень популярный плагин, более 500,000 скачиваний (+ 1000 скачиваний в неделю), но очень старый.

Посмотрев на логи кэшируемых страниц за последние сутки, был найден нужный кусок кода внутри вывода скриптов плагина FancyBox for WordPress, и стало понятно, что действительно FancyBox for WordPress замешан во всем этом.

Функция вывода имеет опцию дополнительного вывода данных из базы без какой-либо фильтрации, но в базе данных вредоносного кода не было.

Было решено тогда разобраться, как он туда мог попасть, и вскоре мы обнаружили уязвимость в функции сохранения настроек. Любой мог просто сохранить опции для плагина FancyBox for WordPress, включая опцию дополнительного вывода и содержания. Именно так туда и попал вредоносный код, а спустя некоторое время исчез. Возможно атакующие потихоньку лишь испытывали воды этой уязвимости прежде чем массово эксплуатировать.

Данный вид атаки называется хранимым межсайтовым скриптингом (Persistent XSS). Уязвимость является одной из самых распространенных.

Если у вас на сайтах используется FancyBox for WordPress (fancybox-for-wordpress) немедленно деактивируйте его. Плагин был скрыт из директории WordPress.org. Заметьте, что плагин не обновлялся 3 года, и хоть исправление уже существует и будет вскоре опубликовано, мы все равно не советуем продолжать пользоваться данным плагином.

Обновление: автор выложил два обновления к плагину FancyBox for WordPress. Первое (3.0.3) устраняет уязвимость в плагине, и второе (3.0.4) переименовывает ранее уязвимую опцию, что позволяет скрыть вставленный вредоносный код на уже зараженных сайтах. Если вы используете FancyBox for WordPress, рекомендуем обновиться до последней версии немедленно. Сделать это можно в панели администрирования WordPress в разделе Консоль → Обновления, или скачать новый дистрибутив плагина с сайта WordPress.org.

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

Чтобы обезопасить себя не забудьте скачать нашу бесплатную электронную книгу о безопасности в WordPress.

Будьте бдительными и удачи вам!

Fancybox — Альтернатива необычному лайтбоксу jQuery

Пример настройки Fancybox API · GitHub

Мгновенно делитесь кодом, заметками и фрагментами.

Пример настройки Fancybox API

Галерея простых файловых API с лайтбоксами

  




{% assign pathArray = this.coverimage | расколоть: '/' %}
{% assign nPathArray = pathArray | размер | минус: 1%}

{% capture galleryPath%}
{% для p в pathArray%}
{% за исключением forloop.last%} / {{p}} {% endunless%}
{% endfor%}
{% endcapture%}

{% тип компонента: "api", ресурс: "Файловая система", папка: "{{galleryPath}}", collectionVariable: "galImages"%}
{% для элемента в galImages.items%}
    

          
    
{% endfor%}  

  

      
    
  {{this.name}}  
  

  
{% источник компонента: "Моя галерея", макет: "Список", ограничение: "999", тип: "модуль"%}  

Комментарии или вопросы? Перейдите на форум Treepl CMS, чтобы обсудить с сообществом.

Fancybox · Шаблон листинга каталога начальной загрузки Spaces

Узнайте, как использовать премиум-плагин Fancybox для создания фотогалереи

Начало работы

Мы приобрели расширенную лицензию на премиум-плагин Fancybox. Поэтому, если вы приобрели Spaces, вам не нужно будет платить за другую лицензию. Fancybox — отличный плагин для отображения фотогалереи, которую мы используем для страницы с описанием товара. Вот как вы можете начать его использовать:

Вам необходимо включить следующий файл таблицы стилей до окончания тега head :

Перед окончанием тега body необходимо включить следующий файл javascript:

Галерея изображений

Вот пример галереи изображений с атрибутами данных:

Дополнительные примеры и настройки

Дополнительные примеры использования и API опций см. На официальной странице Fancybox.

@ fancyapps / fancybox — npm

jQuery lightbox-скрипт для отображения изображений, видео и прочего. Сенсорный экран, отзывчивый и полностью настраиваемый.

См. Страницу проекта для документации и демонстрации.

Следите за обновлениями @thefancyapps.

Быстрый старт

1. Добавьте последние файлы jQuery и fancyBox

2.Создать ссылки

3. Наслаждайтесь!

Лицензия

fancyBox под лицензией GPLv3 для всех приложений с открытым исходным кодом. Коммерческая лицензия требуется для всех коммерческих приложений (включая сайты, темы и приложения, которые вы планируете продавать).

Подробнее о лицензии fancyBox.

Ошибки и запросы функций

Если вы обнаружите ошибку, сообщите об этом здесь, на Github.

Рекомендации для отчетов об ошибках:

1. Воспользуйтесь поиском по проблемам GitHub — проверьте, не сообщалось ли уже о проблеме.
2. Проверьте, устранена ли проблема — попробуйте воспроизвести ее, используя последнюю основную версию или ветку разработки в репозитории.
3. Изолируйте проблему — создайте сокращенный тестовый случай и живой пример.Вы можете использовать CodePen для форка любой демонстрации, найденной в документации, чтобы использовать ее в качестве шаблона.

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

Запросы на новые функции приветствуются. Пожалуйста, найдите существующие и используйте функцию «реакции» GitHub для голосования.

Пожалуйста, не используйте средство отслеживания проблем для личных запросов в службу поддержки — вместо этого используйте Stack Overflow (тег fancybox-3).

FancyBox против OWL Carousel

Документация «ARI Fancy Lightbox — плагин WordPress»

Введение

Используйте модный лайтбокс для отображения изображений из собственных галерей WordPress, фотографий, видео с YouTube, Vimeo, Dailymotion, Vine, сервисов Metacafe, ссылок на Google Maps, внешних страниц.

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

Функции или разделы, относящиеся только к версии «PRO», отмечены значком.

Давайте поиграемся с плагином и установим его.

Процесс покупки и планы подписки

Этот раздел только для PRO версии.«ARI Fancy Lightbox PRO» — это коммерческий плагин, и для получения доступа к нему требуется покупка подписки.

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

Чтобы приобрести плагин, выберите здесь подходящий тариф и нажмите кнопку «Купить». Вы будете перенаправлены на сайт «ARI Soft», где проверьте выбранный план и нажмите ссылку «ПРОВЕРИТЬ», зарегистрируйтесь (или войдите в систему, если у вас есть учетная запись на нашем сайте), после этого нажмите кнопку «Подтвердить заказ», чтобы подтвердить заказ, а затем нажмите «Щелкните здесь, чтобы завершить заказ» », и вы будете перенаправлены на сайт 2CheckOut.

Все платежи на нашем сайте обрабатываются платежным шлюзом 2CheckOut.Он принимает кредитные карты и платежи через PayPal. После оплаты вы будете перенаправлены на сайт «ARI Soft», получите электронное письмо с подтверждением и сможете загрузить плагин в личном кабинете.

Если опция PayPal недоступна на сайте 2CheckOut, измените валюту на «доллары США» или евро.

Установка

Расширение можно установить разными способами.

Предпочтительный способ бесплатной версии:

1. Войдите в админку вашего сайта WordPress и откройте страницу «Плагины → Добавить новый».
2. Введите «ARI Fancy Lightbox» в поле «Поиск подключаемых модулей» и выполните поиск подключаемого модуля.
3. Нажмите кнопку «Установить сейчас» для подключаемого модуля «ARI Fancy Lightbox».
4. Нажмите ссылку «Активировать» после успешной установки плагина.

Альтернативный способ №1 (желательно для версии):

1. Загрузите архив ari-fancy-lightbox.zip (или ari-fancy-lightbox-pro.zip для версии PRO) здесь.
2. Войдите в админку вашего сайта WordPress и откройте страницу «Плагины → Добавить новый».
3. Нажмите кнопку «Загрузить плагин», используйте кнопку «Обзор», чтобы выбрать загруженный архив с плагином, и нажмите кнопку «Установить сейчас».
4. Нажмите ссылку «Активировать» после успешной установки плагина.

Альтернативный способ №2:

1. Загрузите архив ari-fancy-lightbox.zip (или ari-fancy-lightbox-pro.zip для версии PRO) здесь.
2. Распакуйте его в папку на локальном компьютере.
3. Подключите свой сервер (на котором установлен WordPress) по FTP.
4. Скопируйте папку ari-fancy-lightbox из архива в папку [wordpress_folder] / wp-content / plugins на сервере.
5. Войдите в админку вашего сайта WordPress и откройте страницу «Плагины → Установленные плагины».
6. Щелкните ссылку «Активировать» для подключаемого модуля «ARI Fancy Lightbox», чтобы активировать его.

Когда плагин установлен и активирован, ссылка «ARI Fancy Lightbox» появится в главном меню для администраторов (если на вашем сайте WordPress не используется многосайтовый режим) или для суперадминистраторов (если включен многосайтовый режим).

Теперь откройте экран ARI Fancy Lightbox, чтобы настроить плагин.

Обновление

Расширение также можно обновить вручную, для этого загрузите последнюю версию расширения здесь, удалите предыдущую версию плагина и установите новую, как описано в разделе установки или войдите на свой сервер по FTP, удалите папку [wordpress_folder] / wp-content / plugins / ari-fancy-lightbox и скопируйте содержимое архива ari-fancy-lightbox.zip в [wordpress_folder] / wp-content / плагины .Версия

требует ключа API для включения автоматических обновлений. Для этого откройте страницу Личного кабинета и скопируйте «Ключ API».
После этого откройте вкладку «Обновить» на странице «ARI Fancy Lightbox» на бэкэнде вашего сайта WordPress и вставьте ключ API в параметр «Ключ API» и сохраните настройки.
Плагин будет проверять наличие обновлений каждые 2 часа и показывать уведомления о новых версиях.

Системные требования

Административная зона

Плагин добавляет пункт меню «ARI Fancy Lightbox» в главное меню административной части WordPress. По умолчанию плагин доступен для администраторов (если на вашем сайте WordPress не используется многосайтовый режим) или для суперадминистраторов (если включен многосайтовый режим).

Щелкните пункт меню, чтобы настроить плагин.

Область администрирования — ARI Fancy Lightbox

На этой странице настраиваются параметры плагина.

Нажмите кнопку «Сохранить изменения» внизу страницы, чтобы сохранить изменения после настройки всех параметров.

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

Параметры разделены следующими вкладками:

• Интеграция содержит параметры для настройки того, какие ссылки отображаются в лайтбоксе
• лайтбокс содержит параметры, которые используются для настройки настроек лайтбокса
• Поделиться содержит параметры, которые используются для настройки кнопки общего доступа
• Стиль содержит параметры для изменения параметров стиля (прозрачность, цвет фона и т. Д.)
• Advanced содержит расширенные параметры для точной настройки плагина
• Обновление введите ключ API для включения автообновлений

Вкладка «Интеграция»

См. Описание каждого параметра ниже:

Вкладка «Lightbox»

См. Описание каждого параметра ниже:

Вкладка «Поделиться»

См. Описание каждого параметра ниже:

Вкладка «Стиль»

См. Описание каждого параметра ниже:

Вкладка «Дополнительно»

См. Описание каждого параметра ниже:

Вкладка «Обновить»

См. Описание каждого параметра ниже:

Прочие ссылки

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

Как создать окно-заставку?

Плагин поддерживает возможность открывать лайтбокс с определенным контентом при загрузке страницы.Для этого пользователя следующий шорткод:

[fancybox_open] Этот контент будет отображаться в лайтбоксе [/ fancybox_open]

Также можно использовать шорткод в контенте, который должен отображаться в лайтбоксе:

[fancybox_open] Вставить короткий код: [/ fancybox_open]

При необходимости показать веб-страницу (видео с YouTube, Vimeo и т. Д.) используйте параметр url в теге [fancybox_open], чтобы указать URL-адрес контента, который нужно показать:

[fancybox_open url = "https://www.youtube.com/watch?v=WjoTuHPeSBY"] Лайтбокс можно открыть только один раз, для этого добавьте параметр mode = «once» в тег [fancybox_open] и определите уникальное значение для параметра key :

[fancybox_open url = "https: // www.youtube.com/watch?v=WjoTuHPeSBY "mode =" once "key =" welcome_video "]

Все параметры, которые можно использовать в теге [fancybox_open] в таблице ниже:

Как создавать ссылки с помощью шорткода?

Используйте шорткод [fancybox] , чтобы создать ссылку, которая будет открываться в лайтбоксе.Используйте параметр url , чтобы определить ссылку, которая будет загружена в лайтбокс. Например:

[fancybox url = "http://wp-quiz.ari-soft.com" caption = "Лучший плагин для WordPress викторины"] Щелкните меня [/ fancybox]

Укажите текст ссылки между тегами [fancybox] и [/ fancybox] . Можно использовать любой HTML-код. Если вы хотите создать ссылку на изображение, шорткод будет выглядеть так:

[fancybox url = "https: // www.youtube.com/watch?v=aOasHPNL1yo"pting [/ fancybox]

Все параметры, которые можно использовать в теге [fancybox] в таблице ниже:

Как отобразить собственный HTML-код в лайтбоксе?

Оберните контент, который нужно отобразить, в лайтбокс тегом HTML