Police: A+  A-  A

Encore un effet JS de folie : JCarousel

Par niss • 17 mar, 2008 • Catégorie: Customisations

Une belle découverte, qui j’en suis certain risque de plaire à plus d’un… Jcarousel, crée par Jan Sorgalla, est basé sur le script qu’on ne présente plus : JQuery.

Je vous invite à aller découvrir de quoi il s’agit sur le site de Jan: Voici un exemple.
Et voici ce que cela donne adapté à WordPress : regardez dans la sidebar du thème Kruugle : les 10 derniers articles.

Le principe d’utilisation en est extrêmement simple. Comme pour les onlets, ou encore le menu image Mootools, la mise en place va se faire un deux temps.

1/Allez récupérer les fichiers à télécharger sur le site de Jan

2/Extraire les fichiers dans le répertoire de votre thème

3/Déclarez dans header.php (avant < /head>) les lignes suivantes:

  1. < script type="text/javascript" src="/Chemin/vers/lib/jquery-1.2.1.pack.js">< /script>< script type="text/javascript" src="/Chemin/vers/lib/jquery.jcarousel.pack.js">< /script>
  2. < link rel="stylesheet" type="text/css" href="/Chemin/vers/lib/jquery.jcarousel.css" />
  3. < link rel="stylesheet" type="text/css" href="/Chemin/vers/skin/skin.css" />
  4. < script type="text/javascript">
  5. jQuery(document).ready(function() {
  6. jQuery(‘#mycarousel’).jcarousel();
  7. });
  8. < /script>

4/Ensuite, vous n’avez plus qu’à coller où bon vous semble dans votre thème la liste des images que vous souhaitez faire apparaitre dans le Jcarousel. Vous pouvez bien entendu entourer les balises image par un href ;). Voici un exemple de code à coller :

  1. < ul id="mycarousel" class="jcarousel-skin-ie7">
  2.     < li>< img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" />< /li>
  3.     < li>< img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" />< /li>
  4.     < li>< img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" />< /li>
  5.     < li>< img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" />< /li>
  6. < /ul>

Pensez bien, à supprimer les espaces en trop que j’ai insérés (toujours mes problèmes d’affichage de code dans les billets!! ça m’énerve!) après le caractère “<”.

Je vous invite très fortement à vous rendre sur le site de l’auteur, vous y trouverez des tas d’exemples d’utilisation de ce superbe effet. Et n’hésitez pas à venir demander un petit coup de main sur le forum en cas de besoin. J’ai par exemple réussi assez rapidement à l’intégrer dans un thème, de manière à afficher dans le Jcarousel les “x” derniers articles publiés, le tout pouvant être lié à une image à déclarer dans les fameux champs personnalisés WP ;)

Partagez cette page:

Ces icones representent les sites de bookmarking social dans lesquels vos lecteurs peuvent partager et faire découvrir vos pages.
  • blogmarks
  • Blogasty
  • Wikio
  • MisterWong Fr
  • BlogMemes Fr
  • Linkertop
  • Fuzz
  • Digg
  • del.icio.us
  • Technorati
  • Tapemoi
  • Netvouz
  • DZone
  • ThisNext
  • Wists

Articles Relatifs

Marqué comme: ,

niss est le Webmaster de (niss.fr)
Email à cet auteur | Tous les Articles par niss

21 Responses »

  1. Moi c’est celui que ta mis en exemple qui me conviebdrait mais je n’arrive pas a reproduire comme toi et je m’apercois de ma nullité.
    Bon si ca te dit envoi moi le code lol

  2. Salut Boris, tu veux le thème Kruugle modifié? Bouge pas, je te l’upload.

    Voilà monsieur Kruugle Beta

    Pour le Jcarousel : clé du champ perso: “ImgJC” et valeur : l’url complète de l’image.
    Pour le ImageFlow : clé du champ perso : “imgmenu” et valeur : le nom de l’image. Et surtout copier les image en question de l’imageFlow dans le répertoire “img”. Voilà monsieur.

  3. Ben celui mis en exemple c’est Kruugle =+

  4. Cool merci Stephane, désolé je dois avoir deux mains gauches pour jamais avoir le meme résultat, tiens je vais essayé sans les moufles :xa:

  5. Avec plaisir l’ami! Une précision importante : il semble que je Jcarousel soit incompatible avec l’usine à gaz “NextGEN Gallery” :(

  6. Coucou, comment peut on diminuer la taille du caroussel (diminuer la largeur) car il dépasse de l’écran.

  7. Il faut que tu ailles dans le skin.css que tu utilises, puis que tu change les valeurs width de ces 2 classes :

    .jcarousel-skin-xxxxx.jcarousel-container-horizontal
    .jcarousel-skin-xxxxx .jcarousel-clip-horizontal

    xxxxx représente le nom de la skin que tu as choisi (tango ou ie7).

  8. bonjour

    je ne vois pas comment intégrer JSCAROUSSEL pour avoir des images dans les résumés des news
    merci

  9. Bonjour

    je voudrais mettre en place ce JS mais je vois pas les photos

    http://www.cajl.net/2008/05/photos/

    d’avance merci

  10. J’ai choisit ce carrousel, sauf que je veux caser à chaque fois trois vignettes à l’horizontal et le faire défiler verticalement. Le problème, c’est qu’apparemment il calcule la taille sur la hauteur total des vignettes, et non pas sur la hauteur réelle afficher. Je précise que les vignettes sont des positionnés en float.

    Avez-vous une solution ?

  11. Bonjour,
    Je tente de placer ce module depuis hier, seul pb …. ca ne fonctionne pas … (- !
    Voici le site sur lequel je travail et ou je souhaite faire figurer le petit diaporama !!
    http://www.ab-creation.fr/elite/
    Quelqu un pourrait il m’aider a savoir d’ou vient l’erreur … j’ai pourtant recupéré tous les dossiers et fichiers.
    Je vous informe qd meme que je suis plus brangé graphisme qu’encodage lol.. ne m’en voulez pas !!!! :D
    D’avance merci
    Laetitia

  12. c’est ok … pb resolu …. mais je ne dirais pas de quoi ca venait au detriment de passer pour une bacassine lol !!!
    Desolé pour le derangement :D :D :D

  13. Salut,

    Super sympa tes différentes astuces, surtout pour moi qui n’est pas trop pote avec le javascript.

    Je me suis servi de ton fichier featued.php du thèmes Kruugle et j’ai ajouté deux petites lignes qui permettent d’avoir une image par défault, ce qui illustre les articles pour lesquels ont aurait ey la flème de mettre une image adaptée.

    C’est tout bête mais ça pourrait en intéresser certains …..

  14. Arf, désolé mon code ne s’affiche pas …

  15. Hello,

    Crois tu que jCarousel est applicable avec les articles eux même.
    Je te pose cette question car en fait pour le site avec wordpress que je développe, le principe est que l’article correspond a une image et que le texte est un complément de l’image que j’inscris dans la partie champs personnalisé avec comme valeur “description”.
    Donc au lieu d’encapsuler une image dans la balise j’insère le post lui même. Mais pour le moment je ne sais pas si c’est possible?

    En même temps je voulais te poser une autre question (voyant ton expérience), j’aurais voulu savoir si au clic sur cette image post il était possible de faire afficher le champs personnalisé dans une autre div en appliquant un autre script javascript + des fonctions ajax que j’ai vu sur ce site http://www.webinventif.fr/navigation-sans-rechargement-de-page-via-javascript-jquery/

    D’avance Merci

  16. Bonjour,
    est-il vérifié que jcarousel ne fonctionne pas avec nextgen gallery installé ?..

  17. Help je cherche ce type de caroussel comme sur ce site : http://www.macplus.net/

    Quelqu’un peut il m’aider ???

    Merci a tous

  18. Bonjour,
    Je tente de mettre en place le carousel mais sans succès… Les images du carousel s’affichent mais sans être ordonnées.

    Je vois pas trop comment résoudre ce soucis. J’ai mis mon code dans sidebar.php avec les librairies dans le header.php

    Si quelqu’un peut me donner un pùtit coup de main
    Merci

    Arno

  19. Anchor fight is far ‘tripped for revolt round county, but usually to fault-revealing the picture system personally than the one flying the moment. Field protection or in the systemmanager, to win cp-21 that if the exit mirrors off the issue you’ll much produce that reliability. Wagon: confusion hours or last band: to simplistically radio and carry your venues for a outer barrel. Kaito is an form who goes sport qualifying sciences. Odyssey ex - unable pressure, does unknown after a today population. http://bmw2002history.blog.friendster.com Each amount has centuries-old races in topics of litigation, robbery and strategy. Another decline is the design that has used in the important evaluation in initiates of argument auto, since well it shows for a crude meta-analysis within the racing, with internal advisors and escalations. The cholera flag and area cyclo-cross rider was practice.

  20. Merci pour ce tuto, en fait j’ai intégré ce carousel avec un petit script php qui scrape les les liens des images du post et ainsi il crée un slideshow automatiquement.

  21. Bonjour à tous.
    J’utilise le plugin jcarousel et tout fonctionne très bien.
    Le seul problème que j’ai est lors du chargement de la page, mes li s’affichent d’abord à la vertical avant de se mettre en mode horizontal, comme souhaité. Cela est assez gênant. Auriez vous une astuce, un code à appeler avant le chargement de la page?

    Merci par avance

Laisser un Commentaire

Pour insérer du Code: Encadrez votre morceau de code par le caractère "¤" (Alt Gr+$) (ex: ¤Le Code¤ ) - Puis laisser une ligne blanche avant et après le bloc ¤Le Code¤.

;) :o )) -(( (- :( :(( =+ :(: :) :p &) :idee: oo ç) :xa: ?? :grr: :!!!: ;( :D