Diaporama en page d'accueil

Diaporama en page d'accueil - HTML/CSS - Programmation

Marsh Posté le 08-02-2012 à 20:44:45    

Bonjour à tous,
Bon je n'ai pas vue de rubrique présentation, donc je me présente ici même, Jérôme, j'habite dans le 62, 39 ans  
une passion qu'est la photo animalière
J'ai un site perso hébergé chez Piwigo et j'ai un soucis avec la page d'accueil
j'explique:
Lors que je me connecte sur la page d'accueil, j'ai donc un diaporama avec quelques photos et divers chose  
le soucis est que lors de la connexion au site, le diaporama apparaît d'abord à gauche pour de suite passer au centre
Mon souhait est que ce diaporama apparaissent de suite en milieu de page  
est possible ou pas et je précise que les photos sont toute de la même taille (800x547)
Voici le lien du site,  
 
http://jerome62w.piwigo.com/index? [...] _d_accueil
 
Merci d'avance
Voici le code de la page comme il est actuellement

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Photographie Jérôme Watel</title>
  6. <style type="text/css">
  7. .Police {
  8. font-family: "Freestyle Script";
  9. text-align: center;
  10. font-size: 24px;
  11. }
  12. .taille {
  13. font-size: 24px;
  14. }
  15. .Police .taille {
  16. font-size: 36px;
  17. color: #FFF;
  18. }
  19. body {
  20. background-color: #333;
  21. }
  23. .jDiaporama{
  24. position:relative;
  25.         margin:0 auto;
  26. }
  28. .jDiaporama ul{
  29. -moz-box-shadow:1px 1px 0.5em #222;
  30. overflow:hidden;
  31. }
  33. .jDiaporama li{
  34. list-style-type:none;
  35. overflow:hidden;
  36. position:absolute
  37. }
  39. .jDiaporama li img{
  40. display:block
  41. }
  43. .jDiaporama li .desc{
  44. position:absolute;
  45. bottom: 0; left: 0;
  46. display:none;
  47. margin:0;
  48. color:#fff;
  49. font-size:12px;
  50. font-family: Arial;
  51. padding:5px;
  52. background:url(themes/default/js/plugins/jDiaporama_img/back_desc.png) repeat;
  53. _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/back_desc.png',sizingMethod='scale');  _background-image:none;
  54. width:100%;
  55. height:30px
  56. }
  58. .jDiaporama li .title{
  59. position:absolute;
  60. top: 0; left: 0;
  61. display:none;
  62. margin:0;
  63. color:#fff;
  64. font-size:12px;
  65. font-family: Arial;
  66. padding:5px;
  67. }
  69. .jDiaporama li .count{
  70. position:absolute;
  71. top: 0; right: 0;
  72. display:none;
  73. margin:0;
  74. color:#fff;
  75. font-size:12px;
  76. font-family: Arial;
  77. padding:5px;
  78. }
  80. .jDiaporama_controls{
  81. display:none;
  82. }
  84. .jDiaporama_controls a{
  85. font-weight:normal;
  86. width:10px;
  87. height:13px;
  88. text-indent:-9999px;
  89. display:block;
  90. margin:0 3px;
  91. position:absolute;
  92. }
  94. .jDiaporama_controls .prev{
  95. background:url(themes/default/js/plugins/jDiaporama_img/controls2.png) no-repeat bottom;
  96. _background:url(themes/default/js/plugins/jDiaporama_img/controls.gif) no-repeat bottom;
  97. top:50%;
  98. margin-top:-16px;
  99. height:32px;
  100. width:32px;
  101. left: 0px
  102. }
  104. .jDiaporama_controls .next{
  105. background:url(themes/default/js/plugins/jDiaporama_img/controls2.png) no-repeat top;
  106. _background:url(themes/default/js/plugins/jDiaporama_img/controls.gif) no-repeat top;
  107. top:50%;
  108. margin-top:-16px;
  109. height:32px;
  110. width:32px;
  111. right: 0px
  112. }
  114. .jDiaporama_controls .pause{
  115. background:url(themes/default/js/plugins/jDiaporama_img/playpause.png) no-repeat top;
  116. _background:url(themes/default/js/plugins/jDiaporama_img/playpause.gif) no-repeat top;
  117. width:64px;
  118. height:48px;
  119. left:50%;
  120. top:50%;
  121. margin-left:-32px;
  122. margin-top:-24px;
  123. }
  125. .jDiaporama_controls .play{
  126. background:url(themes/default/js/plugins/jDiaporama_img/playpause.png) no-repeat bottom;
  127. _background:url(themes/default/js/plugins/jDiaporama_img/playpause.gif) no-repeat bottom;
  128. width:64px;
  129. height:48px;
  130. left:50%;
  131. top:50%;
  132. margin-left:-32px;
  133. margin-top:-24px;
  134. }
  136. /**** Status ****/
  138. .jDiaporama_status{
  139. text-align:center;
  140. margin-top:10px;
  141. position:absolute;
  142. left:50%;
  143. display:none
  144. }
  146. .jDiaporama_status a{
  147. background:url(themes/default/js/plugins/jDiaporama_img/bullets.png) no-repeat left;
  148. _background:url(themes/default/js/plugins/jDiaporama_img/bullets.gif) no-repeat left;
  149. float:left;
  150. width:10px;
  151. height:10px;
  152. text-indent:-9999px;
  153. margin-right:5px;
  154. }
  156. .jDiaporama_status a.active, .jDiaporama_status a:hover{
  157. background:url(themes/default/js/plugins/jDiaporama_img/bullets.png) no-repeat right;
  158. _background:url(themes/default/js/plugins/jDiaporama_img/bullets.gif) no-repeat right;
  159. }
  160. .Police a {
  161. color: #FFF;
  162. font-family: "Freestyle Script";
  163. font-size: 36px;
  164. }
  165. .police {
  166. font-size: 36px;
  167. color: #FFF;
  168. }
  169. .policea {
  170. color: #FFF;
  171. }
  172. </style>
  173. <script type="text/javascript" src="themes/default/js/jquery.min.js"></script>
  174. <script type="text/javascript" src="themes/default/js/plugins/jquery.jDiaporama.js"></script>
  175. <script type="text/javascript">
  176. $(document).ready(function(){
  177.   $(".diaporama1" ).jDiaporama({
  178.     animationSpeed: "slow",
  179.     delay:5
  180.   });
  181. });
  182. </script>
  183. </head>
  185. <body class="Police">
  186. <p class="taille">Bonjour et bienvenue sur mon site dédié à la photographie animalière</p>
  189. <ul class="diaporama1" style="">
  190.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205113829-c4188db7.jpg"/></li>
  191.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205131056-e93d6cc3.jpg"/></li>
  192.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205131107-fa591062.jpg"/></li>
  193.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205131103-21b4ffcb.jpg"/></li>
  194.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205131100-f39829c4.jpg"/></li>
  195.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205131053-2b1b2727.jpg"/></li>
  196.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205131033-80dd5c0f.jpg"/></li>
  197.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205131035-48ca251c.jpg"/></li>
  198.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205131046-cad668aa.jpg"/></li>
  199.   <li><img class="thumbnail" src="./uploads/n/d/h/ndhf7yu2ag/2012/02/05/20120205193246-6b8b8b6d.jpg"/></li>
  200. </ul>
  201. <!--
  202. <p class="taille"><a href="http://jerome62w.piwigo.com/index?"><img src="http://jerome62w.piwigo.com/uploads/n/d/h/ndhf7yu2ag//2011/06/25/20110625102421-cd6b5663.jpg" width="770" height="524" /></a></p>
  203. -->
  204. <p class="taille">&nbsp;</p>
  205. <a href="http://jerome62w.piwigo.com/">Entrer</a> <span class="policea"> - </span><a href="http://jerome62w.piwigo.com/index?/contact">Me contacter</a>
  206. </body>
  207. </html>

Reply

Marsh Posté le 08-02-2012 à 20:44:45   

Reply

Marsh Posté le 09-02-2012 à 18:54:13    

Bonjour,  
Personne n'a rencontrer ce genre de problème  :??:

Reply

Marsh Posté le 10-02-2012 à 20:50:39    

Problème résolu merci

Reply

Sujets relatifs:

Leave a Replay

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