Créer un lecteur de musique dans une multibox

Un très joli effet lightbox. Testez-le en cliquant sur ce lien

Lien vers page HTML - Multibox MP3

Puis sur Cliquez ici pour voir l'exemple

1ère étape :

Allez sur Phatfusion

Cliquez sur multibox.zip

Vous venez d'enregistrer un fichier .zip : il s'agit d'un ensemble de fichiers compressés. Pour les décompresser, j'utilise WinRAR, Extraire Vers.

2ème étape :

Toujours sur le site Phatfusion, cliquez maintenant sur mootools v1.11

Vous arrivez sur le site Mootools, où vous cliquez sur Download.

Vous cochez toutes les lignes. SI vous aimez faire des diaporamas, vous vous rendrez compte que vous aurez souvent besoin de ce fichier.

Vous recliquez sur Download.

Vous venez d'enregistrer le fichier mootools.js

3ème étape :

Dans l'administration de votre blog - Documents - Autres Fichiers :

•  vous créez un répertoire nommé multibox :
  
  
  •  dans lequel vous créez un sous-répertoire nommé images
    
    
    • vous y enregistrez les images suivantes :
      
      
      • close.png       
        left.png
        leftDisabled.png
        loader.gif
        right.png
        rightDisabled.png
        
    • vous notez leur adresse
      

4ème étape :

Sur votre PC :

• vous ouvrez votre Bloc-Notes
  
• vous appelez le fichier multibox.css
  
• vous modifiez les chemins des images (URL), vous les avez noté à la 3ème étape
  
• vous enregistrez sous le même nom
  

5 ème étape :

Dans l'administration de votre blog - Documents - Autres Fichiers - multibox :

• créez un sous-répertoire multibox :
  
  
  • dans lequel vous enregistrez le fichier mp3player.swf
    

6ème étape :

• vous créez un sous-répertoire nommé : css
  
  
  • dans lequel vous enregistrez le fichier :
    
    
    • multibox.css
      

• vous créez un sous-répertoire nommé : js
  
  
  • dans lequel vous enregistrez les fichiers :
    
    
    • multibox.js  
      
    • overlay.js
      
    • mootools.js
      

• vous notez les adresses de ces 4 fichiers
  

7ème étape :

Maintenant, plaçons ce lecteur. En HTML, vous collez

<link href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/multibox/css/multibox.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript"
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imagemenu/js/mootools-release-1.11.js"></script>
<script type="text/javascript"
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/multibox/js/overlay.js"></script>
<script type="text/javascript"
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/multibox/js/multibox.js"></script>
<style type="text/css">
#htmlElement {
    padding: 10px;
    background-color: #000;
}
</style>

Vous remplacez les adresses en rouge par les vôtres : vous les avez noté à l'étape 6.

Si vous êtes sur OverBlog, vous pouvez utiliser les miennes

Puis votre morceau de musique, toujours en HTML

<div id="container">
<a href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/multibox/music.mp3" rel="" id="mb8" class="mb"
title="Musique">La musique que j'aime</a>
<div class="multiBoxDesc mb8">Un morceau de musique</div>
</div>

En bleu, votre morceau de musique
En vert, l'intitulé du lien qui apparaît sur votre blog
En orange, ce qui apparaîtra sous le lecteur

Et pour finir, tel quel, toujours en HTML

<script type="text/javascript">
            var box = {};
            window.addEvent('domready', function(){
                box = new MultiBox('mb', {
                    useOverlay: true,
                    container: document.body,
                    contentColor: '#FFF',
                    showNumbers: true,
                    descClassName: 'multiBoxDesc',
                    path: 'multibox/'
                });
            });
</script>