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

La lightwindow permet des effets comparables à ceux de la lightbox. Voici un exemple d'un texte qui s'ouvre avec fond sombre :





Link Name

Première étape :

Allez sur STICKMANLIGHTS

Cliquez sur Download Files :You can grab the files here

Vous venez d'enregistrer un fichier .zip. C'est 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 :

1. vous créez un répertoire Lightwindows
2. dans lequel vous créez un répertoire images
   
3. dans lequel vous uploadez les fichiers :
   
   
   
   
   1. arrow-down.gif
      
   2. arrow-up.gif
      
   3. black-70.png
      
   4. nextlabel.gif
      
   5. prevlabel.gif
      
   6. blank.gif
      
4. vous notez les adresses de ces fichiers
   

Troisième étape :

Sur votre PC :

1. Vous ouvrez le bloc-notes
   
2. Vous appelez le fichier lightwindow.js
   
3. Vous modifiez l'adresses des images :
   
   
   
   
   1. ajax-loading.gif
      
   2. black.png
      
   3. black-70.png
      
   (vous venez de les enregistrer dans l'administration de votre blog à la deuxième étape)
   
4. vous enregistrez le fichier sous le même nom
   

1. Vous appelez le fichier lightwindow.css
   
2. vous modifiez l'adresse des images :
   
   
   
   
   1. blank.gif
      
   2. prevlabel.gif
      
   3. nextlabel.gif
      
   4. black-70.png
      
   5. arrow-up.gif
      
   6. arrow-down.gif
      
3. Vous sauvegardez le fichier sous le même nom
   

Quatrième étape :

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

1. vous créez un sous-répertoire javascript
   
2. vous y uploadez les fichiers :
   
   
   
   
   1. lightwindows.js
      
   2. prototype.js
      
   3. scriptaculous.js
      
   4. effects.js
      
3. vous notez leur adresse
   

1. vous créez un sous-répertoire css
   
2. vous y uploadez le fichier :
   
   
   
   
   1. lightwindows.css
      
3. vous notez son adresse
   

Cinquième étape :

Sur votre PC :

1. vous appelez le fichier blank.html
   

<div id="ipsum" >
    <p>
        <a href="blank-width.html" class="lightwindow_action" rel="deactivate"><strong>Close Me!</strong></a>
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum
ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi
arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.
    </p>
    <p>
        <select style="width: 200px;">
          <option value ="">Is this below the overlay?!</option>
          <option value ="">...</option>
          <option value ="">..</option>
          <option value ="">.</option>
        </select>
    </p>
</div>
<style type="text/css">
#ipsum p {
    font-size: 12px;
    line-height: 18px;
    padding: 10px;
}
</style>
<script type="text/javascript">
</script>

En rouge, vous remplacez par votre propre texte.
En bleu, le menu déroulant : à effacer ou à modifier

Vous enregistrez sous le même nom.

Sixième étape :

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

1. Vous enregistrez votre fichier blank.html
   
2. Vous notez son adresse
   

Septième étape :

Lors de la mise en place de votre lightwindows, vous collez en HTML :

<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/lightwindow/javascript/prototype.js" type="text/javascript"></script>
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/lightwindow/javascript/effects.js" type="text/javascript"></script>
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/lightwindow/javascript/scriptaculous.js?load=effects"
type="text/javascript"></script>
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/lightwindow/javascript/lightwindow.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/lightwindow/css/lightwindow.css" type="text/css" media="screen" />

Avec vos propres adresses de fichiers. Si votre blog est sur Over-Blog, vous pouvez utiliser mes adresses et donc le pavé précédent.

Ensuite, vous collez, toujours en HTML

<a href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/lightwindow/blank.html" class="lightwindow">Link Name</a>

Avec :

• en bleu, l'adresse de votre page
  
• en vert, ce qui apparaît en mode normale