Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1562 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2241042
dante05
Posté le 23-10-2014 à 17:54:07  profilanswer
 

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);

mood
Publicité
Posté le 23-10-2014 à 17:54:07  profilanswer
 

n°2241056
dante05
Posté le 23-10-2014 à 22:23:44  profilanswer
 

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.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

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

 

Sujets relatifs
VBScript : Crée une image PNG issu d'une variable texteImage de fond pour une liste
Image dans les balises option sous ChromeCharger une image ou fichier dans excel via macro
créer une image à partir d'une matricelibrairie CImg : créer une image à partir d'une matrice
Chaner le résultat d'une valeur dans array par une imageAjout d'image MVC
servlet pour l'affichage d'une imagePhpmyadmin importer image
Plus de sujets relatifs à : image diapo qui s'ouvre sur le coté...


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR