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

Encore un très joli effet de mise en valeur des photos. Pour l'admirer, cliquez sur ce lien SLIMBOX, puis sur la photo

VERSION SIMPLIFIEE :

Si vous avez un blog OverBlog, vous pouvez utiliser mes fichiers.

En HTML, vous collez

<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/slimbox/js/mootools-release-1.11.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/slimbox/js/slimbox.js"></script>
<a href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/image-1.jpg" rel="lightbox" title="desert"><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/thumb-1.jpg" alt="" /></a>
<link media="screen" type="text/css" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/slimbox/css/slimbox.css" rel="stylesheet" />

Vous personnalisez les adresses de vos images en bleu :

• image-1 : la grande image
  
• thumb-1  : la petite image
  

VERSION DETAILLEE

Pour les blogs hors OverBlog qui ne pourront pas utiliser mes fichiers.

Première étape :

Allez chez DIGITALIA

Dans le paragraphe Download, cliquez sur Slimbox.zip

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

Deuxième étape :

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

• créez un répertoire : slimbox
  
  
  • dans ce répertoire, créez un sous-répertoire : css
    
    
    • dans ce sous-répertoire, enregistrez les fichiers suivants
      
      
      • closelabel.gif
        
      • loading.gif
        
      • nextlabel.gif
        
      • prevlabel.gif
        

• toujours dans le répertoire slimbox, créez un deuxième sous-répertoire : js
  
  
  • dans ce sous-répertoire, enregistrez le fichier :
    
    
    • slimbox.js
      

Troisième étape :

Sur votre PC, ouvrez votre Bloc-Notes et appelez le fichier slimbox.css

Mettez à jour les adresses des images qui sont dans votre administration. Vous les avez noté pendant la deuxième étape :

/* SLIMBOX */
#lbOverlay {  position: absolute;   left: 0;   width: 100%;   background-color: #000;   cursor: pointer;}
#lbCenter, #lbBottomContainer {    position: absolute;    left: 50%;    overflow: hidden;    background-color: #fff;}
.lbLoading {    background: #fff url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/slimbox/css/loading.gif) no-repeat center;}
#lbImage {    position: absolute;    left: 0;    top: 0;    border: 10px solid #fff;    background-repeat:
no-repeat;}
#lbPrevLink, #lbNextLink {    display: block;    position: absolute;    top: 0;    width: 50%;    outline: none;}
#lbPrevLink {    left: 0;}
#lbPrevLink:hover {    background: transparent url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/slimbox/css/prevlabel.gif) no-repeat 0%
15%;}
#lbNextLink {    right: 0;}
#lbNextLink:hover {    background: transparent url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/slimbox/css/nextlabel.gif) no-repeat 100%
15%;}
#lbBottom {    font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;    font-size: 10px;    color: #666;line-height: 1.4em;    text-align: left;    border: 10px solid #fff;    border-top-style: none;}
#lbCloseLink {    display: block;    float: right;    width: 66px;    height: 22px;    background: transparent
url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/slimbox/css/closelabel.gif) no-repeat center;margin: 5px 0;}
#lbCaption, #lbNumber {    margin-right: 71px;}
#lbCaption {    font-weight: bold;}

Enregistrez sous le même nom et uploadez dans l'administration de votre blog dans le sous-répertoire : css

Quatrième étape :

Vous allez chez Mootools :

• vous cliquez sur Download, cochez tout, (sinon ça ne fonctionnera pas)
  
• puis à nouveau sur Download (tout en bas)
  

Le fichier MooTools v1.11.js Release est maintenant sur votre PC

Cinquième étape :

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

• vous enregistrez dans le sous-répertoire css, ce fichier MooTools v1.11.js
  

Sixième étape :

Dans l'HTML, vous collez :

<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/slimbox/js/mootools-release-1.11.js"></script>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/slimbox/js/slimbox.js"></script>
<a href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/image-1.jpg" rel="lightbox" title="desert"><img src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/Lightbox/thumb-1.jpg" alt="" /></a>
<link media="screen" type="text/css" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/slimbox/css/slimbox.css" rel="stylesheet" />

Vous personnalisez :

• les adresses de vos fichiers en rouge
• les adresses de vos images en bleu : image-1 : la grande image et thumb-1.jpg : la petite image