Question de Noob "Slideshow"

Question de Noob "Slideshow" - HTML/CSS - Programmation

Marsh Posté le 05-12-2013 à 12:15:46    

Hello :o
 
Pardon d'avance d'interrompre vos discussions de geeks sur l'intérêt de flash VS html5 et l'importance du buffer-overflow de la version Alpha 4.5 de 3DSMAXCS8 mais j'ai besoin d'un coup de pouce !  [:freekill]  
J'aurais besoin de votre avis concernant un "mini projet" ; je précise je suis ultra-débutant, déjà bidouillé vite fait quand j'étais plus jeune, mais jamais sérieusement... Donc je peux me débrouiller seul, promis je vous embêterai pas  :jap:  
 
Je cherche à faire un "mini site" pour une private joke, dont le concept est plutôt ultra-minimaliste :
j'ai une trentaine de fichiers (.jpg / .gifs / .png uniquement) que je voudrais faire défiler dès l'arrivée sur le site. Soit par clic (sur zone?), soit défilement auto (mais je souhaiterais pouvoir spécifier les intervalles de temps entre chaque image dans ce cas)
 
J'ai pensé à Flash mais c'est loin d'être aussi simple que ce que je croyais ( :D ), et là je m'apprêtais à m'y lancer comme un boucher charcutier (en html href), mais si vous avez une idée un peu plus propre je suis preneur... Type cadre avec les images déjà chargées, ou je sais pas trop, justement.  [:airforceone]  
 
 
Merci d'avance pour vos conseils !


---------------
:o // Steam  
Reply

Marsh Posté le 05-12-2013 à 12:15:46   

Reply

Marsh Posté le 06-12-2013 à 14:17:27    

Personne ? :(


---------------
:o // Steam  
Reply

Marsh Posté le 07-12-2013 à 00:10:23    

En HTML, le principe du slideshow c'est de mettre toutes les images dans un container en overflow.
 
Par exemple :

Code :
  1. <div style="overflow:scroll;height:200px;width:500px;">
  2.   <img src="image1.jpg" />
  3.   <img src="image2.jpg" />
  4.   <img src="image3.jpg" />
  5.   etc.
  6. </div>


 
puis d'intercepter les input utilisateur (clics, clavier, etc.) et contrôler le scrolling avec javascript.
 
Et il y a des librairies pour éviter de tout faire à la main : http://jedrzejchalubek.com/glide/
Le manuel d'utilisation : https://github.com/jedrzejchalubek/Glide.js
Le mieux c'est de télécharger toute l'archive : https://github.com/jedrzejchalubek/ [...] master.zip
Puis de modifier le fichier index.html à ta convenance.

Reply

Marsh Posté le 09-12-2013 à 11:38:46    

Nickel, je vais checker ça. Merci beaucoup :jap:


---------------
:o // Steam  
Reply

Marsh Posté le 19-12-2013 à 15:35:50    

Encore désolé, mais j'ai une petite question avec glide.js :
 
j'ai bien réussi à faire ce que je voulais (mettre les images à la suite, blabla), par contre j'ai un vrai souci de résolution d'image. Je souhaiterais qu'elles soient toutes centrées dans le slider, et pas coupées en haut/en bas/coincées dans un angle... J'ai bidouillé un peu dans le style.css et aussi dans l'index.html, mais je sèche.  
 
Merci encore !


---------------
:o // Steam  
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed