Mettre en ligne une vidéo dans une ibox

Une Ibox présente un effet comparable à la lightbox : fond sombre qui recouvre le blog.
Attendez le chargement complet de la page et donc des fichiers, cliquez, vous verrez le résultat est sympa et ce n'est pas très difficile à réaliser.

My YouTube Video

Etape 1 :

Allez sur Ibox

Cliquez sur ibox.2.17c.zip

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

Etape 2 :

Dans l'administration de votre blog, Mes Documents - Autres fichiers :

• vous créez un répertoire ibox
  
  
  • dans lequel vous créez un sous-répertoire images
    
    
    • dans lequel vous enregistrez :
      
      
      • bg.png
        
    • vous notez son adresse
      

Etape 3 :

Sur votre PC, vous ouvez votre Bloc-Notes, vous appelez le fichier ibox.js :

• vous recherchez le fichier bg.png
  
• vous modifiez son adresse (vous l'avez noté à l'étape 2)
  
• vous enregistrez sous le même nom
  

Etape 4 :

Dans l'administration de votre blog, Mes Documents - Autres Fichiers - répertoire ibox :

• vous enregistrez le fichier ibox.js
  
• vous notez son adresse
  

Etape 5 :

Vous allez sur Youtube :

• vous choisissez votre vidéo,
  
• vous notez l'adresse qui est dans la barre de navigation de votre navigateur
  

Etape 6 :

En HTML de l'article où vous voulez placer ce lien, vous collez

<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/ibox.js" type="text/javascript"></script><a rel="ibox" href="http://fr.youtube.com/watch?v=smqBrRhLf2s">My YouTube Video</a>

Vous personnalisez :

• en rouge : l'adresse de votre fichier ibox.js : vous l'avez noté lors de l'étape 4
  
• en vert : l'adresse de votre vidéo : vous l'avez noté lors de l'étape 5
  
• en bleu : le nom du lien qui apparaît à l'écran
  

Agrandir une photo d'un clic de souris dans une Ibox

De jolis effets pour une astuce pas très difficile à réaliser. Il faut que vous puissiez mettre du javascript sur votre blog.

Testez en cliquant sur chaque image : l'effet est différent.

• 
  
  
• 
  
  
• 
  
  

Etape 1 :

Allez sur Ibox
Cliquez sur ibox.2.17c.zip

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

Etape 2 :

Dans l'administration de votre blog, Mes Documents - Autres fichiers :

• vous créez un répertoire ibox
  
  • dans lequel vous créez un sous-répertoire images
    
    • dans lequel vous enregistrez :
      
      • bg.png
        
    • vous notez son adresse
      

Etape 3 :

Sur votre PC, vous ouvez votre Bloc-Notes, vous appelez le fichier ibox.js :

• vous recherchez le fichier bg.png
  
• vous modifiez son adresse (vous l'avez noté à l'étape 2)
  
• vous enregistrez sous le même nom
  

Etape 4 :

Dans l'administration de votre blog, Mes Documents - Autres Fichiers - répertoire ibox :

• vous enregistrez le fichier ibox.js
  
• vous notez son adresse
  

Etape 5 :

En HTML, vous collez

<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/ibox.js" type="text/javascript"></script>
<ul>
<li><a href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/images/large/image_1b.jpg"  rel="ibox" title="Good Barbeque at 1024x450!"><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/images/small/image_1.jpg" alt=""/></a></li>
<li><a href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/images/large/image_2.jpg" rel="ibox" title="500x426!" ><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/images/small/image_2.jpg" alt=""/></a></li>
<li><a href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/images/large/image_3.jpg" rel="ibox" title="Auto Detect Image Size" ><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/images/small/image_3.jpg" alt=""/></a></li>
</ul>

Vous personnalisez :

• en rouge, l'adresse de votre fichier ibox.js : vous l'avez noté à l'étape 4
  
• en bleu, l'adresse des grandes images qui apparaissent après le clic
  
• en vert, l'adresse des petites images qui apparaissent sur le blog
  
• en orange, les titres
  

Créer une fenêtre pop up dans une Ibox

Très joli effet lightbox pour cette fenêtre pop up. Attendez le chargement complet de la page et admirez le résultat en cliquant sur :

It is a hidden div!

If you were to view source, you would find a div called 'inner_content'. This is that div. We have used CSS to set its display property to none, but using iBox, you can clearly see it as an overlay. Hurrah!

It is even styled. Oh so pretty it is

#inner_content

Cette astuce requiert la possibilité d'utiliser du javascript.

Etape 1 :

Allez sur Ibox

Cliquez sur ibox.2.17c.zip

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

Etape 2 :

Dans l'administration de votre blog, Mes Documents - Autres fichiers :

• vous créez un répertoire ibox 
• dans lequel vous créez un sous-répertoire images
• dans lequel vous enregistrez : bg.png. Vous notez l'adresse de cette image.
  

Etape 3 :

Sur votre PC :

• vous ouvez votre Bloc-Notes, 
• vous ouvrez le fichier ibox.js que vous avez sauvegardé à l'étape 1
• dans ce fichier, vous recherchez la ligne où figure le fichier bg.png
• vous modifiez son adresse (vous l'avez noté à l'étape 2)

vous enregistrez sous le même nom : ibox.js

Etape 4 :

Dans l'administration de votre blog, Mes Documents - Autres Fichiers - Répertoire ibox :

• vous enregistrez le fichier ibox.js (que vous venez de modifier)
• vous notez son adresse.

Etape 5 :

En HTML de l'article où vous voulez placer cette fenêtre pop up, vous collez

<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/ibox/ibox.js" type="text/javascript"></script>
<div id="inner_content" style="display:none;">
<div style="background:#000000;color:#ffffff;border:1px dashed FFFFFF;padding:15px;margin:15px;">
        <h3>It is a hidden div!</h3>
        <p>If you were to view source, you would find a div called 'inner_content'. This is that div. We
have used CSS to set its display property to none, but using <a href="/blog/p_ibox.html">iBox</a>,
you can clearly see it as an overlay. Hurrah!</p>
        <p>It is even styled. Oh so pretty it is</p>
    </div>
    </div>
    <p>
    <a href="#inner_content" rel="ibox" title="Loading Internal HTML Content" >#inner_content</a>
    </p>

Vous personnalisez ce code :

• en rouge, l'adresse de votre fichier ibox.js : vous l'avez noté à l'étape 4
  
• en bleu, le nom du lien qui apparaît sur le blog
  
• en vert, votre texte qui figurera dans la fenêtre.

Bon à savoir : si votre blog est sur OverBlog, vous pouvez utiliser mon fichier ibox.js. Il ne vous reste qu'à modifier les mots en bleu et vert pour placer cette fenêtre sur votre blog.