Amis de dotclear bonjour.

Je vous présente ici comment ajouter un beau calque transparent comportant le flash de diaporama de Flickr comme c'est présent sur ce blog. (cliquez sur "photos" dans le menu d'en haut...) Le rendu sous IE sera peut-être moins sexy, car la gestion de la transprence des png y est assez aléatoire...

Divflickr par Traffic de couenne

- code original: Pierre de La Celle
- Design: Je ne sais plus d'où viennent les bordures png, mais elles sont libres, j'en suis sûr

http://blog.delacelle.com

Cet addon est issu de mon thème: couenneBlog2
http://blog.delacelle.com/dotclear2-theme-couenneblog2.zip

Modifications du fichier style.css de votre thème:

à ajouter au début ou à la fin de votre fichier style.css

#photos {
    width:580px;
    margin-left:300px;
    position:absolute;
    top:140px;
    display:none;
    cursor: pointer;
    z-index: 2;
}

Ajouter l'attribut

z-index: 1;

à la classe

.post-tags

de votre CSS (Sinon les tags viennent se mettre au milieu de votre beau diaporama!)

Déposez les images du zip attaché à ce billet dans le dossier /img de votre thème.

Dans votre fichier _top.html ajoutez avant la fermeture de la balise </p>, juste à la fin du fichier:

<div id="photos" >

<table width="564" border="0" cellspacing="0" cellpadding="0" align="center"> <tr>

<td width="32" height="32" style="width: 32px; height: 32px; background: url({{tpl:BlogThemeURL}}/img/top-left.png) repeat-y;"> &nbsp;

</td>

<td width="500" height="32" style="width: 500px; height: 32px; background: url({{tpl:BlogThemeURL}}/img/border-top.png) repeat-x;"> &nbsp; </td> <td width="32" height="32" style="width: 32px; height: 32px; background: url({{tpl:BlogThemeURL}}/img/top-right.png) no-repeat;"> &nbsp; </td>

</tr> <tr>

<td style="width: 32px; background: url({{tpl:BlogThemeURL}}/img/border-left.png) repeat-y;"> &nbsp; </td> <td style="background: #FFF;"> <iframe style="margin-top:10px" src=http://www.flickr.com/slideShow/index.gne?user_id=XXXXXXXX@N00 frameBorder=0 width=500 height=500 scrolling=no></iframe> <center><a onclick="switchMenu('photos');" title="Cacher les photos">Cacher les photos</a></center> </td> <td width="32" height="100%" style="width: 32px; background: url({{tpl:BlogThemeURL}}/img/border-right.png) repeat-y;"> &nbsp; </td>

</tr> <tr>

<td width="32" height="32" style="width: 32px; height: 32px; background: url({{tpl:BlogThemeURL}}/img/bottom-left.png) repeat-y;"> &nbsp; </td> <td width="500" height="32" style="width: 500px; height: 32px; background: url({{tpl:BlogThemeURL}}/img/border-bottom.png) repeat-x;"> &nbsp; </td> <td width="32" height="32" style="width: 32px; height: 32px; background: url({{tpl:BlogThemeURL}}/img/bottom-right.png) repeat-y;"> &nbsp; </td>

</tr>

</table> </div>

Changez bien le XXXXXXXX@N00 par votre ID Flickr.

Puis changez le

<a href="#search">{{tpl:lang To search}}</a>

par

<a onclick="switchMenu('photos');" title="Voir les photos">Photos</a>

(Je me permet de court-circuiter ce lien qui fait doublon souvent avec le #menu)

Et enfin, dans le _head.html de votre thème ajoutez ceci après la dernière balise :

<script type="text/javascript">
<!--
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "block" ) {
    el.style.display = 'block';
} else {
    el.style.display = 'none';
    }
}
//-->
</script>

Voilà!!! normalement ça marche! :D