Tutoriel Vidéo jQuery : Slider Javascript avec jQuery

DJEZ Il y a 1 mois Répondre

Bonjour, je ne comprends pas pourquoi je n'arrive pas a adapter le code chez moi.

En fait j'voulais savoir déjà si ca pose problème que certaines photos soient en portrait et d'autre en paysage ?

Ensuite mon soucis:
J'alimente le slider suis au changement de valeur d'un select par:

$("#groupeRepertoire").change(function(){
var recherche = $(this).val();
var recherche = recherche.toLowerCase();
var databis = 'motclef=' + recherche;
$.ajax({
type: "GET",
url: "../pages/requete_photo.php",
data: databis,
success: function(server_response){
if(server_response=='aucune photo') {
$("#groupeRepertoire").next(".erreur-message").fadeIn(500).html(server_response).css('color','red')
$("#galerie").hide(500)
} else {
$("#galerie").show(1000)
$(".prec").show()
$(".suiv").show()
$("#slider").show()
$("#slider").html(server_response)
$("#groupeRepertoire").next(".erreur-message").hide()
s = new slider("#galerie");
}

}
});

});

Suite a ca mon php renvoie dans le #slider ceci:
while($data=mysql_fetch_array($req))
{
$lien_mini=$data['lien_mini'];
$lien_maxi=$data['lien_maxi'];
echo '
<a href="#"><img src="'.$lien_mini.'"></a>
';
}

au niveau du javascript je suis arrivé a ceci
var slider = function(id) {
self=this;
this.div = $(id);
this.slider=this.div.find("#slider");
this.largeurCache = this.div.width();
this.largeur=0;
this.div.find('a').each(function(){
self.largeur+=$(this).width();
self.largeur+=parseInt($(this).css("padding-left"));
});
this.prec = this.div.find(".prec");
this.suiv = this.div.find(".suiv");
this.saut = this.largeurCache/2;
this.nbEtapes = Math.ceil(this.largeur/this.saut - this.saut);
this.courant=0;

this.suiv.click(function(){
self.courant++;
self.slider.animate({
left: -self.courant*self.saut
},2000);
});
}
donc celon le tuto je devrai déjà pouvoir décaler. Cela ne fonctionne pas et je pige pas pourquoi.

Auriez vous de l'aide svp ?

mako75 Il y a 2 mois Répondre

Franchement, avec des tutos déstressant comme ça, le code semble simple et évident.
Ça me fait penser à une proverbe appris à l'école : Ce qui se conçoit bien s'énonce clairement et les mots pour le dire arrivent niaisement... Mille merci !

nicodu43 Il y a 3 mois Répondre

Super tuto , par contre si je veux appliquer cette fois la translation que tu as expliquer à la fin avec le site yoda , (point de départ accueil par exemple) ce qui veut que si je clique sur contact le site glisse jusqu’à contact , est ce le même principe ??
que mettre dans mon menu car mon menu est gerer par des <ul> ?

nad Il y a 4 mois Répondre

this.largeur=0;
this.div.find('a').each(function(){
self.largeur+=$(this).width();
});
alert(this.largeur);
}

Ca m'affiche 0 et non 15

nad Il y a 4 mois Répondre

j'ai un probleme


$(document).ready(function(){
s= new slider("#galerie");
});

var slider = function (id){
self=this;
this.div=$(id);
this.largeurCache = this.div.width();

arcadian Il y a 4 mois Répondre

slt à tous

juste un retour de mon expérience avec ce tuto

tout marche nickel

juste besoin de modifier
this.nbEtapes = Math.ceil(this.largeur/this.saut - this.largeurCache/this.saut);
par
this.nbEtapes = Math.round(this.largeur/this.saut - this.largeurCache/this.saut);
en effet (et ne me demander pas pourquoi) il semble que les navigateurs(CHROME SAFARI FIREFOX IE)n’interprète pas de la même manière le ceil()

du coup je les laisses choisir eux même avec un round()

voilà et merci pour le tuto

daniboy Il y a 4 mois Répondre

oups je voulais dire..

window.onload = function() {
s = new slider ("#galerie");
} ;
qui attend 'vraiment' que la page se charge completement

daniboy Il y a 4 mois Répondre

Bon, un simple $(window).load(function() { }
a resolu le probleme...
A noté quand meme !

daniboy Il y a 4 mois Répondre

Bonjour ! Merci pour le tuto vraiment excellent...
j'ai cependant un gros probleme avec chrome, la ligne recuperant normalement la largeur de l'image

self.largeur+=$(this).width();

ca ne fonctionne pas bien avec Chrome (14.0.835.186) qui indique 0 si on ne renseigne pas les champs width de chaque image...!! on dirait que les images se chargent plus tard sur ce navigateur... sous explorer ca marche..

ca fait pareil chez vous ??? auriez vous une solution c'est vraiment étonnant et problématique !

merci..

mmm719 Il y a 6 mois Répondre

supper tuto, mais pour la source, t'a oublié de refermer la balise <tittle>!!

kalysss Il y a 6 mois Répondre

J'ai adoré ce tuto, vraiment super , j'adhère.

merci grafikart.

xA_ Il y a 10 mois Répondre

Bonjour !

Tout d'abord, merci pour le tuto très pédagogique et très instructif.

J'ai un petit souci, car j'ai téléchargé les sources, sans les modifier et cela ne fonctionne pas sous Chrome et Safari ...

Y'a t il une solution ?

Merci

igors Il y a 1 an Répondre

bonjour,
j'ai téléchargé les sources, mais quans j'ouvre le fichier index (slider finit)
j'ai que le background qui s'affiche... C'est moi ou le dossier slider finit = au dossier "pour commencer" ?

Merci d'avance,
Igor.

Payfu Il y a 1 an Répondre

Bonjour,

Merci et bravo pour ce tuto c'est exactement ce que je cherchais. Ma question ne concerne pas un problème de compatibilité mais plutôt un problème concernant les limites du script.

En effet, je m'en sert pour présenter les photos d'une galerie photos, cependant il y a une catégorie de plus de 100 photos.
Le script affiche bien toutes les photos jusqu'à une largeur du .slider de 10000px mais si le .slider va delà de 10000 pixel il recharge complètement le div au début pour arriver à la bonne photo.
Résultat si je veux voir la photo n°20, il slide en une seconde les 19 autres photos... c'est visuellement pas très agréable.

La seule solution que j'ai pour le moment c'est de mettre le défilement à 0 seconde.

Quelqu'un rencontre t-il ce pb et aurait la solution ?

Merci

BenjH Il y a 1 an Répondre

Hello,
Tout d'abord milles merci pour le tuto, comme toujours c'est génial

Mais... j'ai un petit soucis...
Je ne comprend pas pourquoi je n'ai aucuns "mouvement" de la part de ma div galerie...
Quand je regarde sur firebug et que j'appuie sur la flèche suivant, je vois bien que les coordonnées change, mais pourtant rien ne se passe...
Je n'ai pourtant aucunes erreurs visibles d'après moi au niveau du code...

Si quelqu'un peu me venir en aide je l'en remercie d'avance.

Bonne journée, amicalement BenjH

tagcash Il y a 1 an Répondre

c'est bon pour le dock mac ^^j'ai pu le personnalisé aussi génial !

godzila9 Il y a 1 an Répondre

Simpa l'idée d'utiliser un overflow:hidden avec un jeux de position absolut et relative ; moi j'utiliser un clip:rect(...), mais il y a quelque petit probléme d'intégration sur IE5 notament !!

Mais pour ce qui est du Jquery .. ce serait mieux d'utiliser du javascript pur ! c'est un peu plus long, mais au moin on est pas dépendant de jquery

MikashV Il y a 1 an Répondre

Salut, et merci pour le tuto, je vais m'en servir pour mes élèves :-) si tu le me le permet bien sur :-)
Juste un petit supplément pour aller plus loin et respecter la notation Jquery jusqu'au bout : on peut très bien déclarer la fonction en utilisant jQuery.fn.slider = function() et du coup instancier la fonction comme un plugin de jquery en notant : $('#galerie).slider();
Bye et encore merci pour la clarté de tes explications

aga Il y a 1 an Répondre

Bonjour

Merci pour ce très bon tutoriel. Grâce à vous j'ai osé à m'y mettre!
J’ai beaucoup appris (une impression peut-être), mais je bloque toujours sur un point

J'ai un problème de décalage de mes images. Comme si les margin et les padding n'ont pas étaient pris en compte. Chaque saut suivant, le décalage s’agrandit.

J’ai vérifié tous ce que j’ai pu. Je ne trouve toujours pas de solution.
… et ça me rend folle !!!

J’ai vraiment besoin d’un petit coup de pouce

Merci d’avance

tagcash Il y a 1 an Répondre

j'ai un énorme problème !!
GrafikArt comment tu a fait pour que ton dock soit noir ???? sur ton mac ???
merci de ton aide, sinon super ton tuto

R-transat Il y a 1 an Répondre

Bonjour, très bon tuto que j'avais déjà utilisé cependant j'aimerais que la dernière image reste coller à la zone du slider pour ne pas voir le fond mais impossible

Le nombre d'étapes est modifié comme ceci : this.nbEtapes = Math.ceil(this.largeur/this.saut - this.largeurCache/this.saut)-1;

Donc le -1 fonctionne mais je vois quand même un peu de fond du slider.

Comment corriger cela ? Merci d'avance.

copernicus Il y a 2 ans Répondre

merci pour ce tutoriel tres tres excellent. Mais svp j´ai 2 questions trop trop importantes pour moi et je serai reconnaissant si vous presenter aide:
- Comment faire afin que si on clique une image elle se positionne au centre du slider, autrement l´image centree est celle qui est cliquee "Image Courante".
- Comment ajouter un scroller (par exemple en bottom du div gallerie)?

Merci

jmk Il y a 2 ans Répondre

Tout d'abord merci pour tes tutos.

J'ai un problème avec Safari (ça marche avec Firefox) !

Dans le bout de code suivant :


this.content.each(function(){
self.largeur += $(this).width();
self.largeur += parseInt($(this).css("margin-left"));
self.largeur += parseInt($(this).css("margin-right"));
self.largeur += parseInt($(this).css("padding-left"));
self.largeur += parseInt($(this).css("padding-right"));
});

$(this).width() retourne 4 dans Safari et la bonne valeur sous Firefox.

As-tu déjà rencontré ce problème ?

D'avance merci.

Charly Il y a 2 ans Répondre

Bonjour,

Y'a-t-il un moyen de créer un slider sans fin ... C'est à dire qu'il revient automatiquement au début des vignettes quand on est à la fin du slider ?

Merci d'avance

MooreJENNY30 Il y a 2 ans Répondre

I strictly recommend not to hold back until you earn big sum of cash to buy goods! You should just take the <a href="http://bestfinance-blog.com/topics/personal-loans ">personal loans</a> or term loan and feel comfortable

Robin31 Il y a 2 ans Répondre

Excellent tuto, très professionnel...
tu as une aisance décourageante !!!!
Très bonne continuation

Kaharon Il y a 2 ans Répondre

Bonjour très bon tutoriel mais moi quand je met du texte, il ne se met pas à la suite comme les lien ou les images, il s'aligne vers le bas donc comme mon bloc ne fait que 106 pixels de haut, bas on voit vite plus rien comment faire. J'ai testé de mettre p{dispaly:inline;} mais dès que c'est des bloques bah ça ne marche plus.

the_warriors Il y a 2 ans Répondre

bah voila le problème ! tu regardes un tuto c'est pas pour trouvé une réponse dans les coms !
donc une précision dans le poste sera l'idéal et s'en doute le rajouté dans les sources

sou1987 Il y a 2 ans Répondre

slt S.V.P la vidéo se termine pas elle marche qu'une minute et stoppe et j'arrive pas à suivre le tuto

Florent Il y a 2 ans Répondre

Très bon tuto =), par contre comment mettre du texte sur les images ? J'ai mis un span après le <img /> mais il m'affiche mon texte avant l'image.

mp Il y a 2 ans Répondre

J'ai régler mon problème. Il n'avait pas de rapport avec le slider et le tuto. Mon html nétait pas a 100% valide, donc le slide ne pouvait pas fonctionner.

Merci !

mp Il y a 2 ans Répondre

Salut à tous ! Super tuto en passant :p

J'ai un problème, sous Safari, lors que je clique sur les flèches précédents ou suivant, rien ne fonctionne, j'ai mis un alert dans la méthode .click du jQuery, ne fonctionne pas non plus.

Voici le bout de code :
this.suiv.click(function(){
alert("je suis dans le clique");
if(self.courant<=self.nbEtapes){
self.courant++;
self.slider.animate({
left:-self.courant*self.saut
},1000);
}
alert(self.slider.css("left"));
});

Y'a-t-il des problèmes de compatibilité entre jQuery et Safari ?

Merci beaucoup à tous ! Bonne journée

oniz Il y a 2 ans Répondre

Re, j'ai trouvé, probleme css class slider non mis en absolute

oniz Il y a 2 ans Répondre

Bonsoir a tous,

Et merci pour les tuto, tres bien fait.

Par contre forcement y a un truc qui me bloque.

Deja lorsque j'alerte sur this.largeur il me retourne 0 une 3 fois sur 4, si je change de page et que je reviens il me donne la bonne largeur.

De plus j'aimerais me servir de cette methode pour defiler des images en boucle mais avant d'attaquer la boucle ca serait cool que ca se deplace au moins une fois ;-)

donc je part dans le meme principe sauf que je n ais pa de fleche pour bouger et pas de lien que des images.
Si vous pouview m'expliquer mes erreurs

voila mon code :


// JavaScript Document

$(document).ready(function(){


s = new slider("#galerie");

})


var slider = function(id){

var self=this;

this.div = $(id);

this.slider = this.div.find(".slider");


this.largeurCache = this.div.width();


this.largeur=0;

this.div.find('img').each(function(){
self.largeur+=$(this).width();
});

this.saut = this.largeurCache;

this.nbEtapes = Math.ceil(this.largeur/this.saut);
alert(this.largeur);

self.slider.animate({
left:-left.saut
},5000);

}

Merci a tous.

Evy Il y a 2 ans Répondre

je l'ai utlisé...MERCI!

Mickael Il y a 2 ans Répondre

En ce moment c'est un vrai déluge de plug-in jquery! Un nouveau slider viens de sortir et il est vraiment génial!
Je vous invite à venir le tester. http://www.outils-du-web.com/2010/03/jquery-images-slider-nivo-slider.html

nykoooo Il y a 2 ans Répondre

vraiment simpa

SPAM Il y a 2 ans Répondre

J'ai trouver merci encore !

Et bravo pour ce tutoriel !

SPAM Il y a 2 ans Répondre

Ah oui effectivement par contre les images ne défilent pas !

Je vais essayer de trouver !

Merci Badbart !

Benoît Il y a 2 ans Répondre

Salut,
tout d'abord merci pour ce tuto il m'a été d'une grande aide pour réaliser mon portefolio. Cependant j'ai un petit souci, je dois recharger une fois la page pour que le slider marche … est-ce normal ?

Merci a+

gaaraa Il y a 2 ans Répondre

Bha oui ça je sais, le slide marche trés bien ma div s'anime et tout, mais la barre de défilement du navigateur monte en haut de la page, alors que nous on est plus bas.

gaaraa Il y a 2 ans Répondre

bha oui ça je sais, le slide marche trés bien pas de soucis, mets la barre de défilement du navigateur monte en haut de la page, alors que on se situe plus bas.

pamou Il y a 2 ans Répondre

Tu pourrais mettre l'id="#" a la div que tu veux faire slider...

gaaraa Il y a 2 ans Répondre

Salut ,

j'ai utilisé une partie de ce tuto pour défiler une div horizontalement( en modifiant top en clickant sur un bouton, ce la marche nikcel, cependant,
mon animation se situe en milieu de la page, et quand je click l'animation marche, mais ma page défile vers le haut, si tu sais me guider ça sert sympa de ta part .

merci d'avance

agence web Il y a 2 ans Répondre

merci pour le tutoriel

__fabrice Il y a 2 ans Répondre

salut,

Tres bon tuto. J'aurai peut-etre fait un plugin sous cette forme :

$.fn.slider = function(options) {
...
...
}

C'est plus élégant, mais je fais le difficile là

Fabrice

Baptiste Il y a 2 ans Répondre

Salut!
il faut avoir un compte, et à ce moment là en cliquant sur un petit plus tu peux envoyer ton site!
@+

Evy Il y a 2 ans Répondre

encore merci pour ce tuto. Moi qui connaissait mal JQuery grace a toi c'est beaucoup plus clair! ca se voit que tu etais prof, je n'ai jamais vu de tutos si bien expliqué dans les details!
Ceux qui disent qu'il n'est pas fait pour IE, se trompent il peut tout a fait etre integré avec IE, il suffit de bien mettre "var self=this;" comme l'a bien indiqué graftika dans le tuto et non pas comme je l'ai lu plus haut "self=this". Et de bien indiquer dans le CSS les padding et marges = padding:0 / margin:0 Sinon effectivement avec IE ca ne fonctionnera pas. C'est tout bete en faite, pas besoin de tout changer ou de chercher plus loin. Je ne sais pas comment on fait pour poster son site a "pour ceux qui l'on essaye".

aline Il y a 2 ans Répondre

c'est vraiment de qualité, très bien expliqué, compréhensible même pour des gens comme moi qui ne sont pas d'un niveau très avancé. Je te remercie pour le temps que tu as passé à faire le tuto.

Bravo

ghislain Il y a 2 ans Répondre

oups oui pardon....
Par contre j'ai un problème au niveau de l'overflow sous ie6, le slider dépasse comme si l'overflows n'était pas prix en compte....
Voici le liens : http://ggouhier.dyndns.org/ets_marchand/index.php?p=realisations&categorie=panneau_solaire

Limonade Il y a 2 ans Répondre

Un petit message pour te dire un grand merci pour ce tuto ... au passage, je voudrais aussi te féliciter pour ce fantastique site que tu mets à notre disposition, c'est une véritable mine d'or :-) MERCIIIIIIII

Ensuite j'aurais une petite question par rapport à ce tuto; je l'ai suivi en rendant les flèches actives au survol de la souris. J'ai aussi fait en sorte que la flèche entraine le décalage tant qu'on reste dessus. Mon souci est que le décalage ne se fait pas en continue, il se fait par acoups.

Voici mon code:


$(document).ready(function(){

s = new slider("#galerie");

});
var slider = function(id){
var self=this;
this.div=$(id);
this.slider=this.div.find(".slider");
this.largeurCache=this.div.width();
this.largeur=0;
this.div.find('a').each(function(){
self.largeur+=$(this).width();
self.largeur+=parseInt($(this).css("padding-left"));
self.largeur+=parseInt($(this).css("padding-right"));
self.largeur+=parseInt($(this).css("margin-left"));
self.largeur+=parseInt($(this).css("margin-right"));
});

this.prec = this.div.find(".prec");
this.suiv = this.div.find(".suiv");
this.saut = this.largeurCache/1.2;
this.nbEtapes = Math.ceil(this.largeur/this.saut-this.largeurCache/this.saut);
this.courant=0;

this.suiv.mouseover(function(){
while (self.courant<=self.nbEtapes){
self.courant++;
self.slider.animate({
left:-self.courant*self.saut
},1000);
}
});

this.prec.mouseover(function(){
while (self.courant>0){
self.courant--;
self.slider.animate({
left:-self.courant*self.saut
},1000);
}
});
}

Est ce que tu pourrais me donner quelque piste pour que le décalage ne se fasse pas par accoup?!?!?!?! Si qui que ce soit à une suggestion, je suis preneur !!!

En tout cas si tu n'as pas le temps pas de soucis. Encore merci pour ce magnifique site :-)

Merci à tous,

Limonade

Sab-R Il y a 2 ans Répondre

Super le tuto !!!!
Grace a toi jme suis fait un site quasiment pro , je vais tester cette manipulation sur mon site sous drupal , j'espere ne pas trop galérer .

Continu tout test tuto , j'aime beaucoup ceux que tu poste sur weecast :D

Aleks Il y a 2 ans Répondre

Bonjour, chez moi ça ne marche pas : http://www.megaupload.com/?d=R1TSWR12.
Si quelqu'un pouvez me venir en aide je lui en serait reconnaissant.
Merci d'avance.

Charly Il y a 2 ans Répondre

coucou c'est encore moi !!

j'ai résolu le problème avec un peu de bidouille en fait j'ai donné directement une largeur à this.largeur, ma largeur d'origine (qui ne bougera jamais...) et voilà ça marche remerci Raton c'est top !

charly

kingseb Il y a 2 ans Répondre

super tuto..juste un petit detail interessant..comment faire si je veux faire pour centrer une image..en cliquand dessu?...

codbooster Il y a 2 ans Répondre

Salut à tous, juste un mot pour vous dire que j'ai résolu mon problème(Le slider ne marchait pas sous IE).

En fait le problème venait de ces lignes :
self.largeur += parseInt($(this).css("padding-left"));
self.largeur += parseInt($(this).css("padding-right"));
self.largeur += parseInt($(this).css("margin-left"));
self.largeur += parseInt($(this).css("margin-right"));

En fait, lorsque ma boucle venait sur mes images de flèche suivante et précédente, en fait je n'avais pas défini le margin ni le padding. Le retour était donc "auto" au lieu de 20px, par exemple et il essayait de faire le parInt sur "auto" ce qui me renvoyait un "NaN" et qui transformait mon self.largeur en NaN. Toute la suite était donc annulée ...

Merci et à bientôt !

Cob25 Il y a 2 ans Répondre

Merci beaucoup pour cet excellent tuto très bien expliqué à tous les niveaux.
Je connais un peu java-script mais pas jQuery et je trouve qu'il facilite grandement son approche en le synthétisant. On arrive tt de suite à l'essentiel et le code est facilement compréhensible lorsque l'on connait effectivement l'orienté objet.

1. Pour ceux qui se posent la question au niveau des bibliothèques intégrées.
Pour cela il faut aller sur le site de JQuery et prendre celle qui est compressée.

2.Pour oltenzano: relis ton code et corrige l'erreur d'écriture des padding et non paddin. NaN signifie Non a Number pour info.


Encore merci

Oltenzano Il y a 2 ans Répondre

Salut tous le monde, un grand bravo pour ce super tuto !!
mais comme tous le monde j'ai un petit problème...pour le CSS pas de soucie, je l'ai intégrer dans ma page où je le voulais, ce qui me donne :

#galerie{
overflow:hidden;
position:relative;
margin-top:17px;
margin-left:10%;
background:#c8c8c8;
height:106px;
}

par contre quand j'exécute le le js a ce nivo :

$(document).ready(function(){
s = new slider("#galerie");
});
var slider = function(id){
self=this;
this.div = $(id);
this.slider=this.div.find(".slider");
this.largeurCache = this.div.width();
this.largeur=0;
this.div.find('a').each(function(){
self.largeur+=$(this).width();
self.largeur+=parseInt($(this).css("paddin-left"));
self.largeur+=parseInt($(this).css("paddin-right"));
self.largeur+=parseInt($(this).css("margin-left"));
self.largeur+=parseInt($(this).css("margin-right"));
});
alert(this.largeur);
}

j'ai le message "NaN" qui s'affiche...je comprend pas vraiment et je ne trouve pas vraiment de solution.
quelqu'un aurait-il une idée ?
Merci !

Ink Il y a 2 ans Répondre

problème résolut, je n'avais pas vus le liens ver le site jquery...:s
merci en tous cas et vivement d'autres tutos d'aussi bonne qualité

Ink Il y a 2 ans Répondre

Salut tous le monde ! déjà...félicitation pour ses super tutoriels...tout est très bien expliqué, ça permet de vraiment bien progresser.
Sinon j'ai hélas un petit problème...je début en jquery et je me retrouve bloqué dés que tu passe à cette partie. quand je teste des "alert(id);" aucune réponce ne s'affiche sur mon navigateur (je suis sur Firefox, hébergé en interne sur wamp). je pense que cela viens du fait que je n'ai pas le lien sur le "jquery.js" dans mon "head" du html. le problème c'est que je ne sais pas ce que dois contenir ce fichier. Je suis un peu largué, et je n'ai pas trouvé grand choses sur le net. quelqu'un aurai un petit liens pour m'aider ?
Merci et encore bravo ou les tutos, ne change rien

Doncho Il y a 2 ans Répondre

Merci pour ce superbe tutoriel. Maintenant crois tu qu'il serait possible de l'adapter, comme cité précédemment, pour la totalité des navigateurs. A savoir IE6, navigateur toujours massivement implanté sur les machines.

Merci pour ta future réponse.

alexlp Il y a 2 ans Répondre

J'ai une petite question à propos de ce slider. J'arrive parfaitement à l'adapter en fonction de ce que je dois faire. Mais voilà un problème. Sur une page, je dois afficher deux sliders. Et un des deux ne fonctionne pas. Est-ce qu'on peut mettre deux sliders dans une même page ?

Aquario Il y a 2 ans Répondre

Jolie tuto Grafikart , mais simple question tu étudies quoi ? ( informatique ? )

nicodemus Il y a 2 ans Répondre

Bon pour prévenir tous le monde , aprés quelques nombreux essais j'ai enfin résolut le probléme.

nicodemus Il y a 2 ans Répondre

Bonjour,
Tout d'abord bravo pour ce tuto.
Bon maintenant, j'ai installé le slider sur mon site et tout fonctionne à merveille, mais je suis en train de faire quelques ajouts et je coinse sur le fait que lorsqu'on clique sur le bouton suivant alors qu'on se trouve sur la derniére images, le slider revienne en position initial.

Or j'arrive à le renvoyé en position initial mais pour cela quand je clique sur le bouton suivant, le slider se decale d'une image sur la droite(image qui n'existe pas) avant de lancer la réinitialisation.

Je me demander si quelqu'un pouvait m'eclairer un peut afin de résoudre se petit problême?

Merci d'avance.

Cordialement Nicodemus.

logiquegraphique Il y a 2 ans Répondre

Tout simplement bravo !!!

Titi Il y a 2 ans Répondre

Bonjour,
Un grand bravo pour ce tutoriel très instructif ! Je suis encore novice en JQuery (j'étais un grand fan de Mootools, mais je m'y met depuis quelques jours) et j'ai trouvé ce tutoriel clair et précis.
J'aimerais également apporter une petite "amélioration" qui n'en n'est pas réellement une et qui résout le problème de "slide continu" si on clique plusieurs fois sur ".suiv" et ".prec" très rapidement. Il suffit de remplacer les instructions :

self.slider.animate({

Par :

self.slider.stop().animate({

;)

totof Il y a 3 ans Répondre

Bonjour,
J'ai suivi ce tuto comme beaucoup d'autres de ce site. Vraiment très bien expliqué et clair. J'ai installé ce script sur mon poste en local, mais sous IE(6,7,8) rien ne s'affiche.
Quel peut être le problème ?
Merci et longue vie à votre site.

Weby Il y a 3 ans Répondre

Salut,

Merci pour ce tuto. Il me reste une petite question... Comment faire des saut automatiquement avec un temps paramétré ?

++ ;-)

X2theZ Il y a 3 ans Répondre

salut et encore merci, tuto très instructif.
est-il possible de faire un slider vertical? (par exemple sur une liste <ul> ou sur un tableau)

Pak Il y a 3 ans Répondre

Personne ne me répond? Je cherche à mettre des liens genre 1 2 3 4 5 ... et d'atteindre la bonne images?
Merci d'avance

Pak Il y a 3 ans Répondre

Salut à vous tous, je cherche comment mettre un bouton avec la fonction goto. Quelqu'un peu me guider?
Merci d'avance

Karewin Il y a 3 ans Répondre

Le soucis est que dans le pack proposé en téléchargement, dans Slider Finit ça ne marche pas.
Enfin, les flèches n'apparaissent pas :x

Enfin c'est un très très très bon tutoriel comme toujours.

bast_65 Il y a 3 ans Répondre

bonjour,
très bon tuto qui peut servir a tout le monde, j'aime beaucoup.
Juste une petite question, n'est-ce pas plus simple de mettre toute les image dans une div et de calculer le .width() de cette div au lieu de faire une boucle pour chaque image et de calculer la longueur+margin+padding de chacune ?
encore bravo en tout cas pour le tuto

Alexis Il y a 3 ans Répondre

Super tutoriel ! Moi qui n'y connais rien en JS, c'est assez sympa de voir comment sa marche (même si je comprend pas certain truc, mais c'est normal étant donnée que je sais rien faire ^^).
Merci !

Reg Il y a 3 ans Répondre

petit défaut corrigible très facilement en étant un peu plus strict et rigoureux :

var self = this; (et non self = this;)

Pour une fois que IE fait bien les choses en étant pas trop permissif, rendons-lui hommage.

Reg Il y a 3 ans Répondre

Apparemment pas compatible ie ceci étant ... ce qui le rend de suite un peu obsolète.
On doit pouvoir corriger ce défaut.

meringuecitron Il y a 3 ans Répondre

J'ai trouvé une application qui est à peu près la même sauf que c'est du scrolling horizontal :
http://demos.flesler.com/jquery/localScroll/

Tes tutos sont vraiment géniaux, je me demande si cette application est aussi simple à mettre en place...

kiwi Il y a 3 ans Répondre

ben voila pile poil se que je chercher
merci beaucoup
c enorme

Jbi3 Il y a 3 ans Répondre

En faite après un peu de persévérance c'est bon.
Très bon tuto.

Jbi3 Il y a 3 ans Répondre

Bonjour,

J'ai un problème tout cela fonctionne à merveille sous Safari et Chrome mais pas sous Firefox. Le slide continue après le dernier élément, j'ai essayé plusieurs choses mais sans résultat. Voila mon code.

$(document).ready(function(){
s = new slider("#galerie");
});

var slider = function(id){
var self=this;
this.div = $(id);
this.slider = this.div.find(".slider");
this.largeurCache = this.div.width();
this.largeur=0;
this.div.find('a').each(function(){
self.largeur+=$(this).width();
self.largeur+=parseInt($(this).css("margin-left"));
self.largeur+=parseInt($(this).css("margin-right"));
self.largeur+=parseInt($(this).css("padding-left"));
self.largeur+=parseInt($(this).css("padding-right"));
});
this.prec = this.div.find(".prec");
this.suiv = this.div.find(".suiv");
this.saut = this.largeurCache;
this.nbEtapes = Math.ceil(this.largeur/this.saut);
this.courant=0;

this.suiv.click(function(){
if(self.courant<=self.nbEtapes){
self.courant++;
self.slider.animate({
left:-self.courant*self.saut
},1000);
}
});

this.prec.click(function(){
if(self.courant>0){
self.courant--;
self.slider.animate({
left:-self.courant*self.saut
},1000);
}
});
}

Merci d'avance pour la réponse

hitmax Il y a 3 ans Répondre

J'aime bien dommage que tu ne n'adaptes pas le code pour IE6. En même temps, si on code pour IE6 c'est que en général on a pas le choix :D
Bonne continuation à toi et merci encore du temps que tu investis pour tes tutos.

P.S: Pas glop les absolute

lioninho11 Il y a 3 ans Répondre

Slt,

Encore merci pour le tuto!

En fait j'ai un petit problème quand je mets la "width" de la div de class "silder" à 5000px, la barre de navigation du navigateur augmente et quand je mets overflow

Fael Il y a 3 ans Répondre

Finalement j'ai utilisé utilisé pour la page de la galerie de mon site, le fait d'avoir la possibilité de pouvoir placer plusieurs sliders indépendants est un gros plus. Par contre si on veut placer du texte ça risque d'être plus compliquer.

dhoko Il y a 3 ans Répondre

Sympa le tutoriel mais est il possible que t'héberges les vidéos sur d'autres serveur ? car depuis quelques temps je galère un max pour télécharger tes vidéos.

leknoppix Il y a 3 ans Répondre

Que dire encore, merci pour ce superbe tuto. J'aimerais bien faire des tutos pour les applications que je crais, mais je n'y arrive pas. POurrais tu me dire le nom du logiciel pour faire de la capture video sous mac même si c'est payant? Merci d'avance.

s-wf Il y a 3 ans Répondre

merci pour le super tuto
j'ai un petit problème l'alert de la de largeur m'affiche 0 Oo
voici le code "comme si tu l'avais pas xD"
$(document).ready(function(){
s = new slider("#galerie");
});
var slider = function(id){
self = this;
this.div = $(id);
this.largeurCache = this.div.width();
this.largeur=0;
this.div.find('a').each(function(){
self.largeur+=$(this).width();
});
alert(this.largeur);
}
et le css

#galerie
{
position:relative;
background:#bababa;
height:160px;
overflow:hidden;
}
.suiv
{
position:absolute;
top:0;
right:0;
background:url(images/suiv.jpg) no-repeat right top;
width:50px;
height:160px;
}

desoler pour le long post

Fael Il y a 3 ans Répondre

Ahh, celui là je l'attendais vraiment, super comme d'habitude.

keusta Il y a 3 ans Répondre

quand tu utilise la propriété background, oublie pas -color
je dis ça je dis rien...

Deezer Il y a 3 ans Répondre

Enfin, cette putain d'originalité !!!

Babou Il y a 3 ans Répondre

Merci pour ce super tuto super bien fais Continue comme sa

Ravi Il y a 3 ans Répondre

merci pour le tuto Grafikart ^^

Asti Il y a 3 ans Répondre

Je tenais à souligner ta gentillesse, car un tuto d'une qualité comme celle ci aurait pu être payant.
Beau geste pour la communauté

mixnico Il y a 3 ans Répondre

Salut, Encore un très bon tuto. Comment peut-on, quand il n'y a plus d'images dans le silder, le faire revenir au début(comme dans le slider du site de tutoriaux de Mattrunks) ?

Fedora Il y a 3 ans Répondre

Encore une fois pour ce tutoriel très expliqué et très compréhensible. Merci vous êtes des génies
un petit question : y a t'il une autre partie de formation sur jquery ? (même payant)

Jasse29 Il y a 3 ans Répondre

Bonjour,

Et un tutoriel de plus qui est de grande qualité... Mais où va-t-il s'arrêter ?

J'espère le plus tard possible ! LOL

Le plus fou, c'est que c'est le tutoriel qui va me servir pour améliorer mon site (en cours de construction)

Yataa Il y a 3 ans Répondre

@Grafikart : Je me doute bien que c'est pas évident d'atténuer le son des touches avec un micro intégré, c'était mon 1/4 d'heure casse c....

Makamo Il y a 3 ans Répondre

super ton tuto mais quand je test dans ie les source que tu donne rien n'est afficher.
dommage pour la compatibilité.

merci beaucoup pour se super tuto

Alex Trouvetou Il y a 3 ans Répondre

Félicitation encore une fois pour ce tutoriel très expliqué et très compréhensible.

Alex Trouvetou

Arnaud Il y a 3 ans Répondre

Mdr ... le coup des touches ... Non rien a dire une foi de plus Supers tuto merci

Asti Il y a 3 ans Répondre

Magnifique tuto !! Ce qu'il me fallait merci !!

Yataa Il y a 3 ans Répondre

Excellent tuto rien à redire sauf :
le bruit des touches du clavier Mac qui est assez stressant !! ou alors c'est toi qui tappes trop fort.

Désolé mais cela m'a fortement gêné à l'écoute.
Bonne continuation.