Caroufredsel
ickyknox
Messages postés
1156
Date d'inscription
Statut
Membre
Dernière intervention
-
Tralala8 Messages postés 120 Date d'inscription Statut Membre Dernière intervention -
Tralala8 Messages postés 120 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
j'essaie désespérement d'installer le caroufredsel sur mon site.
J'ai lu le tuto en anglais : http://caroufredsel.frebsite.nl/installation.php
mais je ne comprends pas où je dois saisir les étapes 1, 2, 3 et 4
Si quelqu'un aurait une idée ou pourrais m'aider svo !!
j'essaie désespérement d'installer le caroufredsel sur mon site.
J'ai lu le tuto en anglais : http://caroufredsel.frebsite.nl/installation.php
mais je ne comprends pas où je dois saisir les étapes 1, 2, 3 et 4
Si quelqu'un aurait une idée ou pourrais m'aider svo !!
4 réponses
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.
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
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.
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 !
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.
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
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>