Défilement d'image HTML
Fermé
pegazx
Messages postés
18
Date d'inscription
vendredi 31 janvier 2014
Statut
Membre
Dernière intervention
15 novembre 2015
-
13 févr. 2014 à 21:33
pegazx Messages postés 18 Date d'inscription vendredi 31 janvier 2014 Statut Membre Dernière intervention 15 novembre 2015 - 15 févr. 2014 à 18:57
pegazx Messages postés 18 Date d'inscription vendredi 31 janvier 2014 Statut Membre Dernière intervention 15 novembre 2015 - 15 févr. 2014 à 18:57
A voir également:
- Défilement d'image HTML
- Image iso - Guide
- Editeur html - Télécharger - HTML
- Barre de défilement - Guide
- Acronis true image - Télécharger - Sauvegarde
- Image iso windows 10 - Guide
3 réponses
barale61
Messages postés
1208
Date d'inscription
jeudi 13 septembre 2012
Statut
Membre
Dernière intervention
4 novembre 2024
110
13 févr. 2014 à 21:40
13 févr. 2014 à 21:40
Il faut utiliser jquery https://jquery.com/
http://www.tutoriels-extensions-dreamweaver.fr/
http://www.tutoriels-extensions-dreamweaver.fr/
barale61
Messages postés
1208
Date d'inscription
jeudi 13 septembre 2012
Statut
Membre
Dernière intervention
4 novembre 2024
110
Modifié par barale61 le 15/02/2014 à 17:54
Modifié par barale61 le 15/02/2014 à 17:54
Ca vas pas être facile de faire mieux:
1/ Tu vas sur https://jquery.com/ et tu télécharges (Download jquery en haut à droite)
2/ Tu télécharges Download the uncompressed, development jQuery 1.11.0 et tu fais un clic droit sur le code source qui s'affiche et Enregistrer sous (tu l'enregistre dans un dossier à côté de tapage)
3/ Tu vas sur http://jquery.malsup.com/cycle/ et tu télécharges Download the Cycle Plugin en haut de page et tu cliques sur Cycle Plugin et clic droit souris enregistrer sous (dans le même dossier que l'autre fichier) et tu te retrouves donc avec 2 fichiers JavaScript dans ton dossier (js par exemple)
4/ Puis en bas de page http://jquery.malsup.com/cycle/ sur Super Basic Demo puis quand la demo s'affiche (c'est juste un exemple de toutes les possibilités) tu fais CTRL+U pour afficher la source et tu copies le code JavaScript:
pour le coller sur ta page avant </head>
Sur ta page tu fais une DIV que tu nommes (par exemple) slider et tu mets test photos dedans exemple:
<DIV ID="slider">
<img src="photo1.jpg">
<img src="photo2.jpg">
<img src="photo3.jpg">
</DIV>
(et ainsi de suite)
Maintenant, tu retournes sur http://jquery.malsup.com/cycle/ et tu cliques sur Effects Browser en haut de page. Là tu as une bibliothèque d'effets et tu en choisis un en cliquant dessus dans la liste (tu vois la démo s'afficher) tu copies le nom au dessus du slider qui va te servir de nom de fonction:
Ce nom, tu le colles dans le script que tu auras copié à la place de fade et tu changes .slideshow par le nom de ta DIV donc #slider.
Dernière chose il te faut maintenant lier les 2 script JavaScript que tu as téléchargé à ta page entre <HEAD> et </HEAD> (<script type="text/javascript" src="jquery.cycle.all.js"></script> et <script type="text/javascript" src="jquery-1.11.0.js"></script>)
Si j'ai rien oublié, tu vas maintenant pouvoir apercevoir ton slider.
http://www.tutoriels-extensions-dreamweaver.fr/
1/ Tu vas sur https://jquery.com/ et tu télécharges (Download jquery en haut à droite)
2/ Tu télécharges Download the uncompressed, development jQuery 1.11.0 et tu fais un clic droit sur le code source qui s'affiche et Enregistrer sous (tu l'enregistre dans un dossier à côté de tapage)
3/ Tu vas sur http://jquery.malsup.com/cycle/ et tu télécharges Download the Cycle Plugin en haut de page et tu cliques sur Cycle Plugin et clic droit souris enregistrer sous (dans le même dossier que l'autre fichier) et tu te retrouves donc avec 2 fichiers JavaScript dans ton dossier (js par exemple)
4/ Puis en bas de page http://jquery.malsup.com/cycle/ sur Super Basic Demo puis quand la demo s'affiche (c'est juste un exemple de toutes les possibilités) tu fais CTRL+U pour afficher la source et tu copies le code JavaScript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.io/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
pour le coller sur ta page avant </head>
Sur ta page tu fais une DIV que tu nommes (par exemple) slider et tu mets test photos dedans exemple:
<DIV ID="slider">
<img src="photo1.jpg">
<img src="photo2.jpg">
<img src="photo3.jpg">
</DIV>
(et ainsi de suite)
Maintenant, tu retournes sur http://jquery.malsup.com/cycle/ et tu cliques sur Effects Browser en haut de page. Là tu as une bibliothèque d'effets et tu en choisis un en cliquant dessus dans la liste (tu vois la démo s'afficher) tu copies le nom au dessus du slider qui va te servir de nom de fonction:
Ce nom, tu le colles dans le script que tu auras copié à la place de fade et tu changes .slideshow par le nom de ta DIV donc #slider.
Dernière chose il te faut maintenant lier les 2 script JavaScript que tu as téléchargé à ta page entre <HEAD> et </HEAD> (<script type="text/javascript" src="jquery.cycle.all.js"></script> et <script type="text/javascript" src="jquery-1.11.0.js"></script>)
Si j'ai rien oublié, tu vas maintenant pouvoir apercevoir ton slider.
http://www.tutoriels-extensions-dreamweaver.fr/
barale61
Messages postés
1208
Date d'inscription
jeudi 13 septembre 2012
Statut
Membre
Dernière intervention
4 novembre 2024
110
15 févr. 2014 à 17:17
15 févr. 2014 à 17:17
Tu devras faire des photos de même taille et de la largeur de ton conteneur principal (ou page)
pegazx
Messages postés
18
Date d'inscription
vendredi 31 janvier 2014
Statut
Membre
Dernière intervention
15 novembre 2015
15 févr. 2014 à 18:57
15 févr. 2014 à 18:57
merci ça marche nikel
15 févr. 2014 à 09:05
https://wowslider.com/3d-slider-jquery-fresh-cube-demo.html
help me please