Modules Thèmes Tester Contact
INSCRIPTION
HeaDev script template module et thème pour kwsphp - Article - Javascript Jquery Carousel (Bxcarousel)
Se souvenir de moi ?   Mot de passe perdu ?

Index des articles > Tuto > Javascript Jquery Carousel (Bxcarousel)

Javascript Jquery Carousel (Bxcarousel)

Article posté par Ψjulkien.
Paru le samedi 18 septembre 2010 à 00:30
Vu 1043 fois.

Javascript Jquery Carousel (Bxcarousel)

Script javascript permettant de faire défiler des textes ou des images, ou les deux combiné dans un slider par paquet.


L'installation de ce script nécessite plusieurs point :

Premier point, procurez vous les deux Js sur ces adresses :
http://bxcarousel.com/js/jquery.bxcarousel.min.js (clique droit - enregistrer la source)

http://jqueryjs.googlecode.com/files/jquery-latest-release.zip

Créer si votre thème ne l'a pas déjà un dossier nommé "includes" dans le répertoire de votre thème puis insérer les deux fichiers dans ce dossier (includes).

Ajouter également ces deux images dans ce dossier :

image

image


Maintenant ouvrir le fichier header.php de votre thème avec votre éditeur de texte favoris.

en dessous de cette ligne (généralement vers le haut du fichier) :

Code PHP :
Pour copier le contenu exact du code,
Veuillez citer le message
  1. <?php  
  2. #####!!!#####
  3.  
  4.  
  5.     <link rel="stylesheet" href="themes/'.$K_theme.'/style/style.css" type="text/css" />
  6.  
  7. #####!!!#####
  8. ?>


Rajouter ces lignes :


Code PHP :
Pour copier le contenu exact du code,
Veuillez citer le message
  1. <?php  
  2. #####!!!#####
  3.  
  4.  
  5. <script src="themes/'.$K_theme.'/includes/jquery-latest.js" type="text/javascript"></script>
  6. <script src="themes/'.$K_theme.'/includes/jquery.jcarousel.pack.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8.     <!--
  9.     $(document).ready( function () {
  10.         jQuery('ul.jcarousel-skin-tango').jcarousel({
  11.         display_num: 3,
  12.         move: 1
  13.         });
  14.     });
  15.     // -->
  16. </script>
  17.  
  18.  
  19. #####!!!#####
  20. ?>


Maintenant ouvrir votre fichier style.css de votre thème et rajouter à la fin ces lignes :


Code PHP :
Pour copier le contenu exact du code,
Veuillez citer le message
  1. <?php  
  2. #####!!!#####
  3.  
  4. .jcarousel-container{position:relative;}
  5. .jcarousel-clip{z-index:2;padding:0;margin:0;overflow:hidden;position:relative;}
  6. .jcarousel-list{z-index:1;overflow:hidden;position:relative;top:0;left:0;margin:0;padding:0;}
  7. .jcarousel-list li, .jcarousel-item{float:left;list-style:none;width:160px;height:220px;}
  8. .jcarousel-skin-tango .jcarousel-item{width:160px;height:220px;overflow:hidden;}
  9. .jcarousel-next{z-index:3;display:none;}
  10. .jcarousel-prev{z-index:3;display:none;}
  11. .jcarousel-skin-tango .jcarousel-container-horizontal{width:540px;margin-left:-20px;padding:20px 40px;margin-bottom:10px;}
  12. .jcarousel-skin-tango .jcarousel-clip-horizontal{width:540px;height:230px;}
  13. .jcarousel-skin-tango .jcarousel-item-horizontal{margin-right:10px;background:#f2f2f2;}
  14. .jcarousel-skin-tango .jcarousel-item-placeholder{background:#fff;color:#000;}
  15. .jcarousel-skin-tango .jcarousel-next-horizontal{position:absolute;top:43px;right:5px;width:20px;height:40px;cursor:pointer;background:url(../images/gosign/droite.png) 0% 0% no-repeat transparent;}
  16. .jcarousel-skin-tango .jcarousel-next-horizontal:hover{background-position:-32px 0%;}
  17. .jcarousel-skin-tango .jcarousel-next-horizontal:active{background-position:-64px 0%;}
  18. .jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active{cursor:default;background-position:-96px 0%;}
  19. .jcarousel-skin-tango .jcarousel-prev-horizontal{position:absolute;top:43px;left:5px;width:20px;height:40px;cursor:pointer;background:url(../images/gosign/gauche.png) 0% 0% no-repeat transparent;}
  20. .jcarousel-skin-tango .jcarousel-prev-horizontal:hover{background-position:-32px 0%;}
  21. .jcarousel-skin-tango .jcarousel-prev-horizontal:active{background-position:-64px 0%;}
  22. .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active{cursor:default;background-position:-96px 0%;}
  23.  
  24.  
  25. #####!!!#####
  26. ?>


Maintenant, là ou vous voulez faire défiler vos contenus (texte, image, lien etc...), rajouter se qui suit de manière à pouvoir vous y retrouver :


Code PHP :
Pour copier le contenu exact du code,
Veuillez citer le message
  1. <?php  
  2. #####!!!#####
  3.  
  4. echo '<div class="post wrap page">
  5.     <div class="post-content right-col">
  6.        <ul class="jcarousel-skin-tango" style="padding-left:0;">
  7. <li>                            Contenu 1
  8. </li>
  9. <li>                            Contenu 2
  10. </li>
  11. <li>                            Contenu 3
  12. </li>
  13. <li>                            etc...
  14. </li>
  15. </ul>
  16. <div class="fix">
  17. </div>
  18. </div>
  19. </div>';
  20.  
  21. #####!!!#####
  22. ?>


Comme vous pouvez le constater, il vous suffit de mettre vos contenus entre les balises <li>contenu</li> pour que ceux-ci soient pris en compte dans le slider carousel.

Pour aller plus loin :

-Modification de la taille de chaque contenu :

Chercher ces lignes dans votre style.css:

Code PHP :
Pour copier le contenu exact du code,
Veuillez citer le message
  1. <?php  
  2. #####!!!#####
  3.  
  4. .jcarousel-list li, .jcarousel-item{float:left;list-style:none;width:160px;height:220px;}
  5. .jcarousel-skin-tango .jcarousel-item{width:160px;height:220px;overflow:hidden;}
  6.  
  7.  
  8. #####!!!#####
  9. ?>


le "width" correspond à la largeur du contenu tandis que le "height" correspond à la hauteur de votre contenu.

-Modification de la taille du carousel :

Chercher ces lignes dans votre style.css:

Code PHP :
Pour copier le contenu exact du code,
Veuillez citer le message
  1. <?php  
  2. #####!!!#####
  3.  
  4. .jcarousel-skin-tango .jcarousel-container-horizontal{width:540px;margin-left:-20px;padding:20px 40px;margin-bottom:10px;}
  5. .jcarousel-skin-tango .jcarousel-clip-horizontal{width:540px;height:230px;}
  6.  
  7. #####!!!#####
  8. ?>


Attention les deux width doivent avoir la même taille.

Voilà votre script est prêts à fonctionner.

PS: ceci est mon premier tuto, merci de me le commenter.









Mots clés : tuto,javascript,jquery,plugins,carousel,caroussel,slider,script
[ Imprimer cet article ]
# lecture
Partagez Moi :

Retour Page principale Aide Accueil


copyright headev.com

Tchat  Grives.net  -Ruisseau-des-blaquieres - St Eloi-chateau-gombert - Le jardin d'a côte - Brikwo Tchat Webcam Quizz  Headev  Tchat tchat gratuit - Mister Blague -  Visiotop - La mare du gof - rencontres gratuites - femme cherche femme - rencontre musulman - Annuaire pour site de tchat et rencontre - Label pour site de tchat