Генерируем HTML-структуру...
Качественная, кроссбраузерная верстка
Адаптивность, валидность, высокая скорость загрузки сайта
Интеграция верстки с CMS
1С-Битрикс, Joomla, Wordpress и многими другими.
Серверное и клиентское программирование
PHP, Javascript(Jquery, Angular.js). От js-анимаций до REST-систем.
Сайт под ключ
От сайтов-визиток и лендингов до корпоративных порталов и интернет-магазинов на 1С-Битрикс
Оптимизация и доработка существующих сайтов
Увеличение скорости загрузки, стабильности работы, исправление ошибок. Удаление вирусов и повышение безопасности сайта.

Открытие элемента DOM в полноэкранном режиме (Javascript, Jquery)

Полноэкранный режим браузера - не самая часто используемая функция. Однако, может возникнуть задача открытия элемента (всей страницы, или ее части, или даже отдельной картинки) в полноэкранном режиме. Причем, не lightbox/fancybox - а именно используя нативный fullscreen mode браузера. Как решить эту задачу?

На самом деле все достаточно просто. Вот код функции, которая инициирует открытие полноэкранного режима. Работает во всех современных браузерах.

function fullScreenFunc(obj){
if (obj.requestFullscreen) {
obj.requestFullscreen();
} else if (obj.mozRequestFullScreen) {
obj.mozRequestFullScreen();
} else if (obj.webkitRequestFullScreen) {
obj.webkitRequestFullScreen();
}
}

Функция проверяет поддержку обычного полноэкранного режима, и если его нет - вызывает его префиксную модификацию.
Ну а дальше просто отлавливаем клик на элементе при помощи jquery (считаем, что библиотека уже подключена) и используем нашу функцию:

$('.slide').click(function () {
fullScreenFunc(this);
});

Единственная неприятная деталь - мы не можем передать в функцию jquery объект $(this). Можем использовать только this, поэтому в сложных ситуациях, перемещение по элементам может быть реализовано только про помощи javascript.
Например, у меня был такой случай: в слайдере, в каждом слайде содержится картинка и иконка. Переход в полноэкранный режим может быть только при клике по иконке и только в активном слайдере (на странице их несколько). Эту задачу можно решить так:

$('.slide .full').click(function () {
if($(this).closest('.parentslide').hasClass('active')){
fullScreenFunc(this.parentNode.childNodes[1]);
}
});

В этом примере, при клике на иконку првоеряется, активен ли родительский слайдер, затем выбирается родительский слайд и конки, и картинка, содержащаяся в нем открывается в полноэкранном режиме.
Хотя я все же предпочитаю использовать fancybox:)

Javascript, 13 Сентября 2015

Комментарии

Комментариев для это записи пока нет.
Оставьте комментарий и будьте первым!

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

CAPTCHA
← Вернуться к блогу
Ознакомьтесь с моим резюме

Обратная связь

Вы также можете связаться со мной, отправив письмо на почту . В любом случае, я постараюсь ответить вам как можно оперативнее!