Créer un flash dans une lightwindow

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

Mon fichier Flash

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 :

Vous créez un répertoire Lightwindows

1. dans lequel vous créez un répertoire images
   
2. 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
      
3. 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'adresse de ces 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, vous ouvrez votre blog note, vous y collez

<object style="width: 360px; height: 324px;"data="http://ddata.over-blog.com/xxxyyy/0/37/17/67/animations-flash/Annak-Blog-Noel.swf" type="application/x-shockwave-flash">
 <param value="http://ddata.over-blog.com/xxxyyy/0/37/17/67/animations-flash/"
name="base">
<param value="http://ddata.over-blog.com/xxxyyy/0/37/17/67/animations-flash/Annak-Blog-Noel.swf"
name="movie">
<param value="transparent" name="wmode">
<param value="true" name="menu">
Cet objet nécessite un plugin pour être lu ou le fichier n'est pas accessible.
</object>

Avec :

• en bleu, l'adresse de votre flash
  
• en vert, le chemin d'accès
  

Vous enregistrez sous flash.html et le sauvegardez dans vos Documents dans l'administration de votre blog.

Sixième étape :

Dans votre éditeur d'article, 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.

Puis, vous créez un lien en HTML vers ce fichier.html.

<a class="lightwindow" title="ceci est un fichier flash" href=" http://ddata.over-blog.com/xxxyyy/0/37/17/67/lightwindow/flash.html">Mon fichier Flash</a>

Créer un formulaire de contact dans une lightwindows

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

Cliquez pour répondre au formulaire





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
   
   
   
   
   1. dans lequel vous créez un répertoire images
      
   2. 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
         
   3. 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

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 class="lightwindow page-options" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/lightwindow/form.html">Cliquez pour répondre au formulaire</a>

Avec :

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

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