info:js:slidesjs

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
info:js:slidesjs [2013/04/26 10:01] radeffinfo:js:slidesjs [2019/05/06 13:31] (Version actuelle) – [Uploder les photos] radeff
Ligne 47: Ligne 47:
 </code> </code>
  
 +===== Outil =====
 +
 +http://www.slidesjs.com/
 +
 +===== Télécharger =====
 + 
 +
 +l'outil sur le site http://www.slidesjs.com/
 +
 +===== Installer =====
 + 
 +
 +le script jquery.slides.js sur votre serveur ou utiliser la version de l'uni: http://cms.unige.ch/outils/js/jquery.slides.js
 +
 +===== Uploader les photos =====
 +
 +
 +Mettez vos photos dans un répertoire créé par vos soins et lister les noms de fichier, exemple:
 +
 +url= http://www.unige.ch/presse/phototheque/pics/
 +
 +<code>
 +polar1.jpg
 +polarcanard-siffleur.jpg
 +polarCrumley1cadence.jpg
 +polarCrumleyBanditCochon.jpg
 +polarCrumleyContreeFinale.jpg
 +polar_crumley_danse_ours.jpg
 +polarCrumley.jpg
 +polarCrumleyPutes.jpg
 +polarCrumleyTirAuPigeon.jpg
 +polardancingbear.jpg
 +polardernier-baiser.jpg
 +polarDetectiveNovel1.jpg
 +polarDetectiveNovel.jpg
 +polarfausse-piste.jpg
 +polar.jpg
 +polarMasque.jpg
 +</code>
 +
 +===== Script =====
 +
 +
 +<code>
 +  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 +  <script src="/js/slides/jquery.slides.min.js"></script>
 + <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
 +  <script>
 +    $(function() {
 +      $('#slides1').slidesjs({
 +        width: 250,
 +        height: 250,
 +        play: {
 +          active: true,
 +          auto: true,
 +          interval: 4000,
 +          swap: true,
 +          pauseOnHover: true,
 +          restartDelay: 2500
 +        },
 +        pagination: false
 + 
 +      });
 +    });
 +  </script>
 +  <!-- End SlidesJS Required -->
 +  <div id="slides1" style="width: 60%">
 +
 +<img alt="Photo by: author" src='/pics/polar/polar1.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarcanard-siffleur.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarCrumley1cadence.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarCrumleyBanditCochon.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarCrumleyContreeFinale.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polar_crumley_danse_ours.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarCrumley.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarCrumleyPutes.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarCrumleyTirAuPigeon.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polardancingbear.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polardernier-baiser.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarDetectiveNovel.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarfausse-piste.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarMasque.jpg'>
 +
 +  </div>
 +<p><em>Slides: open source <a href="http://www.slidesjs.com/">http://www.slidesjs.com/</a></em></p>
 +</code>
 +
 +===== Résultat =====
 +
 +<html>
 +  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 +  <script src="/js/slides/jquery.slides.min.js"></script>
 + <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
 +  <script>
 +    $(function() {
 +      $('#slides1').slidesjs({
 +        width: 50,
 +        height: 50,
 +        play: {
 +          active: true,
 +          auto: true,
 +          interval: 4000,
 +          swap: true,
 +          pauseOnHover: true,
 +          restartDelay: 2500
 +        },
 +        pagination: false
 + 
 +      });
 +    });
 +  </script>
 +  <!-- End SlidesJS Required -->
 +  <div id="slides1" style="width: 20%">
 +
 +<img alt="Photo by: author" src='/pics/polar/polar1.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarcanard-siffleur.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarCrumley1cadence.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarCrumleyBanditCochon.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarCrumleyContreeFinale.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polar_crumley_danse_ours.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarCrumley.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarCrumleyPutes.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarCrumleyTirAuPigeon.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polardancingbear.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polardernier-baiser.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarDetectiveNovel.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarfausse-piste.jpg'>
 +<img alt="Photo by: author" src='/pics/polar/polarMasque.jpg'>
 +
 +  </div>
 +<p><em>Slides: open source <a href="http://www.slidesjs.com/">http://www.slidesjs.com/</a></em></p>
 +</html>
 +====== Script automatique ======
 +Vous pouvez utiliser le lien suivant pour générer automatiquement le code à intégrer
 +
 +http://radeff.red/info/js/jquery.slides.js.php
  • info/js/slidesjs.1366963273.txt.gz
  • Dernière modification : 2014/02/19 15:17
  • (modification externe)