Effet Lightbox sur les images dans Blogger/Blogspot
Cet effet lightbox est très élégant et fait en sorte que les images s'ouvrent et s'affichent dans un cadre qui ressemble au design de l'écran d'un Imac.
Pour cet effet nous utiliserons du Javascript, des CSS pour la mise en forme, et un "Prototype Framework" installé sur les serveurs de Google.
Pour ceux qui veulent aller plus loin dans la compréhension de cet effet et plonger au coeur du code, je vous propose d'aller visiter la page du créateur de cet effet Lokhesh Dhakar.
Vous pouvez aussi vous rendre à cette adresse pour avoir le code du Fancy Zoom, créé par
| Name: | Cabel Maxfield Sasser |
| Job: | Co-Founder, Panic Inc. |
| Location: | Portland, OR |
| Email: | cabel@panic.com |
ou lire cet article que j'ai rédigé et qui explique comment intégrer cet effet à Blogger.
Installation
1. Connectez vous à votre compte Blogger et rendez-vous sur votre tableau de bord.
2. Allez sur Modèle ensuite sur Editer HTML, sauvegardez votre Blog.
3. Rechercher dans le code source ( cmd+F pour MAC ou ctrl+F pour PC )
4. Remplacer par: Lien de téléchagement, CODE AU FORMAT .PDF
5. Ou copiez/collez:
<!--Light Box Code Starts Bloggerplugins.ORG-->
<style>
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Pgjcft3NuTjDM-fbHH5o7hqniJ7GQo-4wgbJQu9cvxH3lazKOJxgfE0iY0mGq-5xDrdbwHPqjyxSxWtwoFO4ZaT4bXUor7PVBJECIF4Pmbc3AM2UD683kf7xHaK-6ewKjz4xnSXqiD0/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikZiYo_-PVmJE6Vh6v442vvWCg86dKJ8cG7HWQTTS-IMUJ0TZsMNGyugRrGLuiKXZgkGja_837y5HcY9-HX5AdfOhkkb72rmQ1c2h8r_CF85KU-LTJpqaIZzUp00yxRcuI6t0ywqkT-KM/) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends Bloggerplugins.ORG-->
</head>
Maintenant il vous faut ajouter des images dans votre article.
Pour cela utilisez l'importateur d'mages de Blogger et suivez les informations en cliquant sur cette image:
Code à rajouter en laissant un espace comme indiqué sur la capture d'écran en passant de nouveau en mode édition HTML: rel="lightbox" title=Image Caption"&gt;
Ce qui donne l'effet suivant:
