screenfull.js Kullanarak Web Sitenizi Tam Ekran Yapın

javascript-full-screen

screenfull.js ile web sitenizi ziyaret edenlere, tam ekran özelliği sağlayabilirsiniz.

Web sitenizi tam ekran olarak ziyaretçilerinize sunmak istiyorsanız bu eklenti tam sizlik. Fullscreen API ile hazırlanmış bu eklenti tüm browserlarda çalışmaktadır. Eklentiyi ücretsiz olarak GitHub üzerinden indirebilirsiniz.

Web sitenizi daha önce belirlediğiniz bir linke/butona basınca tam ekran yapmak için:

document.getElementById('button').addEventListener('click', () => {
    if (screenfull.enabled) {
        screenfull.request();
    } else {
        // Ignore or do something else
    }
});

 Belirli bir elementi tam ekran yapmak için:

const elem = document.getElementById('target');

document.getElementById('button').addEventListener('click', () => {
    if (screenfull.enabled) {
        screenfull.request(elem);
    }
});

 jQuery kullanarak tam ekran yapmak için:

const target = $('#target')[0]; // Get DOM element from jQuery collection

$('#button').on('click', () => {
    if (screenfull.enabled) {
        screenfull.request(target);
    }
});

 Toogle aracılığıyla belirli bir görseli tam ekran yapmak için:

$('img').on('click', event => {
    if (screenfull.enabled) {
        screenfull.toggle(event.target);
    }
});

Diğer örnekler için: https://github.com/sindresorhus/screenfull.js#fullscreen-the-page

DemoÜcretsiz İndir

Hakan Demirel

pcanalist.com kurucularından Hakan Demirel, özel bir şirkette Front-end Developer olarak çalışmakta. Twitter üzerinden @hakandemirel hesabını takip edebilir yada hakandemirel.com adresinden daha fazla bilgi alabilirsiniz.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Yandex.Metrica