Canalblog
Editer l'article Suivre ce blog Administration + Créer mon blog
Publicité
Le GénérateurS
Publicité
14 décembre 2008

Présenter vos fichiers flash façon lightbox avec la mediabox

Présenter vos fichiers flash façon lightbox avec la 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.

 

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 tout        
    • 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 votre administration - 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'enregistrez 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 enregistrez ce fichier lors de l'étape précédente)    
  • vous enregistrez sous le même nom    

Quatrième étape :

  Dans votre administration - 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 mode source, vous collez ce pavé, en respectant l'ordre

 

    <a href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/animations-flash/Design-Blog-Paques-Annak.swf" rel="mediabox[200     200]" title="flash animation">Cliquez pour voir l'animation flash</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 fichier flash
  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 et les dimensions du flash

http://annak.over-blog.com/article-17873275.html

 
Publicité
Publicité
Commentaires
Publicité