Accueil    Codes    Affichage de pages web en lightbox
 



Affichage de pages web en lightbox  Affichage de pages web en lightbox




Cliquez sur ce lien pour visualiser e comportement : Iframe vers l'accueil du site




Présentation



Afficher un contenu web interne ou externe à un site de façon propre sans quitter la page courante peut faciliter les conditions d'utilisation des visiteurs. Une mise en place est possible avec l'utilisation de l'outil "fancybox" basé sur du javascript.

La technique utilisée pour afficher la page est l'instanciation d'une iframe. Il faut à ce titre vérifer que cette action est autorisée au niveau de la page cible, celle-ci pouvant bloquer ou interdire son propre affichage au sein d'une iframe.



Affichage d'un contenu web



La déclaration pour mettre en place une iframe est la suivante :

Il faut tout d'abord intégrer le dossier contenant les composants fancybox dans le projet et effectuer les références aux scripts et à la feuille de style (vous pouvez consulter la mise en place détaillée de ces étapes dans l'article affichage d'images en lightbox).

Une fois ces étapes réalisées il suffit d'effectuer l'implémentation javascript suivante dans la partie <head> du document et d'intégrer le lien dans la page :


<script type="text/javascript">
$(document).ready(function() {
   $("#LienIframe").fancybox({
      'width' : '75%',
      'height' : '75%',
      'autoScale' : false,
      'transitionIn' : 'none',
      'transitionOut' : 'none',
      'type' : 'iframe'
   });
});
</script>

Déclaration de l'élément dans la page :

<a id="LienIframe" href="http://startyourdev.com" title="Accueil Start your dev">Iframe</a>

Si l'attribut "title" est spécifié, le titre sera également visible avec la page.



» Site de l'éditeur fancybox


TelechargementTélécharger l'exemple de lightbox