Se connecter / S'enregistrer

Résolu Recherche tuto carrousel image

Solutions (12)
Tags :
  • Programmation
|

bonjour,

je recherche un tuto de carrousel d'image (defilement) sympa et facile à mettre en place sachant que je ne maitrise pas vraiment le code

merci beaucoup
Contenus similaires
Meilleure solution
partage
|
  • Commenter cette solution |
Score
0
òh
òi
|
Meilleure réponse sélectionnée par melo044.
  • Commenter cette réponse |
Score
0
òh
òi
|
merci de laisser tomber pour mes posts précédents.
je vais prendre ce caroussel qui marche bien. seulement un problème, toujours le même quand je veux enregistrer ma page avec les autres (exemple index) je n'ai plus rien en prévisu dans mon explorer...
de plus j'ai beau régler dans propriété de page (fond noir) j'ai toujours du gris hors de mon caroussel.

merci de m'aider à résoudre le problème :) 


  1. <!DOCTYPE html>
  2. <html lang="sv">
  3. <head>
  4. <title>Galleria Dots Theme Demo 01</title>
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  6. <script src="../src/galleria.js"></script>
  7. <style>
  8. html,body{background:#eee}
  9. .content{color:#444;font:14px/1.4 arial,sans-serif;width:800px;margin:20px auto}
  10. h1{line-height:1.1;letter-spacing:-1px;}
  11. #galleria{
  12. height:400px;
  13. background:#000000;
  14. background:-moz-radial-gradient(center 45deg, circle closest-side, #222 40%, #000 100%);
  15. background:-webkit-gradient(
  16. radial, center 100%, 20, center 50%, 250, from(#333), to(#000)
  17. )
  18. }
  19. body {
  20. background-color: #000000;
  21. }
  22. body,td,th {
  23. color: #000000;
  24. }
  25. </style>
  26. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
  27. <body>
  28. <div class="content">
  29. <h1> </h1>
  30. <div id="galleria"><img src="../../Images Pgn/Elfes-recto.png" width="787" height="366"><img src="../../Images Pgn/Elfes-verso.png" width="787" height="370"><img src="../../Images Pgn/parvis.png" width="886" height="418"><img src="../../Images Pgn/pirotterie.png" width="510" height="418"><img src="../../Images Pgn/vitalis.png" width="567" height="400"></div>
  31. <p> </p>
  32. </div>
  33.  
  34. <script>
  35.  
  36. // Load theme
  37. Galleria.loadTheme('../src/themes/dots/galleria.dots.js');
  38.  
  39. $('#galleria').galleria();
  40.  
  41. </script>
  42. </body>
  43. </html>
  • Commenter cette réponse |
Score
0
òh
òi
|
j'ai réussi à régler la taille de l'encadré du carrousel, mais certains de mes visuels dépasse du cadre...
  • Commenter cette réponse |
Score
0
òh
òi
|
bonjour, j'ai un problème avec ce code.
J'aimerais agrandir le cadre du carrousel (ou se visualisent mes photo) est ce possible?
par ailleurs mon fichier reste dans le fichier démo et quand je le place avec les autres fichiers des pages prévus pour mon site (index etc) ça ne marche plus.

Pouvez vous m'aider?
merci


  1. <!DOCTYPE html>
  2. <html lang="sv">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Galleria Classic Theme Demo 02</title>
  6. <script src="../src/jquery-1.4.2.js"></script>
  7. <script src="../src/galleria.js"></script>
  8. <style>
  9. html,body{background:#111}
  10. .content{color:#ccc;font:14px/1.4 arial,sans-serif;width:600px;margin:20px auto}
  11. h1{line-height:1.1;letter-spacing:-1px;}
  12. #galleria{height:400px;}
  13. a{color:#aaa;}
  14. </style>
  15. </head>
  16. <body>
  17. <div class="content">
  18. <h1> </h1>
  19. <div id="galleria">
  20. <div></div>
  21. <div><a href="../../Images Pgn/couv-flyer.png"><img src="../../Images Pgn/couv-flyer.png"></a></div>
  22. <div>
  23. <a href="../../Images Pgn/flyer.png">
  24. <img src="../../Images Pgn/flyer.png"> </a> </div>
  25. <div>
  26. <a href="../../Images Pgn/Elfes-recto.png">
  27. <img src="../../Images Pgn/Elfes-recto.png"> </a> </div>
  28. <div>
  29. <a href="../../Images Pgn/Elfes-verso.png">
  30. <img src="../../Images Pgn/Elfes-verso.png"> </a> </div>
  31. <div>
  32. <a href="../../Images Pgn/parvis.png">
  33. <img src="../../Images Pgn/parvis.png"> </a> </div>
  34. <div>
  35. <a href="../../Images Pgn/pirotterie.png">
  36. <img src="../../Images Pgn/pirotterie.png"> </a> </div>
  37. <div>
  38. <a href="../../Images Pgn/vitalis.png">
  39. <img src="../../Images Pgn/vitalis.png"> </a> </div>
  40. <div></div>
  41. <div></div>
  42. </div>
  43. </div>
  44.  
  45. <script>
  46.  
  47. // Load theme
  48. Galleria.loadTheme('../src/themes/classic/galleria.classic.js');
  49.  
  50. // run galleria and add some options
  51. $('#galleria').galleria({
  52. image_crop: true, // crop all images to fit
  53. thumb_crop: true, // crop all thumbnails to fit
  54. transition: 'fade', // crossfade photos
  55. transition_speed: 700, // slow down the crossfade
  56. data_config: function(img) {
  57. // will extract and return image captions from the source:
  58. return {
  59. title: $(img).parent().next('strong').html(),
  60. description: $(img).parent().next('strong').next().html()
  61. };
  62. },
  63. extend: function() {
  64. this.bind(Galleria.IMAGE, function(e) {
  65. // bind a click event to the active image
  66. $(e.imageTarget).css('cursor','pointer').click(this.proxy(function() {
  67. // open the image in a lightbox
  68. this.openLightbox();
  69. }));
  70. });
  71. }
  72. });
  73. </script>
  74. </body>
  75. </html>
  • Commenter cette réponse |
Score
0
òh
òi
|
j'ai mis 3 visuels et j'ai ça: <div id="slider">
<p>i<img src="Images Pgn/images/01.jpg" width="696" height="241"><img src="Images Pgn/images/02.jpg" width="696" height="241"><img src="Images Pgn/images/03.jpg" width="696" height="241"></p>
<p> </p>
</div>
  • Commenter cette réponse |
Score
0
òh
òi
|
merci j'ai pris celui en français, j'ai oublié de préciser que j'étais vraiment une bille...
- j'ai bien téléchargé le plugin j'ai copié le dossier dans mon dossier racine
- je bug à : "Chargez les librairies jQuery et EasySlider, puis déclarer vos listes à Slider en déclarant l'id de la liste:"

je dois mettre les images les une sous les autres? et le code le copier coller à suivre comme indiqué sur le site?

:) 

merci
  • Commenter cette réponse |
Score
0
òh
òi
|
  • Commenter cette réponse |
Score
0
òh
òi
|
t'aurais un lien éventuellement à me donner?

merci
  • Commenter cette réponse |
Score
0
òh
òi
|
Il y a des javascripts tout fait pour ça, regarde du côté de JQuery.
  • Commenter cette réponse |
Score
0
òh
òi
|
ben je sais pas disons que j'utilise dreamweaver et flash, mais je ne maitrise pas le langage vraiment :)  donc celui le plus facile a mettre en place
  • Commenter cette réponse |
Score
0
òh
òi
|
Pour quelle utilisation ? (quel langage ?)
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS