fef06 Il y a 2 mois Répondre
Bonjour a tous,
j'ai un petit problème de compatibilité avec IE8.
Sur IE8 le slider ne bouge pas, pouvez vous m'aidé?
126 commentaires
Ajouter un commentaire
fef Il y a 2 mois
problème résolu désolé
walter Il y a 27 jours - Répondre
j'ai le même problème que toi , mon slider ne fonctionne pas sous IE. Je ne comprends pas pourquoi ? Pourrai je savoir comment tu as fait pour résoudre le problème?
merci
oomycic Il y a 3 mois Répondre
oomycic
DJEZ Il y a 5 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 6 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 6 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 7 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 7 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 7 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 8 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 8 mois Répondre
Bon, un simple $(window).load(function() { }
a resolu le probleme...
A noté quand meme !
daniboy Il y a 8 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 9 mois Répondre
supper tuto, mais pour la source, t'a oublié de refermer la balise <tittle>!!
kalysss Il y a 9 mois Répondre
J'ai adoré ce tuto, vraiment super , j'adhère.
merci grafikart.
xA_ Il y a 1 an 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
B4rto Il y a 1 an Répondre
Bonjour,
J'ai un petit souçi ^^. En faite je suis entrain de fait un slider similaire mais en position verticale =). Le truc c'est que pour l'animation tu utilise :
self.slider.animate({
:-self.courant*self.saut
},1000);
B4rto Il y a 1 an
Oula désolé il manque la moitié de mon message : donc tu utilise :
self.slider.animate({
left:-self.courant*self.saut
},1000);
Donc moi comme c'est du vertical c'est bien évidamment pas du left que je veux modifié mais plutot mon top ou mon bottom. J'ai essayé avec height,bottom,top rien à faire sa ne défile pas.
B4rto Il y a 1 an
Ok j'ai trouvé mon problème c'est que mes deux boutons n'appartienne pas à la div galerie et je ne veux pas qu'il appartienne à cette div. Donc maintenant comment faire pour faire annimer la div galerie en utilisant des boutons qui sont en dehors de cette div : ).
B4rto Il y a 1 an
Bon j'ai modifié mon code et je suis revenu au point de départ comment faire pour que l'animation se fasse verticalement?
Ensuite autre question j'aimerais faire le saut que de une image par une, et récupérer l'image qui se trouve au milieu de la hauteurcache, la question est comment récupérer le name définie dans le html de l'image qui se trouve pile au milieu?
Pourquoi je veux faire sa?pour faire une galerie dynamique quand on click sur la flêche du bas ou du haut sa affiche l'image du milieu en grand avec des informations dans un contener centrale
.
Un Peu de spam monologue alone...
B4rto Il y a 1 an - Répondre
bon bah problème résolue!!!
maintenant reste à savoir comment récupérer le name l'image au centre de la class .slider ^^
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
pblallican Il y a 2 ans Répondre
Bonjour,
D'abord merci pour ce tuto, il m'a bien aidé, mais j'ai un soucis.
Mon slider fonctionne sous IE 7, firefox, opera mais pas google chrome et je ne vois pas où est mon erreur.
Voici le 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(".precedent");
this.suiv = this.div.find(".suivant");
this.saut = this.largeurCache - 29;
this.nbEtapes = Math.ceil(((this.largeur/this.saut)/2)-1);
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
ninouparadise Il y a 8 mois - Répondre
@payfu
J'ai le même soucis que toi.
En faite c'est à cette étape : "this.nbEtapes".
Selon les navigateurs et avec les même valeur, on obtient un résultat différent.
Sous firefox mon this.nbEtapes = 3 alors que sous Chrome this.nbEtapes = 0.
Donc forcément le slider ne défile pas...
Bref je suis aussi à la recherche de solution à ce problème.
Si tu as trouvé une solution dis le moi stp!
BenjH Il y a 2 ans 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 2 ans Répondre
c'est bon pour le dock mac ^^j'ai pu le personnalisé aussi génial !
godzila9 Il y a 2 ans 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 2 ans 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 2 ans 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 2 ans 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 2 ans 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.
soohikei Il y a 2 ans Répondre
bonsoir j'ai un petit probleme j'ai suivi le tuto (il est tres bien expliqué d'ailleur !)
j'ai le message suivant qui s'affiche quand je click sur suivant 'erreur d'analise de la valeur pour 'left'.declaration abandonnée. je ne vois pourquoi ca m'affiche cette erreur etant donnée que j'ai suivit le tuto et que ca fonctionne ici est ce que vous pourriez m'eclaircir merci d'avance.
Ps : J'aurai aimé savoir quel logiciel de developpement vous me conseiller pour le web je me sers de eclipse php et je pense que je pourrais trouver mieux merci d'avance
soohikei Il y a 2 ans
j'ai oublier de preciser que j'ai donnée un valeur a left " left:-'500px' " meme avec ca ca ne fonctionne pas ...
soohikei Il y a 2 ans
j'ai trouver mon probleme mais je ne sais pas comment le regler je vous explique voici mon code :
<div id="centre">
<div class="slide"><<<<<<<<<<<<<<<mon probleme est que cette div ne ferme pas malgres la fermeture plus bas !
<?php for ($i=0; $i<15; $i++){?>
<a href="#">
<img src="monImage.jpg">
</a>
<?php }?>
</div> <<<<<<<<<<<<<elle est fermer ici
<div class="prec"></div>
<div class="suiv"></div>
</div>
pourriez vous m'aidez s'il vous plait
soohikei Il y a 2 ans - Répondre
probleme resolu !
bonne continuation
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
Charly Il y a 2 ans Répondre
Encore une question ... Ton script ne marche que dans Firefox ... C'est normal ?
Badbart Il y a 2 ans
solution donner 20fois dans les commentaires
Charly Il y a 2 ans - Répondre
Ok mais mon problème est que le jQuery ne s'initialise pas correctement dans Safari et Chrome ... Je dois recharger plusieurs fois la page.
Charly Il y a 2 ans Répondre
Bonsoir,
J'aimerais aussi intégrer le script pour masquer les boutons...
j'ai réussi facilement avec les fonctions hide et show de jQuery...
Le souci c'est que même quand le slider est terminé ... il faut cliquer encore une fois pour que le bouton disparaisse et de plus comment intégrer un effet de fondu au masquage du div ?
Merci d'avance
Badbart Il y a 2 ans
En lisant la documentation Jquery
Charly Il y a 2 ans - Répondre
Enfait c'est bon je m'en suis sorti tout seul... =)
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.
bleuindigo Il y a 2 ans Répondre
bonjour à tous,
je vais en rajouter une couche : merci à grafikart pour ses tutos, toujours pertinent en production.
Cependant je rencontre comme bcp le problème sur ie de 6 à 8. à l'attention de badbart, j'ai relu les posts précédents et j'ai essayé d'en tenir compte sans succès. J'ai mis mon padding à 0 dans les css et j'ai réglé mes margin à 5px.
voici le 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.33;
this.nbEtapes = Math.ceil(this.largeur/this.saut - this.largeurCache/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 à celui ou celle qui pourra m'éclairer.
http://www.fabienwajeman-photographiste.fr/pages/galerie_studio.html
Cordialement
Fabien
Badbart Il y a 2 ans - Répondre
J'ai jeter un coup d'oeil rapide, ton erreur viens du css je pense.
Essaie de rajouter :
.slider a{width:209px;height: 140px;}
Et au passage ton : .slider img a{...} sert a rien vu que tu n'as pas de lien dans les img, ce sont les img qui sont dans les liens donc : .slider a img {...} plutot.
Désolé de pas avoir plus de temps pour ton probleme
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 !
SPAM Il y a 2 ans Répondre
Je ne vois vraiment pas alors ='/
http://www.vu-et-reconnu.fr/slider/index
Si quelqu'un a la gentillesse de jeter un coup d'oeil pour voir !
Badbart Il y a 2 ans - Répondre
5 secondes dans le code source, j'ai pas été plus loin que le head j'ai déjà vu une erreur. Peut-être aucun rapport avec ton probleme, mais tu devrais déjà corriger ça.
SPAM Il y a 2 ans Répondre
Bon après réalisation du tutoriel effectivement il ne marche pas sous ie mais j'ai eu beau essayer toutes les soltion proposé absolument rien ne s'affiche sous ie =/
Quelqu'un a une autre solution que celles afficher au dessus ?
Merci d'avance !
Badbart Il y a 2 ans - Répondre
Il marche très bien sur IE 6+ si on fait bien ce qu'il faut. Toutes les solutions on été donnée plus haut, et si ça continue de pas marché, c que c'est toi qui a du générer un autre problème.
SPAM Il y a 2 ans Répondre
Le fichiers source sont uniquement pour les membres premium ?
Corentin Il y a 2 ans - Répondre
Slt,
Exactement ...
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
Elhoa Il y a 2 ans Répondre
Bonsoir,
Je me suis inscrite au compte premium, car vous indiquez un droit d'accès aux sources.
Vos sources de ce tutoriel m'intéresse mais j'avoue être assez déçu de ne pas avoir à disposition les sources comme vous l'indiquez.
Grafikart Il y a 2 ans - Répondre
Une erreur de ma part, les sources de ce tutoriels sont de nouveau disponible.
Merci de m'avoir signalé le souci
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
ghislain Il y a 2 ans Répondre
En effet le script ne fonctionne pas sur ie, il coince au niveau de la la ligne suivante : self=this;
Il y a t'il une solution pour y remédié? De mon côté la seule solution que j'ai trouver c'est faire le même fonctionnement sans objet mais c'est moins propre.
C'est dommage ce petit problème de compatibilité....
Badbart Il y a 2 ans - Répondre
Déjà répondu 50fois. Lit les commentaires plus haut !
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
Charly Il y a 2 ans Répondre
Bonjour à tous, ça fonctionne pas mal ici,
j'ai juste un petit souci "d'arrêt" du slider, car j'ai mis plusieurs lignes de miniatures du coup ça ne calcule pas bien la longueur totale du slide et ça ne s'arrête pas pas, regardez :
http://www.zipakeu.fr/site_marianne_equipement_maj_1dec/html/produits/demo/prod_banquette_retry_ie_2.html
je n'arrive pas à matérialiser ça dans ma tête, si quelqu'un a une réponse je lui paye des frites sur montpellier !!!
Merci beaucoup !
charly
et bonne continuation à tous !
Badbart Il y a 2 ans - Répondre
Et si tu divises la longueur total par le nombre de ligne ?
Sayber Il y a 2 ans Répondre
Bonjour,
Merci pour ce tuto cependant je bloque à l'animation de la galerie...j'ai suivit point par point le tuto et recommencer plusieurs fois et je n'arrive pas à comprendre pourquoi rien ne se passe. Si une ame charitable voulait bien m'eclairer car la je m'arrache les cheveux !!!
$(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("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/2;
this.nbEtapes = Math.ceil(this.largeur/this.saut);
this.suiv.mouseOver(function(){
self.slider.animate({
left:-self.saut
},1000);
});
}
Badbart Il y a 2 ans
Ligne 25, change :
this.suiv.mouseOver(function(){
en :
this.suiv.mouseover(function(){
ou selon ton utilisation en :
this.suiv.click(function(){
Une majuscule et ça marche pas
Sayber Il y a 2 ans
Merci c'est vraiment con comme erreur...comme souvent.
En revanche j'essaie de le faire fonctionner sur IE, et si je fais un alert(this.largeur), j'ai un NaN qui s'affiche, comme une personne plus haut dans le fil de discussion. J'ai bien essayé de modifier le padding mais rien n'y fait
Badbart Il y a 2 ans - Répondre
Il faut que tu ais les padding et margin pour les images de mis dans le Css, sinon ça marche pas.
Une leger modif aussi ligne 5 :
self=this;
en
var self=this;
kingseb Il y a 3 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 3 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 !
codbooster Il y a 3 ans Répondre
Slt et merci de ta réponse, j'ai copié collé ton code et mon slider ne fonctionne plus, moi j'ai ce code, qui ne fonctionne pas sous IE : (Si vous pouviez jeter un coup d'oeil merci d'avance !).
$(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();
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 / 2;
this.nbEtapes = Math.ceil(this.largeur / this.saut - this.largeurCache / 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);
}
});
}
Badbart Il y a 3 ans - Répondre
Moi je t'ai donner un code légèrement modifier, je n'ai pas dit de le copier coller.
Chez moi ca fonctionne parfaitement sur IE >= 7, Chrome, Opera 9-10, Firefox >= 2, Safari 3 - 4, après a toi de l'adapter, sans doute changé 2-3 choses.
Si tu as un soucis sur les prev/suiv, test des alert un peu partout (this.largeur, this.saut, this.largeurCache, etc ) voir sur quelle valeur IE merde.
codbooster Il y a 3 ans Répondre
Bonjour à tous !
Pour commencer, je tiens à te féliciter pour ton travail qui est vraiment super, encore une fois !
J'ai mis en place ton système de slider sur un site, jusque là pas de problème.
Lorsque je teste la compatibilité des navigateurs, le slider marche sous firefox, chrome et safari.
Mais IE 7 et 8, ne veulent pas faire défiler mon slider, enfait lorsque je clique sur .suiv, la propriété left ne bouge pas.
J'ai pourtant apporté les modifications, cité plus haut, (var self = this;), mais rien n'y fait.
Lorsque je modifie à la main ma propriété left avec le débogeur IE, mon slider bouge correctement.
Cela fait maintenant plusieurs jours que je cherche, auriez-vous une piste pour me débloquer ?
Merci par avance !
Badbart Il y a 3 ans - Répondre
Pour ma part il marche sur IE après légères modif :
$(document).ready(function(){
s = new slider("#galerie","a",0.8);
});
var slider = function(elem,content,ratio){
var self = this;
this.div=$(elem);
this.slider=this.div.find(".slider");
this.content= content==undefined ? this.slider.find("a") : this.slider.find(content);
ratio = ratio==undefined ? 1 : ratio;
this.suiv=this.div.find('.suiv');
this.prec=this.div.find('.prec');
this.largeurCache=this.div.width();
this.largeur=0;
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.numCourant=0;
this.saut=this.largeurCache*ratio;
this.etapes=Math.ceil((this.largeur/this.saut)-(this.largeurCache/this.saut));
this.prec.hide();
if(this.largeurCache>this.largeur){this.suiv.hide();}
// Avancer d'un cran
this.next = function(){
if(self.numCourant>=self.etapes){ return false; }
if(self.numCourant==0){ self.prec.fadeIn(); }
self.numCourant++;
self.div.find(".slider").animate({
"left":-self.saut*self.numCourant
},1000);
if(self.numCourant>=self.etapes){ self.suiv.fadeOut(); }
}
// Reculer d'un cran
this.prev = function(){
if(self.numCourant<=0){ return false; }
if(self.numCourant>=self.etapes){ self.suiv.fadeIn(); }
self.numCourant--;
self.div.find(".slider").animate({
"left":-self.saut*self.numCourant
},1000);
if(self.numCourant==0){ self.prec.fadeOut(); }
}
this.prec.bind('click',this.prev);
this.suiv.bind('click',this.next);
}
Cob25 Il y a 3 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 3 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 3 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 3 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
leknoppix Il y a 3 ans Répondre
@Doncho, j'ai adapté le slider de Grafikart pour mon site avec un système d'automatisation et il marche très bien sous ie6. Grafikart fait des tutos pour montrer des astuces et des points particuliers. Il n'est pas là pour faire des scripts, du css et compagnie fonctionnant à 100% et sur chaque navigateur. Si tu veux le faire fonctionner sous ie6, cherche, essaie de voir et de debbuguer peu à peu. C'est une très bonne solution d'apprentissage.
POur moi la regle numéro 1 en developpement est "apprend par toi même et n'attend pas que la solution tombe du ciel".
Coodialement
Doncho Il y a 3 ans - Répondre
Oui je comprend totalement ton raisonnement. Et crois moi je ne suis pas là pour avoir le tout, tout cuit dans la bouche.
Ne connaissant que de très légères bases en javascript je voulais juste savoir si cela était possible. Donc tu me dis que tu as réussi à l'adapter et cela me va totalement comme réponse. Maintenant je sais que cela est "possible" avec les même bases.
Bonne continuations à tous. A une prochaine fois.
Doncho Il y a 3 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.
Grafikart Il y a 3 ans Répondre
Normalement 2 Sliders peuvent cohabiter. Je le démontre à la fin du tutoriel
alexlp Il y a 3 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 3 ans Répondre
Jolie tuto Grafikart , mais simple question tu étudies quoi ? ( informatique ? )
nicodemus Il y a 3 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 3 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 3 ans Répondre
Tout simplement bravo !!!
Titi Il y a 3 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
Grafikart Il y a 3 ans Répondre
@lioninho11: Le overflow n'est pas mis sur le bon élément,met le sur #partenaires. Regarde plus attentivement le tutoriels
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
Grafikart Il y a 3 ans Répondre
@keusta : j'utilise toujours background sans rien après car je m'en sert généralement pour tout préciser :
background:#FF0000 url(...) left top no-repeat;
C'est plus pratique
Croquelajeunesse Il y a 3 ans
Super tutoriel, mais on ne peut plus télécharger les sources?
Arnaud Il y a 3 ans
Non, il ne souhaite pas qu'on prennent les sources sen avoir vu le tuto, il veut que l'on apprenne plutôt que l'on copie, se qui est compréhensible.
Tof06 Il y a 3 ans
Alors pourquoi faire des sources payantes ?? Si le but de grafikart est de faire apprendre, la partie payante est inutile !
Arnaud Il y a 3 ans
Son travail se doit d'être récompensé. C'est vrai que sa me dégoute mais on peut comprendre vu la qualité de sont travail.
Harry Il y a 3 ans
Pourquoi vouloir obtenir les sources ? Fait le tuto =')
Arnaud Il y a 3 ans - Répondre
Oui voila =P...
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é
Grafikart Il y a 3 ans Répondre
@Fedora : Dans la catégorie jQuery tu devrait trouver ton bonheur. Mais de prochains tutoriel jQuery arrive, reste connecté
@mixnico : Roh, c'est tout bête, tu pourrais trouver la solution tout seul. Si on dépasse le nombre d'étape au lieu de désactiver le bouton, ben on met numCourant à 0 et c'est reparti
Charly Il y a 2 ans - Répondre
C'est possible d'avoir plus d'explications pour le numCOurant à 0 ... Je n'ai pas bien saisi.
Merci de prendre tout ce temps !
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
Grafikart Il y a 3 ans Répondre
@Yataa : Le micro étant dans le portable c'est assez dur d'éviter le son. Mais j'essaierais de mois bourriner mon clavier la prochaine fois
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.
Laisser un commentaire
ahlysee Il y a 10 jours Répondre
J'ai beaucoup aimé ce tutoriel, je l'ai appliqué pour faire une galerie avec des miniatures et une grande image liée à la miniature !
le problème, c'est que j'aimerai que mon slider des miniatures soit infini (dès qu'il arrive à la dernière vignette, il fait apparaitre la première et ainsi de suite)
Une idée ?
Merci pour ces super tutos !