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.cssAjouter l'attribut#photos {
width:580px;
margin-left:300px;
position:absolute;
top:140px;
display:none;
cursor: pointer;
z-index: 2;
}
à la classez-index: 1;
de votre CSS (Sinon les tags viennent se mettre au milieu de votre beau diaporama!).post-tags
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;">
</td>
<td width="500" height="32" style="width: 500px; height: 32px; background: url({{tpl:BlogThemeURL}}/img/border-top.png) repeat-x;"> </td> <td width="32" height="32" style="width: 32px; height: 32px; background: url({{tpl:BlogThemeURL}}/img/top-right.png) no-repeat;"> </td>
</tr> <tr>
<td style="width: 32px; background: url({{tpl:BlogThemeURL}}/img/border-left.png) repeat-y;"> </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;"> </td>
</tr> <tr>
<td width="32" height="32" style="width: 32px; height: 32px; background: url({{tpl:BlogThemeURL}}/img/bottom-left.png) repeat-y;"> </td> <td width="500" height="32" style="width: 500px; height: 32px; background: url({{tpl:BlogThemeURL}}/img/border-bottom.png) repeat-x;"> </td> <td width="32" height="32" style="width: 32px; height: 32px; background: url({{tpl:BlogThemeURL}}/img/bottom-right.png) repeat-y;"> </td>
</tr>
Changez bien le XXXXXXXX@N00 par votre ID Flickr.</table> </div>
Puis changez le
par<a href="#search">{{tpl:lang To search}}</a>
(Je me permet de court-circuiter ce lien qui fait doublon souvent avec le #menu)<a onclick="switchMenu('photos');" title="Voir les photos">Photos</a>
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>