Sites Web plein écran avec jQuery.fullscreen

Il y a de nombreuses années, lorsque les sites en flash étaient populaires et que personne ne se souciait de SEO, les sites Web étaient souvent en plein écran.

Un site en plein écran cachait tous les éléments de navigation tels que la barre d'adresse et le menu des signets.

Grace au plugin jQuery.fullscreen, vous pouvez ajouter cette fonctionnalité à vos sites Web non-Flash.

Voici comment utiliser le plugin jQuery.fullscreen:

1 - Download jQuery.fullscreen

Allez sur Github repository et cliquez sur le bouton ZIP à télécharger. Le bouton de téléchargement se trouve en bas à droite sur la page et à la forme suivante :

1 - download

  • Décompressez le fichier zip.
  • Trouvez le dossier: jquery.fullscreen-master/release /.
  • Uploadez le fichier jquery.fullscreen-0.4.1.js sur votre site Web.

2 - Chargez jQuery et jQuery.fullscreen

A l'intérieur de n'importe quel fichier HTML, ajoutez le code suivant juste avant la balise de fermeture "/HEAD":

2 - Fullscreen Websites with jQuery fullscreen - OSTraining

3 - Définissez l'ouverture/fermeture de vos liens

Après le code précédent, ajouter ce qui suit:

3 - Fullscreen Websites with jQuery fullscreen - OSTraining

A l'intérieur de la balise "body" ajoutez deux liens. Un lien qui ouvrira en plein écran et l'autre qui le refermera.

Utilisez les mêmes classes définies dans le code précédent.: .open et .close:

4 - Fullscreen Websites with jQuery fullscreen - OSTraining

Le résultat final ressemblera à l'exemple ci-dessous:

5 - Fullscreen Websites with jQuery fullscreen - OSTraining

4 - Testez le plein écran

Ouvrez votre fichier HTML en utilisant votre navigateur favori.
Cliquez sur le lien "Open Fullscreen" et vous verrez la magie s'opérer.

6 - fullscreenjs 2


Cliquez sur "Exit Fullscreen" ou appuyez sur la touche Echap pour fermer.

7 - view-demo

Cet article est traduit de l'article : Fullscreen Websites with jQuery.fullscreen 

Notez cet article:
1
Créer un package d'installation rapide pour Joomla
JoomlaDay Alger - JoomlaDay Paris | Mai 2014

Articles en relation

Commentaires

 
Pas encore de commentaire
Déjà inscrit ? Connectez-vous ici
Guest
samedi 20 juillet 2019
Si vous souhaitez vous inscrire, veuillez saisir un nom d'utilisateur, mot de passe et nom.

Image Captcha

Sur ce site, nous utilisons des cookies.