Float chat
Войти

Zoom Image — demo

Добавлено в закладки: 2

Пример ниже, покажет вам работу моего аддона для плагина Wp-Recall - "Zoom image"

Под картинками, пример ютуб видео в всплывающем окне (запросы к ютубу идут только когда кликаете на окно)

И ниже встраиваемые гугл карты в всплывающем окне (полезно для раздела сайта "наши координаты")

p.s. не всё в примерах доступно в текущей версии аддона Zoom image. Что-то тестируется и обкатывается и появится в следующих версиях дополнения.

Картинки ниже специально подобраны разной гаммы - темные, пестрые, яркие - чтобы оценить как смотрится навигация. Именно так будет вести себя галерея по умолчанию. Когда в редактор вставляешь изображения и всё... Расширенное использование ниже

02218_sunsetavenue_2560x1600

Zalevskij75 - 1

Zalevskij75 - 19

Zalevskij75 - 71

215

16

Zalevskij75 - 113

Zalevskij75 - 74

Sky_05

свет города (22)

Zalevskij75 - 5

404_306a808497_81.177.28.8_0139_

Zalevskij75 - 6

Zalevskij75 - 13

Zalevskij75 - 32

Zalevskij75 - 46

402_d0d70ebb44_209.188.9.53_0933_

Zalevskij75 - 55

2015-11-20-15-55-16

Zalevskij75 - 69



Изображение с большой шириной:

santacruzsunset_2560x1600

 

Вот такое сообщение выйдет если урл картинки не верен или картинка удалена:
Картинка не найдена


Добавить iframe с картой, ютуб видео можно добавив в ссылку класс: class="fancybx iframe"

Для того чтобы видео было в галерее (в всплывающем окне были стрелки "следующее", "предыдущее") необходимо в ссылку добавить html-5 атрибут data-fancybox-group и вписать его значение в ссылки к нужным вам видеофайлам.
Например data-fancybox-group="youtube"
2 Ютуб видео объединены в одну группу, с миниатюрой и навигацией на следующее видео:

// тут одно ютуб видео - со вторым аналогично. разберетесь
<a class="iframe fansybx" href="http://www.youtube.com/embed/Yinzn0Jqigo?rel=0&amp;autoplay=1" data-fancybox-group="youtube1"><img src="http://img.youtube.com/vi/Yinzn0Jqigo/mqdefault.jpg"/></a>

 

и видео строкой-ссылкой на всплывающее окно:

<a class="fancybx iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>

Youtube (iframe)

 

Пример всплывающих гугл карт:

<a class="fancybx iframe" href="http://maps.google.com/?output=embed&amp;f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=London+Eye,+County+Hall,+Westminster+Bridge+Road,+London,+United+Kingdom&amp;hl=lv&amp;ll=51.504155,-0.117749&amp;spn=0.00571,0.016512&amp;sll=56.879635,24.603189&amp;sspn=10.280244,33.815918&amp;vpsrc=6&amp;hq=London+Eye&amp;radius=15000&amp;t=h&amp;z=17">Google maps (iframe)</a>

Google maps (iframe)

 

Чтобы изображение не участвовало в фенсибоксе (откроется в окне браузера) укажите класс class="nofancybx"

Пример:

<a class="nofancybx" title="очень узкая картинка." href="http://across-ocean.otshelnik-fm.ru/wp-content/uploads/2015/08/2015-11-20-15-55-16.png"><img class="alignright size-full wp-image-938" src="http://across-ocean.otshelnik-fm.ru/wp-content/uploads/2015/08/2015-11-20-15-55-16.png" alt="2015-11-20-15-55-16" width="973" height="45" /></a>

2015-11-20-15-55-16

 

исправлен баг в навигации по ютуб видео (кнопки пред, след перекрывали перемотку)

Исправлен скрипт (в html5 плеере iframe - не позволял развернуть видео на полный экран)
Исправлен баг если картинка широкая но невысокая

Реализация передачи параметров в iframe с помощью html5 атрибутов data-width="значение" data-height="значение" (пиксели или %)

Ниже примеры объединены в одну группу. Передаются разные параметры:

<a class="fancybx iframe" href="http://www.youtube.com/embed/L9szn1QQfas?enablejsapi=1&amp;wmode=opaque" data-fancybox-group="youtube">Video #1</a>

Video #1 - по умолчанию (ширина 100%)

 

Video #2 (передаем data-width="460px" data-height="200px")

Video #2.1 (передаем data-width="760px" data-height="120px")

Video #2.2 (передаем data-width="50%" data-height="80%")

Video #2.3 (передаем data-width="96%" data-height="96%")

Video #2.4 (передаем data-width="110%" data-height="110%")

Video #2.5 (передаем только ширину data-width="460px")

Video #2.6 (передаем только высоту data-height="200px")

Video #2.7 (передаем только ширину в % data-width="50%")

Video #2.8 (передаем только высоту в % data-height="80%")

 

Формирование нонстоп ютуб галереи с автозапуском:

<a class="fancybx iframe" href="http://www.youtube.com/embed/Pn0w7vciQCE?playlist=9BMwcO6_hyA,TR3Vdo5etCQ,-0kcet4aPpQ,43vfvIwK9iE,IfB_K4RGtDo,KL7Z4RIosrI,oVLe77sKiS0,_OLUSELxFok,vkIzfG48HTY,JE8s3wbb1_0,aySmGUxq-qo&amp;autoplay=1">Video #3 playlist</a>

Video #3 playlist

 

Swf файлы (флеш игры):

<a href="/wp-content/uploads/rcl-uploads/ROLY-POLY-CANNON-BLOODY-MONSTERS-PACK.swf">Game not over</a>

Game not over

Game not over 2

Ниже, вы можете кликнуть в блоке автора на аватарку (это другое мое дополнение) - она увеличится, но не будет листаться в галерее т.к. атрибут у нее data-fancybox-group задан уникальным.

Всего просмотров: 31, Сегодня: 1

Тип: Demo

Оставить комментарий

Войти с помощью: 
Авторизация
*
*
Войти с помощью: 
Регистрация
*
*
*
Ваш день рождения * :
Число, месяц и год:
Войти с помощью: 
Генерация пароля