Caroufredsel
Fermé
ickyknox
Messages postés
1157
Date d'inscription
jeudi 13 décembre 2007
Statut
Membre
Dernière intervention
17 mars 2024
-
4 juin 2012 à 21:07
Tralala8 Messages postés 120 Date d'inscription mercredi 17 août 2011 Statut Membre Dernière intervention 12 février 2013 - 15 juin 2012 à 00:26
Tralala8 Messages postés 120 Date d'inscription mercredi 17 août 2011 Statut Membre Dernière intervention 12 février 2013 - 15 juin 2012 à 00:26
4 réponses
Tralala8
Messages postés
120
Date d'inscription
mercredi 17 août 2011
Statut
Membre
Dernière intervention
12 février 2013
14
5 juin 2012 à 00:14
5 juin 2012 à 00:14
Bonsoir,
Il n'est vraiment pas compliqué à mettre en place, je l'ai déjà fait sur un site.
Étape 1 : Regarder la balise <DOCTYPE> et s'assurer qu'elle soit valide.
Étape 2 : Inclure les deux balises appelant les scripts (la première est pour appeler jQuery, la seconde pour appeler le fichier téléchargé).
Étape 3 : Créer le contenu qui sera animé par le script (il y a un exemple pour des images, des listes et des éléments HTML de base).
Étape 4 : Démarrer en bas de la page (juste avant la balise de fermeture du body) le script.
Il n'est vraiment pas compliqué à mettre en place, je l'ai déjà fait sur un site.
Étape 1 : Regarder la balise <DOCTYPE> et s'assurer qu'elle soit valide.
Étape 2 : Inclure les deux balises appelant les scripts (la première est pour appeler jQuery, la seconde pour appeler le fichier téléchargé).
Étape 3 : Créer le contenu qui sera animé par le script (il y a un exemple pour des images, des listes et des éléments HTML de base).
Étape 4 : Démarrer en bas de la page (juste avant la balise de fermeture du body) le script.
ickyknox
Messages postés
1157
Date d'inscription
jeudi 13 décembre 2007
Statut
Membre
Dernière intervention
17 mars 2024
48
Modifié par ickyknox le 5/06/2012 à 12:11
Modifié par ickyknox le 5/06/2012 à 12:11
merci tralala pour cette réponse;
mais je me demandais
la balise <doctype> où dois je la visionner ?
les 2 scripts, où dois je les écrire ?
où dois je créer le contenu ?
je dois démarrer en bas de page , mais dans quelle page ? est ce sur un fichier .js ou sur ma page web que je dois écrire celà ?
désolé mais je suis débutant
mais je me demandais
la balise <doctype> où dois je la visionner ?
les 2 scripts, où dois je les écrire ?
où dois je créer le contenu ?
je dois démarrer en bas de page , mais dans quelle page ? est ce sur un fichier .js ou sur ma page web que je dois écrire celà ?
désolé mais je suis débutant
Tralala8
Messages postés
120
Date d'inscription
mercredi 17 août 2011
Statut
Membre
Dernière intervention
12 février 2013
14
Modifié par Tralala8 le 5/06/2012 à 13:23
Modifié par Tralala8 le 5/06/2012 à 13:23
Alors dans l'ordre :
DOCTYPE : tu l'insères juste avant la balise d'ouverture "<html>". Un exemple :
Les 2 scripts : tu les mets entre tes balises "<head>" et "</head>". N'oublie pas de modifier le chemin d'accès de la seconde balise ! Elle pointe vers le fichier .js que tu as téléchargé. Les deux balises :
Le contenu : tu le mets où tu veux entre tes balises "<body>" et "</body>". Il faut juste que tu mettes un id au conteneur de ton carousel. Il y a 3 exemples sur le site de caroufredsel. Prends l'exemple qui te correspond le mieux. Tu peux changer l'id "foo" par celui que tu veux.
Le démarrage : c'est à mettre juste avant la balise de fermeture "</body>". En gros, tu as deux choix :
Le premier utilise la configuration par défaut du carousel :
Le second permet de faire passer une configuration personnalisée (effets, comportement lors d'une action, ...) :
Dans les deux cas, remplace "#foo1" et "#foo2" par l'id que tu auras décidé de mettre à l'étape Le contenu (cfr. dernière ligne de l'étape).
Voila, j'espère que ça ira pour le mettre en place.
DOCTYPE : tu l'insères juste avant la balise d'ouverture "<html>". Un exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Les 2 scripts : tu les mets entre tes balises "<head>" et "</head>". N'oublie pas de modifier le chemin d'accès de la seconde balise ! Elle pointe vers le fichier .js que tu as téléchargé. Les deux balises :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="jquery.carouFredSel.js"></script>
Le contenu : tu le mets où tu veux entre tes balises "<body>" et "</body>". Il faut juste que tu mettes un id au conteneur de ton carousel. Il y a 3 exemples sur le site de caroufredsel. Prends l'exemple qui te correspond le mieux. Tu peux changer l'id "foo" par celui que tu veux.
Le démarrage : c'est à mettre juste avant la balise de fermeture "</body>". En gros, tu as deux choix :
Le premier utilise la configuration par défaut du carousel :
$(document).ready(function() {
// Using default configuration
$("#foo1").carouFredSel();
});
Le second permet de faire passer une configuration personnalisée (effets, comportement lors d'une action, ...) :
$(document).ready(function() {
// Using custom configuration
$("#foo2").carouFredSel({
items : 2,
direction : "up",
scroll : {
items : 1,
easing : "easeOutBounce",
duration : 1000,
pauseOnHover : true
}
});
});
Dans les deux cas, remplace "#foo1" et "#foo2" par l'id que tu auras décidé de mettre à l'étape Le contenu (cfr. dernière ligne de l'étape).
Voila, j'espère que ça ira pour le mettre en place.
ickyknox
Messages postés
1157
Date d'inscription
jeudi 13 décembre 2007
Statut
Membre
Dernière intervention
17 mars 2024
48
5 juin 2012 à 19:49
5 juin 2012 à 19:49
merci beaucoup pour cette explication si bien détaillée. Vous ne vous imaginez pas comme vous m'avez rendu service car cela va beaucoup m'aider pour comprendre les prochains jquery que j'utiliserai.
ceci dit, j'ai fait comme vous avez dit.
Et j'ai d'affiché mes 6 photos verticalement mais immobiles.
Sauriez vous comment activer le défilement ?
pour le lien , j'ai testé avec tous les doc .js : jquery.carouFredSel-5.6.1-packed.js ,jquery.carouFredSel-5.6.1.js et jquery.js , sans succès
voici le rendu : http://ile-du-bien-etre.com/JJ.html
voici le code que j'ai fait :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://ile-du-bien-etre.com/caroufredsel/jquery.carouFredSel-5.6.1-packed.js"></script>
<div id="identifier">
<img src="http://ile-du-bien-etre.com/img/1.png" width="300" />
<img src="http://ile-du-bien-etre.com/img/2.png" width="300" />
<img src="http://ile-du-bien-etre.com/img/3.png" width="300" />
<img src="http://ile-du-bien-etre.com/img/4.png" width="300" />
<img src="http://ile-du-bien-etre.com/img/5.png" width="300" />
<img src="http://ile-du-bien-etre.com/img/6.png" width="300" />
</div>
$(document).ready(function() {
// Using custom configuration
$("#identifier").carouFredSel({
items : 2,
direction : "up",
scroll : {
items : 1,
easing : "easeOutBounce",
duration : 1000,
pauseOnHover : true
}
});
});
</body>
</html>
merci encore !
ceci dit, j'ai fait comme vous avez dit.
Et j'ai d'affiché mes 6 photos verticalement mais immobiles.
Sauriez vous comment activer le défilement ?
pour le lien , j'ai testé avec tous les doc .js : jquery.carouFredSel-5.6.1-packed.js ,jquery.carouFredSel-5.6.1.js et jquery.js , sans succès
voici le rendu : http://ile-du-bien-etre.com/JJ.html
voici le code que j'ai fait :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://ile-du-bien-etre.com/caroufredsel/jquery.carouFredSel-5.6.1-packed.js"></script>
<div id="identifier">
<img src="http://ile-du-bien-etre.com/img/1.png" width="300" />
<img src="http://ile-du-bien-etre.com/img/2.png" width="300" />
<img src="http://ile-du-bien-etre.com/img/3.png" width="300" />
<img src="http://ile-du-bien-etre.com/img/4.png" width="300" />
<img src="http://ile-du-bien-etre.com/img/5.png" width="300" />
<img src="http://ile-du-bien-etre.com/img/6.png" width="300" />
</div>
$(document).ready(function() {
// Using custom configuration
$("#identifier").carouFredSel({
items : 2,
direction : "up",
scroll : {
items : 1,
easing : "easeOutBounce",
duration : 1000,
pauseOnHover : true
}
});
});
</body>
</html>
merci encore !
Tralala8
Messages postés
120
Date d'inscription
mercredi 17 août 2011
Statut
Membre
Dernière intervention
12 février 2013
14
7 juin 2012 à 00:08
7 juin 2012 à 00:08
Normalement, il est censé s'activer directement. Si ce n'est pas le cas, il peut y avoir un problème au niveau de l'appel à jQuery.
Essaye de le télécharger (même te servir du lien de la balise et faire un copier/coller du code et l'enregistrer dans un fichier, ça marche aussi) et de l'inclure de la même façon que le fichier du caroufredsel.
Essaye de le télécharger (même te servir du lien de la balise et faire un copier/coller du code et l'enregistrer dans un fichier, ça marche aussi) et de l'inclure de la même façon que le fichier du caroufredsel.
ickyknox
Messages postés
1157
Date d'inscription
jeudi 13 décembre 2007
Statut
Membre
Dernière intervention
17 mars 2024
48
9 juin 2012 à 17:09
9 juin 2012 à 17:09
comment copier le code ?
Je copie le code HTML que j'ai rédigé, je le copie dans un doc text que je nomme MYNAME par exemple, puis j'établi le lien :
src="http://ile-du-bien-etre.com/caroufredsel/jquery.MYNAME.js" ?
J'ai essayé mais ca ne fonctionne pas !
Mon dieu désolé si je suis à la masse
peut etre qu'il s'agit du doctype ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
je l'ai copié sur internet et peut etre qu'il dérègle tout ?
...
SINON VOILÀ COMMENT J'AI PROCÉDÉ :
j'ai téléchargé le carouf et dézippé et l'ai inséré dans filezilla
j'ai créé un dossier dans filezilla avec les images
dans iweb, j'ai écrit le code ci dessus du post du 5juin
Je copie le code HTML que j'ai rédigé, je le copie dans un doc text que je nomme MYNAME par exemple, puis j'établi le lien :
src="http://ile-du-bien-etre.com/caroufredsel/jquery.MYNAME.js" ?
J'ai essayé mais ca ne fonctionne pas !
Mon dieu désolé si je suis à la masse
peut etre qu'il s'agit du doctype ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
je l'ai copié sur internet et peut etre qu'il dérègle tout ?
...
SINON VOILÀ COMMENT J'AI PROCÉDÉ :
j'ai téléchargé le carouf et dézippé et l'ai inséré dans filezilla
j'ai créé un dossier dans filezilla avec les images
dans iweb, j'ai écrit le code ci dessus du post du 5juin
Tralala8
Messages postés
120
Date d'inscription
mercredi 17 août 2011
Statut
Membre
Dernière intervention
12 février 2013
14
15 juin 2012 à 00:26
15 juin 2012 à 00:26
Mets cette balise pour appeler jQuery (connexion internet requise évidemment)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>