23 juil. 2010

Afficher une page HTML dans une mediabox

Ce n'est pas très difficile à réaliser, mais il faut aller chercher les fichiers sur différents sites, c'est donc long.

Faîtes le test : Google




Première étape
:

Allez sur Mediabox
Cliquez sur :
  • Mediabox.css :


    • le contenu apparaît,
    • vous sélectionnez tout
    • vous copiez
    • vous ouvrez le bloc note sur le PC
    • vous collez
    • vous enregistrez sous mediabox.css
  • Mootools :


    • vous arrivez sur le site mootools
    • vous cliquez sur toute la sélection
    • vous sauvegardez
  •  SWFobject :


    • vous arrivez sur le site
    • vous cliquez sur Download
    • il s'agit d'un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire vers.
  • Mediabox68.js :


    • le contenu apparaît,
    • vous sélectionnez tout
    • vous copiez
    • vous ouvrez le bloc note sur le PC
    • vous collez
    • vous enregistrez sous mediabox.js
  • mediaboxImages.zip :


    • il s'agit d'un fichier .zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, extraire vers
  • JW Mediaplayer :


    • vous vous retrouvez sur le site MediaPlayer
    • vous cliquez sur Download You can download the FLV Media Player here.
    • vous venez d'enregistrer un fichier zip : un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, extraire vers
Deuxième étape :

Dans l'administration de votre blog - Mes documents - Autres fichiers :
  • vous créez un répertoire mediabox :


    • vous y enregistrez les 4 images :


      • 1_close.png
      • 1_loading.gif
      • 1_next.png
      • 1_prev.png
      • mediaplayer.swf
    • vous notez leur adresse
Troisème étape :

Sur votre PC :
  • vous ouvrez le bloc-note
  • vous appelez le fichier mediabox.css
  • vous modifiez les adresses des images (celles que vous venez d'enregistrer dans votre administration)
  • vous enregistrez sous le même nom
  • vous appelez le fichier mediabox.js
  • vous modifiez l'adresse : playerpath: '/js/mediaplayer.swf' (vous avez enregistré ce fichier lors de l'étape précédente)
  • vous enregistrez sous le même nom
Quatrième étape :

Dans l'administration de votre blog - Mes documents - Autres fichiers - Mediabox :
  • vous enregistrez les fichiers :


    • mediabox.css
    • mediabox.js
    • swfobject.js
    • mootools.v1.11.
  • Vous notez leur adresse
Cinquième étape :

En HTML, vous collez ce pavé, en respectant l'ordre
<a rel="mediabox[800 600]" href="http://google.fr">Ouvrez D&#233;coAnnak</a>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mediabox/mediabox.css" type="text/css" media="screen" />
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mediabox/mootools.v1.11.js" type="text/javascript">
</script><script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mediabox/swfobject.js" type="text/javascript">
</script><script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/mediabox/mediabox1.js" type="text/javascript">
</script>

En rouge, l'adresse du site à ouvrir
En vert, ses dimensions
En bleu, l'adresse des différents fichiers. Si votre blog est sur OB, vous pouvez utiliser mes fichiers. Il suffit de changer l'adresse.

Aucun commentaire:

Enregistrer un commentaire

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)