image diapo qui s'ouvre sur le coté...

image diapo qui s'ouvre sur le coté... - Javascript/Node.js - Programmation

Marsh Posté le 23-10-2014 à 17:54:07    

Bonsoir a tous, bon voila je m'arrache les cheveux...
J'ai telechargé le plugin jquery splash et il est fonctionnel a une seule exception, quand je clique sur l'image, elle s'agrandie et se place à droite de l'écran...
Parcontre si je fait défiler lessuivante s'affichent bien et là je bloque serieusement...
Alors si vous pouviez m'aider ce serai simpas, merci. :jap:  
 
Fichier index.html
 

Code :
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script type="text/javascript" src="splash.image.js"></script>
  6. </head>
  7. <body>
  8. <link type="text/css" rel="stylesheet" href="splash.image.css" />
  9. <center>
  10. <table width="1221" border="1">
  11.   <tr>
  12.     <td width="1211"><center><a href="photos/01.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  13. <img src="photos/01.jpg" height="150" />
  14. </a>
  15. <a href="photos/02.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  16. <img src="photos/02.jpg" height="150" />
  17. </a>
  18. <a href="photos/03.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  19. <img src="photos/03.jpg" height="150" />
  20. </a>
  21. <a href="photos/04.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  22. <img src="photos/04.jpg" height="150" />
  23. </a>
  24. <a href="photos/05.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  25. <img src="photos/05.jpg" height="150" />
  26. </a>
  27. <a href="photos/06.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  28. <img src="photos/06.jpg" height="150" />
  29. </a>
  30. <a href="photos/07.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  31. <img src="photos/07.jpg" height="150" />
  32. </a>
  33. <a href="photos/08.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  34. <img src="photos/08.jpg" height="150" />
  35. </a>
  36. <a href="photos/09.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  37. <img src="photos/09.jpg" height="150" />
  38. </a>
  39. <a href="photos/10.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  40. <img src="photos/10.jpg" height="150" />
  41. </a>
  42. <a href="photos/11.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  43. <img src="photos/11.jpg" height="150" />
  44. </a>
  45. <a href="photos/12.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  46. <img src="photos/12.jpg" height="150" />
  47. </a>
  48. <a href="photos/13.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  49. <img src="photos/13.jpg" height="150" />
  50. </a>
  51. <a href="photos/14.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  52. <img src="photos/14.jpg" height="150" />
  53. </a>
  54. <a href="photos/15.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  55. <img src="photos/15.jpg" height="150" />
  56. </a>
  57. <a href="photos/16.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  58. <img src="photos/16.jpg" height="150" />
  59. </a>
  60. <a href="photos/17.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  61. <img src="photos/17.jpg" height="150" />
  62. </a>
  63. <a href="photos/18.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  64. <img src="photos/18.jpg" height="150" />
  65. </a>
  66. <a href="photos/19.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  67. <img src="photos/19.jpg" height="150" />
  68. </a>
  69. <a href="photos/20.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  70. <img src="photos/20.jpg" height="150" />
  71. </a>
  72. <a href="photos/01.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  73. <img src="photos/01.jpg" height="150" />
  74. </a>
  75. <a href="photos/02.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  76. <img src="photos/02.jpg" height="150" />
  77. </a>
  78. <a href="photos/03.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  79. <img src="photos/03.jpg" height="150" />
  80. </a>
  81. <a href="photos/04.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  82. <img src="photos/04.jpg" height="150" />
  83. </a>
  84. <a href="photos/05.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  85. <img src="photos/05.jpg" height="150" />
  86. </a>
  87. <a href="photos/06.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  88. <img src="photos/06.jpg" height="150" />
  89. </a>
  90. <a href="photos/07.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  91. <img src="photos/07.jpg" height="150" />
  92. </a>
  93. <a href="photos/08.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  94. <img src="photos/08.jpg" height="150" />
  95. </a>
  96. <a href="photos/09.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  97. <img src="photos/09.jpg" height="150" />
  98. </a>
  99. <a href="photos/10.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  100. <img src="photos/10.jpg" height="150" />
  101. </a>
  102. <a href="photos/11.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  103. <img src="photos/11.jpg" height="150" />
  104. </a>
  105. <a href="photos/12.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  106. <img src="photos/12.jpg" height="150" />
  107. </a>
  108. <a href="photos/13.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  109. <img src="photos/13.jpg" height="150" />
  110. </a>
  111. <a href="photos/14.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  112. <img src="photos/14.jpg" height="150" />
  113. </a>
  114. <a href="photos/15.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  115. <img src="photos/15.jpg" height="150" />
  116. </a>
  117. <a href="photos/16.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  118. <img src="photos/16.jpg" height="150" />
  119. </a>
  120. <a href="photos/17.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  121. <img src="photos/17.jpg" height="150" />
  122. </a>
  123. <a href="photos/18.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  124. <img src="photos/18.jpg" height="150" />
  125. </a>
  126. <a href="photos/19.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
  127. <img src="photos/19.jpg" height="150" />
  128. </a>
  129. <a href="photos/20.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1"><img src="photos/20.jpg" height="150" /></a></center></td>
  130.   </tr>
  131. </table>
  132. </center>
  133. </body>
  134. </html>


 
Fichier CSS
 

Code :
  1. #splash_screen {
  2.     width: 100%;
  3. top: 0;
  4. left: 0;
  5. background-color: #000;
  6. position: absolute;
  7. filter: alpha(opacity=80);
  8. -moz-opacity: 0.8;
  9. opacity: 0.8;
  10. z-index: 1;
  11. cursor: pointer;
  12. }
  13. #splash_screen.bg {
  14.     background: url(bg.gif);
  15. }
  16. #image_content {
  17. border: 10px solid #FFF;
  18. background-color: #FFF;
  19. margin: 0;
  20. position: absolute;
  21. z-index: 2;
  22. }
  23. #image_content img {
  24. margin: 0;
  25. padding: 0;
  26. display: none;
  27. z-index: 3;
  28. cursor: pointer;
  29. }
  30. #title_content {
  31. font-size: 11px;
  32. color: #333;
  33. border: 10px solid #FFF;
  34. background-color: #FFF;
  35. margin: 0;
  36. padding: 0;
  37. left: 0;
  38. z-index: 3;
  39. position: absolute;
  40. }
  41. #splash_previous, #splash_next {
  42. margin: 0;
  43. padding: 0;
  44. top: 0;
  45. display: block;
  46. position: absolute;
  47. z-index: 4;
  48. cursor: pointer;
  49. width: 20px;
  50. height: 20px;
  51. }
  52. #splash_previous { right: 40px; background: url(control_rewind.png) no-repeat center; }
  53. #splash_next { right: 0; background: url(control_forward.png) no-repeat center; }
  54. #splash_pause { top: 0; right: 20px; background: url(control_stop.png) no-repeat center; }
  55. #splash_play { top: 0; right: 20px; background: url(control_play.png) no-repeat center; }
  56. #splash_notification.playing { background: url(control_play.png) no-repeat center; }
  57. #splash_notification.paused { background: url(control_stop.png) no-repeat center; }
  58. #splash_pause, #splash_play, #splash_notification {
  59. margin: 0;
  60. padding: 0;
  61. display: block;
  62. position: absolute;
  63. z-index: 4;
  64. cursor: pointer;
  65. width: 20px;
  66. height: 20px;
  67. }
  68. #splash_close {
  69. top: 0;
  70. right: 0;
  71. margin: 0;
  72. padding: 0;
  73. display: block;
  74. position: absolute;
  75. z-index: 4;
  76. cursor: pointer;
  77. width: 20px;
  78. height: 20px;
  79. background: url(cross.png) no-repeat center #FFF;
  80. }
  81. #splash_description {
  82. margin-top: 4px;
  83. font-weight: bold;
  84. }
  85. div.ajax-loading { background: url(ajax-loader-thickbox.gif) no-repeat center; }


 
Fichier plugin:
 

Code :
  1. // +------------------------------------------------------------------------+
  2. // | Affichage des image en plein écran
  3. // +------------------------------------------------------------------------+
  4. // | Javascript
  5. // |
  6. // | @author     Xuan Nguyen <xuxu.fr@gmail.com>
  7. // | @version     1.9
  8. // | Last update   2007/010/10
  9. // |
  10. // | Licensed under the Creative Commons Attribution 3 License - http://creativecommons.org/licenses/by-sa/3.0/
  11. // +------------------------------------------------------------------------+
  12. //Valeur de rel pour signifier que ce lien va être soumis au splash
  13. var rel_value = 'splash';
  14. //Distance en pixel entre le haut de l'image et le top.
  15. var margin_top = 40;
  16. //Distance en pixel entre la droite de l'image et le right si l'image dépasse du body initial.
  17. var margin_right = 40;
  18. //Distance en pixel entre le bas de l'image et le bottom si l'image dépasse du body initial.
  19. var margin_bottom = 40;
  20. //Distance en pixel entre la gauche de l'image et le right si l'image dépasse du body initial.
  21. var margin_left = 40;
  22. // Tableau comprenant les groupes d'images
  23. var splash_groups = new Array();
  24. // Tableau comprenant les liens splashed
  25. var splash_as = new Array();
  26. // Tableau comprenant les titles des liens
  27. var splash_titles = new Array();
  28. //Variable contenant le timeout
  29. var slide_timeout;
  30. //Variable contenant le timeout de la disparition de la notification de play/pause
  31. var slide_timeout_notification;
  32. //Durée timeout pour le slide
  33. var slide_timeout_value = 4000;
  34. //Groupe courant
  35. var current_group;
  36. //Position actuelle de l'image dans le groupe
  37. var current_position;
  38. //Flag is true si slide
  39. var is_sliding = false;
  40. //Flag is true si splash prend la place de lightbox
  41. var lightbox_replace = true;
  42. //Flag is true si background à la place de la couleur du fond
  43. var set_bg = false;
  44. //z-index minimum des éléments
  45. var z_index_mini = 100000;
  46. //Objets à cacher
  47. var objects_2_hide = new Array();
  48. // -----------------------------------------------------------------------------------
  49. //  Affiche l'image concernée en plein écran
  50. function splash_image(a) {
  51. //On cache les éléments embed et object
  52.     hide_and_show('hidden');
  53.     //On récupère l'indice
  54. obj_body = document.getElementsByTagName('body').item(0);
  55. //Ini la variable current_group le groupe de cette image si celle ci est groupée
  56. rel_attr = new String(a.getAttribute('rel'));
  57. val = rel_attr.replace(rel_value+'|', '');
  58. splash_id = (a.getAttribute('class')) ? new String(a.getAttribute('class').match(new RegExp(/splash[0-9]+$/))) : '';
  59. if (val != rel_value && splash_groups[val].length > 0) {
  60.  current_group = val;
  61.  current_position = in_array(splash_groups[val], splash_id);
  62. }
  63. else {
  64.  current_group = current_position = '';
  65. }
  66. if (!document.getElementById('splash_screen')) {
  67.  //Création du fond
  68.  obj_splash_screen = document.createElement('a');
  69.  obj_splash_screen.setAttribute('id', 'splash_screen');
  70.  obj_splash_screen.setAttribute('title', 'Close the splash');
  71.         obj_splash_screen.style.zIndex = z_index_mini;
  72.  array_page_size = getPageSize();
  73.  obj_splash_screen.style.width = '100%';
  74.  obj_splash_screen.style.height = array_page_size[1]+'px';
  75.  obj_splash_screen.onclick = function() { splash_bye(); return false; }
  76.  if (set_bg) { obj_splash_screen.setAttribute('class', 'bg'); }
  77.  obj_body.appendChild(obj_splash_screen);
  78.         obj_splash_screen.style.zIndex = z_index_mini;
  79.  //Création du container image et du loading
  80.  obj_content = document.createElement('div');
  81.  obj_content.setAttribute('id', 'image_content');
  82.  obj_content.style.width = '200px';
  83.  obj_content.style.height = '200px';
  84.  obj_content.className = 'ajax-loading';
  85.  obj_body.appendChild(obj_content);
  86.         obj_content.style.zIndex = z_index_mini+1;
  87.  //Positionnement
  88.  array_page_scroll = getPageScroll();
  89.  array_page_size = getPageSize();
  90.  obj_content.style.top = array_page_scroll[1]+margin_top+'px';
  91.  obj_content.style.left = array_page_size[0]/2-(parseInt(obj_content.style.width)/2)+'px';
  92. }
  93. else {
  94.  obj_splash_screen = document.getElementById('splash_screen');
  95.  obj_content = document.getElementById('image_content');
  96.  obj_content.removeChild(document.getElementById('splash_img'));
  97.  obj_content.className = 'ajax-loading';
  98. }
  99. //Supprime le title_content
  100. if (document.getElementById('title_content')) {
  101.  obj_title = document.getElementById('title_content');
  102.  //Supprime la navigation si elle existe
  103.  if (document.getElementById('splash_previous')) {
  104.   obj_title.removeChild(document.getElementById('splash_previous'));
  105.   obj_title.removeChild(document.getElementById('splash_next'));
  106.   if (document.getElementById('splash_notification')) { obj_content.removeChild(document.getElementById('splash_notification')); }
  107.   what = (is_sliding) ? 'splash_pause' : 'splash_play';
  108.   obj_title.removeChild(document.getElementById(what));
  109.  }
  110.  obj_body.removeChild(obj_title);
  111. }
  112. //Charge l'image
  113. ini_image(a);
  114. }
  115. // -----------------------------------------------------------------------------------
  116. //  Charge l'image
  117. function ini_image(a) {
  118. //Objet image pour récupérer la taille de l'image
  119. img = new Image();
  120. img.src = a.href;
  121. //Si l'image n'est pas encore chargée
  122. if (!img.complete) {
  123.  img.onload = function() {
  124.   image_display(a);
  125.  }
  126. }
  127. //Si l'image a déjà été chargée une fois
  128. else {
  129.  image_display(a);
  130. }
  131. }
  132. // -----------------------------------------------------------------------------------
  133. // Affiche l'image
  134. function image_display(a) {
  135. obj_body = document.getElementsByTagName('body').item(0);
  136. obj_content = document.getElementById('image_content');
  137. obj_splash_screen = document.getElementById('splash_screen');
  138. //Création image
  139. obj_image = document.createElement('img');
  140. obj_image.setAttribute('id', 'splash_img');
  141. obj_image.onclick = function() { splash_bye(); return false; }
  142. obj_content.appendChild(obj_image);
  143.     obj_image.style.zIndex = z_index_mini+2;
  144. //Resize du container de l'image
  145. obj_content.style.width = img.width+'px';
  146. obj_content.style.height = img.height+'px';
  147. //Replacement du container de l'image
  148. array_page_scroll = getPageScroll();
  149. array_page_size = getPageSize();
  150. obj_content.style.top = array_page_scroll[1]+margin_top+'px';
  151. obj_content.style.left = array_page_size[0]/2-(parseInt(img.width)/2)+'px';
  152. //On affiche l'image
  153. obj_content = document.getElementById('image_content');
  154. obj_content.className = '';
  155. obj_image.setAttribute('src', a.href);
  156. obj_image.style.display = 'block';
  157. //Création container title
  158. obj_close = document.createElement('a');
  159. obj_close.setAttribute('id', 'splash_close');
  160. obj_close.onclick = function() { splash_bye(); return false; }
  161. obj_content.appendChild(obj_close);
  162.     obj_close.style.zIndex = z_index_mini+3;
  163. //Création container title
  164. obj_title = document.createElement('div');
  165. obj_title.setAttribute('id', 'title_content');
  166. obj_body.appendChild(obj_title);
  167.     obj_title.style.zIndex = z_index_mini+4;
  168. obj_title.style.width = (isie()) ? obj_image.offsetWidth+'px' : img.width+'px';
  169. obj_title.style.top = array_page_scroll[1]+margin_top+(parseInt(obj_content.style.height))+20+'px';
  170. obj_title.style.left = array_page_size[0]/2-(parseInt(obj_content.style.width)/2)+'px';
  171. //Libellé position
  172. str_position = (current_group != '') ? 'Image '+(current_position+1)+' sur '+splash_groups[current_group].length+' :' : '';
  173. obj_text = document.createTextNode(str_position);
  174. obj_title.appendChild(obj_text);
  175. //Description
  176. obj_description = document.createElement('div');
  177. obj_description.setAttribute('id', 'splash_description');
  178. obj_title.appendChild(obj_description);
  179.     obj_description.style.zIndex = z_index_mini+5;
  180. splash_id = (a.getAttribute('class')) ? new String(a.getAttribute('class').match(new RegExp(/splash[0-9]+$/))) : '';
  181. obj_text = document.createTextNode(splash_titles[splash_id]);
  182. obj_description.appendChild(obj_text);
  183. //Resize le fond si l'image est trop grande
  184. array_page_size = getPageSize();
  185. total_width = margin_left+parseInt(obj_content.style.width)+margin_right;
  186. if (total_width > array_page_size[0]) { obj_splash_screen.style.width = total_width+'px'; obj_content.style.left = margin_left+'px'; obj_title.style.left = margin_left+'px'; };
  187. total_height = margin_top+parseInt(obj_content.style.top)+parseInt(obj_image.height)+parseInt(obj_title.offsetHeight)+margin_bottom;
  188. if (total_height > array_page_size[1]) { obj_splash_screen.style.height = total_height+'px'; };
  189. //Initialise la navigation si l'image fait partie d'un groupe
  190. ini_nav(a);
  191. }
  192. // -----------------------------------------------------------------------------------
  193. //  Affiche la navigation si l'image fait partie d'un groupe
  194. function ini_nav(a) {
  195. clearTimeout(slide_timeout);
  196. obj_title = document.getElementById('title_content');
  197. //Check si l'image fait partie d'un groupe
  198. rel_attr = new String(a.getAttribute('rel'));
  199. val = rel_attr.replace(rel_value+'|', '');
  200. if (splash_groups[val] && document.getElementById('splash_img')) {
  201.  //Création de l'objet splash_previous
  202.  obj_previous = document.createElement('a');
  203.  obj_previous.setAttribute('id', 'splash_previous');
  204.  obj_previous.setAttribute('title', 'Jump to the previous image');
  205.  obj_previous.onmouseover = function() { obj_previous.className = 'over'; }
  206.  obj_previous.onmouseout = function() { obj_previous.className = ''; }
  207.  obj_previous.onclick = function() { splash_previous(); }
  208.  obj_title.appendChild(obj_previous);
  209.         obj_previous.style.zIndex = z_index_mini+6;
  210.  //Création de l'objet splash_next
  211.  obj_next = document.createElement('a');
  212.  obj_next.setAttribute('id', 'splash_next');
  213.  obj_next.setAttribute('title', 'Jump to the next image');
  214.  obj_next.onmouseover = function() { obj_next.className = 'over'; }
  215.  obj_next.onmouseout = function() { obj_next.className = ''; }
  216.  obj_next.onclick = function() { splash_next(); }
  217.  obj_title.appendChild(obj_next);
  218.         obj_next.style.zIndex = z_index_mini+6;
  219.  //Création de l'objet slide_play
  220.  var obj_play = document.createElement('a');
  221.  if (!is_sliding) {
  222.   obj_play.setAttribute('id', 'splash_play');
  223.   obj_play.setAttribute('title', 'Start the slide');
  224.  }
  225.  else {
  226.   obj_play.setAttribute('id', 'splash_pause');
  227.   obj_play.setAttribute('title', 'Pause the slide');
  228.  }
  229.  obj_play.onclick = function() { splash_pause(); }
  230.  obj_play.onmouseover = function() { obj_play.className = 'over'; }
  231.  obj_play.onmouseout = function() { obj_play.className = ''; }
  232.  obj_title.appendChild(obj_play);
  233.         obj_play.style.zIndex = z_index_mini+6;
  234.  //
  235.  if (is_sliding) { slide_timeout = window.setTimeout(splash_next, slide_timeout_value); }
  236. }
  237. }
  238. // -----------------------------------------------------------------------------------
  239. // To previous image
  240. function splash_previous() {
  241. current_position = (current_position-1 < 0) ? splash_groups[current_group].length-1 : current_position-1;
  242. splash_image(splash_as[splash_groups[current_group][current_position]]);
  243. }
  244. // -----------------------------------------------------------------------------------
  245. // To next image
  246. function splash_next() {
  247. current_position = (current_position+1 == splash_groups[current_group].length) ? 0 : current_position+1;
  248. splash_image(splash_as[splash_groups[current_group][current_position]]);
  249. }
  250. // -----------------------------------------------------------------------------------
  251. // Pause the slide (ou pas)
  252. function splash_pause() {
  253. if (!is_sliding) {
  254.  is_sliding = true;
  255.  document.getElementById('splash_play').setAttribute('id', 'splash_pause');
  256.  document.getElementById('splash_pause').setAttribute('title', 'Pause the slide');
  257.  current_position = (current_position == splash_groups[current_group].length) ? 0 : current_position;
  258.  slide_timeout = window.setTimeout(splash_next, slide_timeout_value/4);
  259. }
  260. else {
  261.  is_sliding = false;
  262.  document.getElementById('splash_pause').setAttribute('id', 'splash_play');
  263.  document.getElementById('splash_play').setAttribute('title', 'Start the slide');
  264.  clearTimeout(slide_timeout);
  265. }
  266. }
  267. // -----------------------------------------------------------------------------------
  268. // Notification d'action
  269. function notification() {
  270. clearTimeout(slide_timeout_notification);
  271. obj_content = document.getElementById('image_content');
  272. if (!document.getElementById('splash_notification')) {
  273.  //Création du petit icone playing/paused
  274.  obj_slide = document.createElement('a');
  275.  obj_slide.setAttribute('id', 'splash_notification');
  276.  obj_slide.setAttribute('title', 'Sliding (ou pas)');
  277.  obj_content.appendChild(obj_slide);
  278.         obj_slide.style.zIndex = z_index_mini+6;
  279.  obj_slide.style.top = (parseInt(obj_content.style.height)/2)-25+'px'; //25 car largeur de l'image play/pause divisée par 2
  280.  obj_slide.style.left = (parseInt(obj_content.style.width)/2)-25+'px'; //25 car hauteur de l'image play/pause divisée par 2
  281.  obj_slide.style.width = '50px'; // 50 largeur de l'image play/pause
  282.  obj_slide.style.height = '50px'; // 50 hauteur de l'image play/pause
  283. }
  284. else {
  285.  obj_slide = document.getElementById('splash_notification');
  286. }
  287. if (is_sliding) {
  288.  obj_slide.className = 'playing';
  289. }
  290. else {
  291.  obj_slide.className = 'paused';
  292.  slide_timeout_notification = setTimeout(splash_notification_bye, 2000);
  293. }
  294. }
  295. // -----------------------------------------------------------------------------------
  296. // Slide notification
  297. function splash_notification_bye() {
  298. if (document.getElementById('image_content')) {
  299.  obj_content = document.getElementById('image_content');
  300.  obj_content.removeChild(document.getElementById('splash_notification'));
  301. }
  302. clearTimeout(slide_timeout_notification);
  303. }
  304. // -----------------------------------------------------------------------------------
  305. // Au revoir Splash
  306. function splash_bye() {
  307. clearTimeout(slide_timeout);
  308. clearTimeout(slide_timeout_notification);
  309. is_sliding = false;
  310. obj_body = document.getElementsByTagName('body').item(0);
  311. obj_body.removeChild(document.getElementById('splash_screen'));
  312. obj_body.removeChild(document.getElementById('image_content'));
  313. if (document.getElementById('title_content')) { obj_body.removeChild(document.getElementById('title_content')); }
  314. //On réaffiche les éléments embed et object
  315.     hide_and_show('visible');
  316. }
  317. // -----------------------------------------------------------------------------------
  318. // Check la touche clavier enfoncé
  319. function key_check(e) {
  320. if (document.getElementById('splash_img')) {
  321.  clearTimeout(slide_timeout);
  322.  what = (e == null) ? event.keyCode : e.which;
  323.  if (in_array(new Array(27, 38, 46, 88), what) >= 0) { //Esc, Suppr, flèche haut, x
  324.   splash_bye();
  325.   return false;
  326.  }
  327.  if (splash_groups[current_group]) {
  328.   if (in_array(new Array(13, 32, 40), what) >= 0) { //Entrée, espace, flèche bas
  329.    splash_pause();
  330.    notification();
  331.    return false;
  332.   }
  333.   if (in_array(new Array(33, 37, 109), what) >= 0) { // Page Up , flèche gauche, -
  334.    splash_previous();
  335.    return false;
  336.   }
  337.   if (in_array(new Array(34, 39, 107), what) >= 0) { // Page Down, flèche droite, +
  338.    splash_next();
  339.    return false;
  340.   }
  341.  }
  342. }
  343. }
  344. // -----------------------------------------------------------------------------------
  345. // Cache/Affiche les éléments de type Embed/object
  346. function hide_and_show(todo){
  347. for (i=0; i<objects_2_hide.length; i++) { objects_2_hide[i].style.visibility = todo; }
  348. }
  349. // -----------------------------------------------------------------------------------
  350. // Initialise les liens concernés
  351. function ini_splash_images() {
  352.     //On récupère les objets à cacher
  353. objs = document.getElementsByTagName('object');
  354. for (i=0; i<objs.length; i++) {
  355.     if (objs[i].style.visibility == 'visible' || objs[i].style.visibility == '') { objects_2_hide[objects_2_hide.length] = objs[i]; }
  356.     }
  357. objs = document.getElementsByTagName('embed');
  358. for (i=0; i<objs.length; i++) {
  359.     if (objs[i].style.visibility == 'visible' || objs[i].style.visibility == '') { objects_2_hide[objects_2_hide.length] = objs[i]; }
  360.     }
  361. splash_groups = new Array();
  362. splash_as = new Array();
  363. splash_titles = new Array();
  364. as = document.getElementsByTagName('a');
  365. for (i=0; i<as.length; i++) {
  366.  a = as[i];
  367.  rel_attr = new String(a.getAttribute('rel'));
  368.  if (rel_attr.match('splash.image')) { rel_attr = rel_attr.replace('splash.image', 'splash'); a.setAttribute('rel', rel_attr); }
  369.  if (lightbox_replace && rel_attr.match('lightbox')) {
  370.             rel_attr = rel_attr.replace('lightbox', 'splash');
  371.             rel_attr = rel_attr.replace('splash[', 'splash|');
  372.             rel_attr = rel_attr.replace(/]$/, '');
  373.             a.setAttribute('rel', rel_attr);
  374.         }
  375.  rel_attr = new String(a.getAttribute('rel'));
  376.  if (rel_attr.match('splash')) {
  377.   splash_id = 'splash'+i;
  378.   klass = (a.getAttribute('class')) ? a.getAttribute('class')+' '+splash_id : splash_id;
  379.   a.setAttribute('class', klass);
  380.   a.onclick = function () { splash_image(this); return false; }
  381.   val = rel_attr.replace(rel_value+'|', '');
  382.   if (val != rel_value) {
  383.    array = (!splash_groups[val] || typeof splash_groups[val] != 'object') ? new Array() : splash_groups[val];
  384.    array[array.length] = splash_id;
  385.    splash_groups[val] = array;
  386.    splash_as[splash_id] = a;
  387.   }
  388.   splash_titles[splash_id] = (a.getAttribute('title')) ? a.getAttribute('title') : 'Image '+i;
  389.  }
  390. }
  391. // -----------------------------------------------------------------------------------
  392. // On lance le check de la touche clavier enfoncée
  393. document.onkeydown = key_check;
  394. }
  395. // -----------------------------------------------------------------------------------
  396. //
  397. // Fonctions annexes
  398. //
  399. // -----------------------------------------------------------------------------------
  400. // -----------------------------------------------------------------------------------
  401. // getPageScroll()
  402. // Returns array with x,y page scroll values.
  403. // Core code from - quirksmode.org
  404. // Code by Lokesh Dhakar
  405. function getPageScroll(){
  406. var yScroll;
  407. if (self.pageYOffset) {
  408.  yScroll = self.pageYOffset;
  409. } else if (document.documentElement && document.documentElement.scrollTop){  // Explorer 6 Strict
  410.  yScroll = document.documentElement.scrollTop;
  411. } else if (document.body) {// all other Explorers
  412.  yScroll = document.body.scrollTop;
  413. }
  414. arrayPageScroll = new Array('',yScroll)
  415. return arrayPageScroll;
  416. }
  417. // -----------------------------------------------------------------------------------
  418. // getPageSize()
  419. // Returns array with page width, height and window width, height
  420. // Core code from - quirksmode.org
  421. // Code by Lokesh Dhakar
  422. // Edit for Firefox by pHaez
  423. //
  424. function getPageSize(){
  425. var xScroll, yScroll;
  426. if (window.innerHeight && window.scrollMaxY) {
  427.  xScroll = document.body.scrollWidth;
  428.  yScroll = window.innerHeight + window.scrollMaxY;
  429. } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
  430.  xScroll = document.body.scrollWidth;
  431.  yScroll = document.body.scrollHeight;
  432. } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
  433.  xScroll = document.body.offsetWidth;
  434.  yScroll = document.body.offsetHeight;
  435. }
  436. var windowWidth, windowHeight;
  437. if (self.innerHeight) { // all except Explorer
  438.  windowWidth = self.innerWidth;
  439.  windowHeight = self.innerHeight;
  440. } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
  441.  windowWidth = document.documentElement.clientWidth;
  442.  windowHeight = document.documentElement.clientHeight;
  443. } else if (document.body) { // other Explorers
  444.  windowWidth = document.body.clientWidth;
  445.  windowHeight = document.body.clientHeight;
  446. }
  447. // for small pages with total height less then height of the viewport
  448. if(yScroll < windowHeight){
  449.  pageHeight = windowHeight;
  450. } else {
  451.  pageHeight = yScroll;
  452. }
  453. // for small pages with total width less then width of the viewport
  454. if(xScroll < windowWidth){
  455.  pageWidth = windowWidth;
  456. } else {
  457.  pageWidth = xScroll;
  458. }
  459. arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
  460. return arrayPageSize;
  461. }
  462. // -----------------------------------------------------------------------------------
  463. // Core code from - quirksmode.org
  464. function addEvent(obj, evType, fn, useCapture){
  465. if (obj.addEventListener) {
  466.  obj.addEventListener(evType, fn, useCapture);
  467.  return true;
  468. }
  469. else if (obj.attachEvent){
  470.  var r = obj.attachEvent("on"+evType, fn);
  471.  return r;
  472. }
  473. else {
  474.  alert("Handler could not be attached" );
  475. }
  476. }
  477. // -----------------------------------------------------------------------------------
  478. //  Check si val est présent dans le tableau ar
  479. // Last update 2007-04-03
  480. // Code by Xuan NGUYEN
  481. function in_array (ar, val) {
  482. if (ar.length == 0) { return -1; }
  483. for (i=0; i<ar.length; i++) { if (ar[i] == val) { return i; } }
  484. return -1;
  485. }
  486. // +------------------------------------------------------------------------+
  487. // + isie()
  488. // +------------------------------------------------------------------------+
  489. function isie() {
  490. if (navigator.appName == 'Microsoft Internet Explorer') {
  491.  var reg_exp = new RegExp('MSIE [0-9]*.[0-9]*', 'gi');
  492.  var str = new String(navigator.appVersion);
  493.  var result = new String(str.match(reg_exp));
  494.  var array_version = result.split(' ');
  495.  var version = array_version[1];
  496.  return version;
  497. }
  498. else {
  499.  return false;
  500. }
  501. }
  502. //Lance l'ini au chargement de la page
  503. addEvent(window, 'load', ini_splash_images);

Reply

Marsh Posté le 23-10-2014 à 17:54:07   

Reply

Marsh Posté le 23-10-2014 à 22:23:44    

personne? j'ai compris que c'était lié a la taille de la photo et de la resolution du pc, mais j'arrive pas a trouver ou on regle ca sans avoir a tout redimensionner.

Reply

Sujets relatifs:

Leave a Replay

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