Affichage dans iframe, pop-up ou lightbox / shadowbox

Afficher une page HTML ou un élément sur une autre page HTML

On peut afficher une page HTML ou un élément média (animation Flash ou une vidéo) sur une autre page HTML, on peut utiliser le code <iframe> :

• pour Flash

<div align="center">

<iframe allowfullscreen="" frameborder="0" height="400" src="http://www.igorlaszlo.com/contactform/contactform.swf" width="400"></iframe></div>

Exemple:

• pour HTML

<div style="margin-left: -150px;">

<iframe allowfullscreen="" frameborder="0" height="400" src="http://www.igorlaszlo.com" width="1200"></iframe></div>

Exemple :

Pour aligner la page html au centre qui est plus large que la page où c'est affichée (si vous n'avez pas d'une colonne de coté), vous pouvez la déplacer vers la gauche en ajoutant le code "margin-left" (voir ci-dessus). Il faut juste calculer le moitié de la différence entre les deux pages.

Afficher une page HTML ou un élément dans un pop-up fenêtre

Définition de pop-up ici !

<div align="center">

<a href="javascript:void(window.open('http://www.igorlaszlo.com','blank','scrollbars=yes,toolbar=no,width=1200,height=900'))">ART PHOTOS</a></div>

Exemple :

ART PHOTOS

Afficher une page HTML ou un élément dans lightbox/shadowbox …

• Téléchargez les documents pour l'installation de shadowbox, rendez-vous sur le site web de Shadowbox ici !

• Ouvrez le shadowbox.css et personnalisez le look selon votre goût !

• Envoyez les documents sur votre serveur et notez leur adresse web !
  N'oubliez pas de définir l'autorisation des documents (tout lire, enregistrer, exécuter= 777) !

• Copiez le code ci-dessous et collez juste avant la basile </head> !

<!-- Shadowbox -->

<link href='http://www.votre-site.com/shadowbox/shadowbox.css' rel='stylesheet' type='text/css'/>

<script src='http://www.votre-site.com/shadowbox/shadowbox.js' type='text/javascript'/>

<script type='text/javascript'>

Shadowbox.init({

  continuous:true,

  counterType:"skip",

  overlayOpacity:0.9,

  flashVersion:"8.0.0",

  players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']

});

</script>

<!-- Shadowbox end-->

• Allez sur votre page (ou ouvrez une nouvelle page/article si vous n'avez pas fait encore), de coté HTML et utilisez le code suivant pour placer votre élément :

<div align="center">

<a href="http://igorlaszlo.blogspot.com/p/all-photos.html" player="html;" rel="shadowbox[artphoto-sites];width=1200;height=900;" scale="showall" title="photos de IL">IL ART PHOTOS</a></div>

Exemple :

IL ART PHOTOS

Attention ! Si vous utilisez un blog Blogger, n'utilisez pas les images (.jpg, .png, .gif) comme lien vers une autre image avec shadowbox car elles sont automatiquement affichées dans cette façon. Si vous le faites, votre image va être affichée deux fois. Par exemple ici sur mon présent site :

<div align="center">

<a href="http://www.igorlaszlo.com/ascreen.jpg" rel="shadowbox[artphoto-sites];width=256;height=256;" scale="showall" title="photos de IL"><img height="100" src="http://www.igorlaszlo.com/ascreen.jpg" width="100" /></a></div>

Exemple :

Je ne me suis pas renseigné encore comment on peut désactiver lightbox de Blogger. A suivre...