Le blog d'Azork

Design, techniques et ressources gratuites pour votre site web.

Aller au contenu | Aller au menu | Aller à la recherche

Comment intégrer un slideshow avec Dotclear?

Dans cet article nous allons voir comment intégrer un slideshow avec Dotclear et l'excellent plugin Cycle.

slideshow.jpg

Prérequis

  • Téléchargez le plugin Cycle et décompressez le fichier jquery.cycle.min.all.js dans le dossier du thème Dotclear que vous utilisez.
  • Vous aurez également besoin de sauvegarder l'image overlay.png dans votre dossier img pour les besoins du tutoriel.

Étape 1

Placez le code suivant dans le fichier user_head.html de votre thème

  1. <!-- inclus le plugin Cycle -->  
  2. <script type="text/javascript" src="{{tpl:BlogThemeURL}}/jquery.cycle.min.all.js"></script>  
  3. <!-- initialise le slideshow quand le DOM est prêt -->  
  4. <script type="text/javascript">  
  5. $(document).ready(function() {  
  6.   $('.slideshow').cycle({  
  7.     fx: 'fade' // type de transition, exemple: fade, scrollUp, shuffle, etc...  
  8.   });  
  9. });  
  10. </script>  

Dans mon exemple au-dessus, on considère que le fichier JavaScript du plugin Cycle se trouve à la racine du dossier de notre thème. Si vous placez le plugin Cycle dans un sous-dossier, il faudra modifier le chemin vers la source du fichier JavaScript en conséquence.

  1. src="{{tpl:BlogThemeURL}}/vers_mon_sous_dossier/jquery.cycle.min.all.js"  

Étape 2

Créez un nouveau fichier slideshow.html et placez-le dans le dossier tpl de votre thème. Ouvrez votre fichier et ajoutez le code suivant

  1. <!-- Slideshow -->  
  2. <div class="slideshow">  
  3. <tpl:Entries lastn="3">  
  4.   <div class="post">  
  5.     <a href="{{tpl:EntryURL}}">{{tpl:EntryFirstImage size="o"}}</a>  
  6.     <div class="wrapper-post">  
  7.       <h2 class="post-title"><a href="{{tpl:EntryURL}}">{{tpl:EntryTitle encode_html="1"}}</a></h2>  
  8.       <p class="read-it"><a href="{{tpl:EntryURL}}">{{tpl:lang Continue reading}}</a></p>  
  9.     </div>  
  10.   </div>  
  11. </tpl:Entries>  
  12. </div>  
  13. <!-- End Slideshow -->  

Étape 3

Maintenant il suffit de rajouter le code suivant dans notre feuille de style CSS qui appartient à votre thème courant. Pour les besoins du tutoriel, j'ai réglé la taille du slideshow par 620 pixels de large et 340 pixels de haut

  1. .slideshow { height340pxwidth620pxmarginautobackground#eee; }  
  2. .slideshow a img { bordernone; }  
  3. .slideshow img { background-color#eee; }  
  4. .slideshow .post { displayblockheight340pxwidth620pxoverflowhidden; }  
  5. .slideshow .wrapper-post { backgroundtransparent url("{{tpl:BlogThemeURL}}/img/overlay.png"repeat top leftborder-top1px solid #000; bottom: 0; left: 0padding20pxpositionabsolutewidth580px; }  
  6. .slideshow .wrapper-post h2 { margin0; }  
  7. .slideshow .wrapper-post h2 a:link,  
  8. .slideshow .wrapper-post h2 a:visited { color#ffftext-decorationnone; }  
  9. .slideshow .wrapper-post p { margin0; }  
  10. .slideshow .wrapper-post p a { color#ededed; }  

Étape 4

Pour afficher notre slideshow, il nous reste juste à inclure le code suivant dans le fichier home.html de votre thème par exemple.

  1. {{tpl:include src="slideshow.html"}}  
Azork

Auteur: Azork

Restez au courant de l'actualité et abonnez-vous au Flux RSS de cette catégorie

Commentaires (9)

CDM FIFA CDM FIFA ·  27 août 2011, 09:52

Le slideshow apparait (3 images à la suite sans aucun mouvement de transition).

Ce qui donne 3 images côte à côte.

Aurais-tu la solution ?

Merci. Bon we !

Azork Azork ·  31 août 2011, 12:44

@CDM FIFA > Salut, je pense que ton problème vient du fichier Jquery qui ne doit pas se charger lorsque tu affiches la page. As-tu vérifié avec firebug s'il y un problème de nom de chemin vers le fichier Jquery ?

CDM FIFA CDM FIFA ·  31 août 2011, 21:26

Bien vu ! Merci de ce dépannage, il ne me reste plus qu'à peaufiner les images et les liens.

CDM FIFA CDM FIFA ·  31 août 2011, 22:26

Tout fonctionne (affichage, lien...) par contre mes images sont coupées (visible sur mon site : http://cdmfifa.free.fr/).!

Peux-tu m'éclairer car je n'ai pas trouvé la solution ?

Merci par avance.

CDM FIFA CDM FIFA ·  02 septembre 2011, 09:11

Bon finalement, j'ai opté pour le slider.

Je t'embête plus.

Merci encore pour ton superbe travail !

Je viendrai cliquer régulièrement sur tes pubs ;-)

Azork Azork ·  02 septembre 2011, 15:49

@CDM FIFA > Salut, es-tu sur d'utiliser la version 0.8 du thème. Si tu n'as pas modifié le code normalement les images devraient s'afficher correctement.
Sinon, tu peux utiliser la méthode que j'ai posté sur le forum dotclear ici http://forum.dotclear.org/viewtopic.php?id=44927&p=2#37

CDM FIFA CDM FIFA ·  15 septembre 2011, 09:07

Merci je vais de ce pas consulter le forum.

brol brol ·  15 novembre 2011, 13:31

Il n'y a pas de fichier "jquery.cycle.min.all.js" à l'adresse que tu indiques... On doit prendre le "normal" ou le "Lite" ?
Merci.

Azork Azork ·  15 novembre 2011, 18:05

@ Brol > Salut, le nom de fichier a du probablement changer, oui tu peux télécharger l'un ou l'autre...

aucune annexe



À voir également

chestnut.jpg

Thème Dotclear - Chestnut

Chestnut est un thème gratuit pour Dotclear 2. C'est un thème conçu sur une structure en 2 colonnes. Le thème est compatible avec les différents widgets.

Lire la suite

tabloid.jpg

Thème Dotclear - Tabloid

Tabloid est un thème gratuit pour Dotclear 2. C'est un thème conçu sur une structure en 2 colonnes. Le thème est compatible avec les différents widgets.

Lire la suite