Résolu Modification d'un code jQuery

Solutions (15)
Tags :
  • Jquery
  • photo
  • Script
  • Programmation
|
Bonjour,

Lors de la création de mon site, j'ai trouvé un plugin jQuery assez sympa pour faire une galerie photo. J'ai réussi à le faire fonctionner sans problème mais un détail m'ennuie : je ne peux pas utiliser le texte de description des photos comme lien.
Les options du script me permettent seulement de créer d'utiliser l'image de la galerie comme lien vers un site web mais pas le texte de description.
Y a-t-il un moyen de modifier le code pour pouvoir utiliser un lien texte ?

La galerie utilisée est PictureSlides et voici la partie contenue dans mon header et la photo qui me pose problème.

Merci d'avance pour votre aide.

  1. <script type="text/javascript" src="/js/jquery.min.js"></script>
  2. <script type="text/javascript" src="/js/PictureSlides-jquery-2.0.js"></script>
  3. <script type="text/javascript">
  4. jQuery.PictureSlides.set({
  5. // Switches to decide what features to use
  6. useFadingIn : true,
  7. useFadingOut : true,
  8. useFadeWhenNotSlideshow : true,
  9. useFadeForSlideshow : true,
  10. useDimBackgroundForSlideshow : true,
  11. loopSlideshow : false,
  12. usePreloading : true,
  13. useAltAsTooltip : true,
  14. useTextAsTooltip : false,
  15.  
  16. // Fading settings
  17. fadeTime : 500, // Milliseconds
  18. timeForSlideInSlideshow : 3000, // Milliseconds
  19.  
  20. // At page load
  21. startIndex : 1,
  22. startSlideShowFromBeginning : true,
  23. startSlideshowAtLoad : false,
  24. dimBackgroundAtLoad : false,
  25.  
  26. // Large images to use and thumbnail settings
  27. images : [
  28.  
  29. {
  30. image : "/images/03.jpg",
  31. alt : "Click to visit G.I.N.'s MySpace",
  32. text : "Show goes on - Gwen Is Naked - Click to visit their MySpace",
  33. url : "<a href="http://www.myspace.com/gwenisnaked" rel="nofollow" target="_blank">http://www.myspace.com/gwenisnaked</a>"
  34. },
  35. ],
  36. thumbnailActivationEvent : "click",
  37.  
  38. // Classes of HTML elements to use
  39. mainImageClass : "picture-slides-image", // Mandatory
  40. mainImageFailedToLoadClass : "picture-slides-image-load-fail",
  41. imageLinkClass : "picture-slides-image-link",
  42. fadeContainerClass : "picture-slides-fade-container",
  43. imageTextContainerClass : "picture-slides-image-text",
  44. previousLinkClass : "picture-slides-previous-image",
  45. nextLinkClass : "picture-slides-next-image",
  46. imageCounterClass : "picture-slides-image-counter",
  47. startSlideShowClass : "picture-slides-start-slideshow",
  48. stopSlideShowClass : "picture-slides-stop-slideshow",
  49. thumbnailContainerClass: "picture-slides-thumbnails",
  50. dimBackgroundOverlayClass : "picture-slides-dim-overlay"
  51. });
  52. </script>

Contenus similaires
Meilleure solution
partage
, Modérateur |
Je viens de tester, et en effet, ça ne marche pas, il ne prend qu'un seul élément pour faire le lien.
Il va falloir modifier le code javascript.
Remplace le code du fichier PicturesSlides-jquery-2.0.js par ça (double clique sur le code pour enlever les numéros de ligne, sinon tu vas te retrouver avec les numéros de ligne dans le copier/coller) :
  1. /*global jQuery, $ */
  2. /*
  3. jQuery.PictureSlides is developed by Robert Nyman, http://www.robertnyman.com
  4. For more information, please see http://www.robertnyman.com/picture-slides
  5. Released under a MIT License
  6. */
  7. jQuery.PictureSlides = function () {
  8. var useMSFilter = false,
  9. slideshows = [],
  10. set = function (settings) {
  11. slideshows.push(settings);
  12. },
  13.  
  14. init = function () {
  15. var counter = 0;
  16. $(".picture-slides-container").each(function () {
  17. var elm = $(this),
  18.  
  19. // Element references
  20. settings = slideshows[counter++],
  21. mainImage = elm.find("." + settings.mainImageClass),
  22. mainImageFailedToLoad = elm.find("." + settings.mainImageFailedToLoadClass),
  23. imageLink = elm.find("." + settings.imageLinkClass),
  24. // ### on ajoute ici la classe qui va s'occuper du lien sur le texte
  25. textLink = elm.find("." + settings.textLinkClass),
  26. fadeContainer = elm.find("." + settings.fadeContainerClass),
  27. imageTextContainer = elm.find("." + settings.imageTextContainerClass),
  28. previousLink = elm.find("." + settings.previousLinkClass),
  29. nextLink = elm.find("." + settings.nextLinkClass),
  30. imageCounter = elm.find("." + settings.imageCounterClass),
  31. startSlideShowLink = elm.find("." + settings.startSlideShowClass),
  32. stopSlideShowLink = elm.find("." + settings.stopSlideShowClass),
  33. thumbnailContainer = elm.find("." + settings.thumbnailContainerClass),
  34. thumbnailEvent = settings.thumbnailActivationEvent,
  35. thumbnailLinks,
  36. dimBackgroundOverlay = $("." + settings.dimBackgroundOverlayClass),
  37.  
  38. // General image settings
  39. usePreloading = settings.usePreloading,
  40. useAltAsTooltip = settings.useAltAsTooltip,
  41. useTextAsTooltip = settings.useTextAsTooltip,
  42. images = settings.images,
  43. startIndex = (settings.startIndex > 0)? (settings.startIndex - 1) : settings.startIndex,
  44. imageIndex = startIndex,
  45. currentImageIndex = imageIndex,
  46. startSlideShowFromBeginning = settings.startSlideShowFromBeginning,
  47. dimBackgroundAtLoad = settings.dimBackgroundAtLoad,
  48.  
  49. // General fade settings
  50. useFadingIn = settings.useFadingIn,
  51. useFadingOut = settings.useFadingOut,
  52. useFadeWhenNotSlideshow = settings.useFadeWhenNotSlideshow,
  53. useFadeForSlideshow = settings.useFadeForSlideshow,
  54. useDimBackgroundForSlideshow = settings.useDimBackgroundForSlideshow,
  55. loopSlideshow = settings.loopSlideshow,
  56. fadeTime = settings.fadeTime,
  57. timeForSlideInSlideshow = settings.timeForSlideInSlideshow,
  58. startSlideshowAtLoad = settings.startSlideshowAtLoad,
  59. slideshowPlaying = false,
  60. timer,
  61.  
  62. // Sets main image
  63. setImage = function () {
  64. // Set main image values
  65. var imageItem = images[imageIndex];
  66. mainImage.attr({
  67. src : imageItem.image,
  68. alt : imageItem.alt
  69. });
  70.  
  71. // If the alt text should be used as the tooltip
  72. if (useAltAsTooltip) {
  73. mainImage.attr("title", imageItem.alt);
  74. }
  75.  
  76. // If the image text should be used as the tooltip
  77. if (useTextAsTooltip) {
  78. mainImage.attr("title", imageItem.text);
  79. }
  80.  
  81. // Set image text
  82. if (textLink.length > 0) {
  83. textLink.text(imageItem.text);
  84. }
  85.  
  86. // ### On ajoute ici le lien sur le texte
  87. if (textLink.length > 0) {
  88. var url = imageItem.url;
  89. if (typeof url !== "undefined" && url.length > 0) {
  90. textLink.attr("href", imageItem.url);
  91. }
  92. else {
  93. textLink.removeAttr("href");
  94. }
  95. }
  96.  
  97. // Set image link
  98. if (imageLink.length > 0) {
  99. var url = imageItem.url;
  100. if (typeof url !== "undefined" && url.length > 0) {
  101. imageLink.attr("href", imageItem.url);
  102. }
  103. else {
  104. imageLink.removeAttr("href");
  105. }
  106. }
  107.  
  108. // Set image counter values
  109. if (imageCounter.length > 0) {
  110. imageCounter.text((imageIndex + 1) + "/" + (images.length));
  111. }
  112.  
  113. if (!loopSlideshow) {
  114. // Enabling/disabling previous link
  115. if (imageIndex === 0) {
  116. previousLink.addClass("picture-slides-disabled");
  117. }
  118. else {
  119. previousLink.removeClass("picture-slides-disabled");
  120. }
  121.  
  122. // Enabling/disabling next link
  123. if (imageIndex === (images.length - 1)) {
  124. nextLink.addClass("picture-slides-disabled");
  125. }
  126. else {
  127. nextLink.removeClass("picture-slides-disabled");
  128. }
  129. }
  130.  
  131. // Keeping a reference to the current image index
  132. currentImageIndex = imageIndex;
  133.  
  134. // Adding/removing classes from thumbnail
  135. if (thumbnailContainer[0]) {
  136. thumbnailLinks.removeClass("picture-slides-selected-thumbnail");
  137. $(thumbnailLinks[imageIndex]).addClass("picture-slides-selected-thumbnail");
  138. }
  139. },
  140.  
  141. // Navigate to previous image
  142. prev = function () {
  143. if (imageIndex > 0 || loopSlideshow) {
  144. if (imageIndex === 0) {
  145. imageIndex = (images.length -1);
  146. }
  147. else {
  148. imageIndex = --imageIndex;
  149. }
  150. if (useFadingOut && (useFadeWhenNotSlideshow || slideshowPlaying) && imageIndex !== currentImageIndex) {
  151. fadeContainer.stop();
  152. fadeContainer.fadeTo(fadeTime, 0, function () {
  153. setImage(imageIndex);
  154. });
  155. }
  156. else {
  157. if (useFadingIn && imageIndex !== currentImageIndex) {
  158. fadeContainer.css("opacity", "0");
  159. }
  160. setImage(imageIndex);
  161. }
  162. }
  163. },
  164.  
  165. // Navigate to next image
  166. next = function (specifiedIndex) {
  167. if (imageIndex < (images.length -1) || typeof specifiedIndex !== "undefined" || loopSlideshow) {
  168. if (typeof specifiedIndex !== "undefined") {
  169. imageIndex = specifiedIndex;
  170. }
  171. else if (imageIndex === (images.length-1)) {
  172. imageIndex = 0;
  173. }
  174. else {
  175. imageIndex = ++imageIndex;
  176. }
  177. if (useFadingOut && (useFadeWhenNotSlideshow || slideshowPlaying) && imageIndex !== currentImageIndex) {
  178. fadeContainer.stop();
  179. fadeContainer.fadeTo(fadeTime, 0, function () {
  180. setImage(imageIndex);
  181. });
  182. }
  183. else {
  184. if (useFadingIn && imageIndex !== currentImageIndex) {
  185. fadeContainer.css("opacity", "0");
  186. }
  187. setImage(imageIndex);
  188. }
  189. }
  190. else {
  191. stopSlideshow();
  192. }
  193. },
  194.  
  195. // Start slideshow
  196. startSlideshow = function () {
  197. slideshowPlaying = true;
  198. startSlideShowLink.hide();
  199. stopSlideShowLink.show();
  200. if (startSlideShowFromBeginning) {
  201. next(0);
  202. }
  203. clearTimeout(timer);
  204. timer = setTimeout(function () {
  205. next();
  206. }, timeForSlideInSlideshow);
  207. if (useDimBackgroundForSlideshow && dimBackgroundOverlay[0]) {
  208. elm.addClass("picture-slides-dimmed-background");
  209. dimBackgroundOverlay.show();
  210. }
  211. },
  212.  
  213. // Stop slideshow
  214. stopSlideshow = function () {
  215. clearTimeout(timer);
  216. slideshowPlaying = false;
  217. startSlideShowLink.show();
  218. stopSlideShowLink.hide();
  219. if (useDimBackgroundForSlideshow && dimBackgroundOverlay[0]) {
  220. elm.removeClass("picture-slides-dimmed-background");
  221. dimBackgroundOverlay.hide();
  222. }
  223. };
  224.  
  225. // Fade in/show image when it has loaded
  226. mainImage[0].onload = function () {
  227. if (useFadingIn && (useFadeWhenNotSlideshow || slideshowPlaying)) {
  228. fadeContainer.fadeTo(fadeTime, 1, function () {
  229. if (slideshowPlaying) {
  230. clearTimeout(timer);
  231. timer = setTimeout(function () {
  232. next();
  233. }, timeForSlideInSlideshow);
  234. }
  235. });
  236. }
  237. else {
  238. fadeContainer.css("opacity", "1");
  239. fadeContainer.show();
  240. if (slideshowPlaying) {
  241. clearTimeout(timer);
  242. timer = setTimeout(function () {
  243. next();
  244. }, timeForSlideInSlideshow);
  245. }
  246. }
  247. mainImageFailedToLoad.hide();
  248. };
  249.  
  250. mainImage[0].onerror = function () {
  251. fadeContainer.css("opacity", "1");
  252. mainImageFailedToLoad.show();
  253. if (slideshowPlaying) {
  254. clearTimeout(timer);
  255. timer = setTimeout(function () {
  256. next();
  257. }, timeForSlideInSlideshow);
  258. }
  259. };
  260.  
  261. // Previous image click
  262. previousLink.click(function (evt) {
  263. prev();
  264. return false;
  265. });
  266.  
  267. // Next image click
  268. nextLink.click(function (evt) {
  269. next();
  270. return false;
  271. });
  272.  
  273. // Start slideshow click
  274. startSlideShowLink.click(function () {
  275. startSlideshow();
  276. return false;
  277. });
  278.  
  279. // Stop slideshow click
  280. stopSlideShowLink.click(function () {
  281. stopSlideshow();
  282. return false;
  283. });
  284.  
  285. // Shows navigation links and image counter
  286. previousLink.show();
  287. nextLink.show();
  288. startSlideShowLink.show();
  289. imageCounter.show();
  290.  
  291. // Stop slideshow click
  292. stopSlideShowLink.click(function () {
  293. stopSlideshow();
  294. });
  295.  
  296. // Thumbnail references
  297. if (thumbnailContainer[0]) {
  298. thumbnailLinks = $(thumbnailContainer).find("a");
  299. $(thumbnailLinks[imageIndex]).addClass("picture-slides-selected-thumbnail");
  300. for (var i=0, il=thumbnailLinks.length, thumbnailLink; i<il; i++) {
  301. thumbnailLink = $(thumbnailLinks[i]);
  302. thumbnailLink.data("linkIndex", i);
  303. thumbnailLink.bind(thumbnailEvent, function (evt) {
  304. next($(this).data("linkIndex"));
  305. this.blur();
  306. return false;
  307. });
  308. }
  309. }
  310.  
  311. // Sets initial image
  312. setImage();
  313.  
  314. // If play slideshow at load
  315. if (startSlideshowAtLoad) {
  316. startSlideshow();
  317. }
  318.  
  319. if (dimBackgroundAtLoad) {
  320. elm.addClass("picture-slides-dimmed-background");
  321. dimBackgroundOverlay.show();
  322. }
  323.  
  324. if (usePreloading) {
  325. var imagePreLoadingContainer = $("<div />").appendTo(document.body).css("display", "none");
  326. for (var j=0, jl=images.length, image; j<jl; j++) {
  327. $('<img src="' + images[j].image + '" alt="" />').appendTo(imagePreLoadingContainer);
  328. }
  329. }
  330. });
  331. };
  332. return {
  333. set : set,
  334. init : init
  335. };
  336. }();
  337. $(document).ready(function () {
  338. jQuery.PictureSlides.init();
  339. });


Ensuite, il va falloir éditer un peu le code de ta page HTML :
Dans ce que tu m'as donné, à la ligne 184 tu as ça :
imageLinkClass : "picture-slides-image-link",

Il faut qu'on ajoute un nouvel élément pour le lien du texte :
Ajoute cette ligne juste en dessous:
textLinkClass : "pictures-slides-text-link",


Et à la ligne 274 que je viens de te faire changer, on va la changer en ça :
<div class="picture-slides-image-text"><a class="picture-slides-text-link">Enlighten knowledge</a></div>


Et normalement, ça devrait le faire... (je n'ai pas testé)
  • Commenter cette solution |
Score
0
òh
òi
|
Meilleure réponse sélectionnée par soca_09.
  • Commenter cette réponse |
Score
0
òh
òi
|
Super ! Ce coup-ci c'est parfait ! Merci beaucoup pour ta patience et ton efficacité !
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Ah oui pardon j'ai mis un s en trop à 'pictures-slides-text-link", c'est "picture-slides-text-link" pour le textLinkClass
  • Commenter cette réponse |
Score
0
òh
òi
|
En spécifiant une url par image ça ne change rien, j'ai essayé, le texte restecelui de la première photo et s'il prends l'apparence d'un lien, il ne fonctionne pas.
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Il est à noter que tu n'as spécifié une url que pour l'élément 3 dans ton code javascript
  • Commenter cette réponse |
Score
0
òh
òi
|
En modifiant le code comme tu me l'as indiqué, on crée effectivement le lien vers le text, en revanche, le changement de texte à chaque image n'est pas pris en compte. Il doit falloir une ligne ou deux de code en plus, quelque chose du genre :
  1. mainTextClass : "pictures-slides-text",


Quelque chose pour indiquer que le premier élément du HTML eu niveau du texte doit être modifié, comme les images.
J'ai fait quelques essais infructueux pour le moment, mais je continue de chercher. Petit à petit je m'habitue au fonctionnement du script.

Tu m'aides beaucoup, merci.

EDIT : Je viens de réagir : en fait le texte prend l'apparence d'un lien mais le lien ne fonctionne pas.
  • Commenter cette réponse |
Score
0
òh
òi
|
Je viens de faire la modif que tu me suggères mais ça n'a rien changé. J'ai bien compris le raisonnement (enfin !), par contre, ça n'a pas l'air de marcher dans ce cas et je ne comprends toujours pas pourquoi. Ou alors j'ai zappé quelque chose.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
  3. <html xmlns="<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>" lang="en" xml:lang="en">
  4. <head>
  5.  
  6. <link rel="icon" type="image/png" href="/favicon.png"/>
  7.  
  8. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <link href="css.css" rel="stylesheet" type="text/css" />
  11.  
  12. <title>Photo gallery</title>
  13.  
  14. <script type="text/javascript" src="/js/jquery.min.js"></script>
  15. <script type="text/javascript" src="/js/PictureSlides-jquery-2.0.js"></script>
  16. <script type="text/javascript">
  17. jQuery.PictureSlides.set({
  18. // Switches to decide what features to use
  19. useFadingIn : true,
  20. useFadingOut : true,
  21. useFadeWhenNotSlideshow : true,
  22. useFadeForSlideshow : true,
  23. useDimBackgroundForSlideshow : true,
  24. loopSlideshow : false,
  25. usePreloading : true,
  26. useAltAsTooltip : true,
  27. useTextAsTooltip : false,
  28.  
  29. // Fading settings
  30. fadeTime : 500, // Milliseconds
  31. timeForSlideInSlideshow : 3000, // Milliseconds
  32.  
  33. // At page load
  34. startIndex : 1,
  35. startSlideShowFromBeginning : true,
  36. startSlideshowAtLoad : false,
  37. dimBackgroundAtLoad : false,
  38.  
  39. // Large images to use and thumbnail settings
  40. images : [
  41. {
  42. image : "/images/00.jpg",
  43. alt : "Enlighten knowledge",
  44. text : "Enlighten knowledge. High school Clément Marot - Cahors"
  45. },
  46. {
  47. image : "/images/01.jpg",
  48. alt : "Macro Music",
  49. text : "Macro Music"
  50. },
  51. {
  52. image : "/images/02.jpg",
  53. alt : "Dust on the Playground",
  54. text : "Dust on the Playground"
  55. },
  56. {
  57. image : "/images/03.jpg",
  58. alt : "Show goes on",
  59. text : "Show goes on - Gwen Is Naked",
  60. url : "<a href="http://www.myspace.com/gwenisnaked" rel="nofollow" target="_blank">http://www.myspace.com/gwenisnaked</a>"
  61. },
  62. {
  63. image : "/images/04.jpg",
  64. alt : "Alors Danse",
  65. text : "Alors Danse - Model: Adeline B."
  66. },
  67. {
  68. image : "/images/05.jpg",
  69. alt : "Crimson",
  70. text : "Crimson"
  71. },
  72. {
  73. image : "/images/06.jpg",
  74. alt : "Never forget to dream",
  75. text : "Never forget to dream"
  76. },
  77. {
  78. image : "/images/07.jpg",
  79. alt : "Douceur Nature n°15",
  80. text : "Douceur Nature n°15"
  81. },
  82. {
  83. image : "/images/08.jpg",
  84. alt : "Douceur Nature n°06",
  85. text : "Douceur Nature n°06"
  86. },
  87. {
  88. image : "/images/09.jpg",
  89. alt : "Hope",
  90. text : "Hope"
  91. },
  92. {
  93. image : "/images/10.jpg",
  94. alt : "Douceur Nature n°08",
  95. text : "Douceur Nature n°08"
  96. },
  97. {
  98. image : "/images/11.jpg",
  99. alt : "Douceur Nature n°03",
  100. text : "Douceur Nature n°03"
  101. },
  102. {
  103. image : "/images/12.jpg",
  104. alt : "Douceur Nature n°10",
  105. text : "Douceur Nature n°10"
  106. },
  107. {
  108. image : "/images/13.jpg",
  109. alt : "Fairyland",
  110. text : "Fairyland"
  111. },
  112. {
  113. image : "/images/14.jpg",
  114. alt : "Do you remember?",
  115. text : "Do you remember?"
  116. },
  117. {
  118. image : "/images/15.jpg",
  119. alt : "Under the Bridge",
  120. text : "Under the Bridge - Pont Valentré, Cahors"
  121. },
  122. {
  123. image : "/images/16.jpg",
  124. alt : "Watch me",
  125. text : "Watch me - St Etienne Cathedral, Cahors"
  126. },
  127. {
  128. image : "/images/17.jpg",
  129. alt : "Dare enter",
  130. text : "Dare enter - St Etienne Cathedral, Cahors"
  131. },
  132. {
  133. image : "/images/18.jpg",
  134. alt : "Alone in light",
  135. text : "Alone in light"
  136. },
  137. {
  138. image : "/images/19.jpg",
  139. alt : "The Bird(s)",
  140. text : "Don't they ever stop migrating? - Alfred Hitchcock - The Birds. Perched on the top of trees they are safe, we are not."
  141. },
  142. {
  143. image : "/images/20.jpg",
  144. alt : "Friends?",
  145. text : "Friends?"
  146. },
  147. {
  148. image : "/images/21.jpg",
  149. alt : "Songe",
  150. text : "Songe"
  151. },
  152. {
  153. image : "/images/22.jpg",
  154. alt : "IR",
  155. text : "IR"
  156. },
  157. {
  158. image : "/images/23.jpg",
  159. alt : "Twilight",
  160. text : "Twilight"
  161. },
  162. {
  163. image : "/images/24.jpg",
  164. alt : "Let the sun shine",
  165. text : "Let the sun shine"
  166. },
  167. {
  168. image : "/images/25.jpg",
  169. alt : "- Vision -",
  170. text : "- Vision -"
  171. },
  172. {
  173. image : "/images/26.jpg",
  174. alt : "Capture",
  175. text : "Capture"
  176. },
  177.  
  178. ],
  179. thumbnailActivationEvent : "click",
  180.  
  181. // Classes of HTML elements to use
  182. mainImageClass : "picture-slides-image", // Mandatory
  183. mainImageFailedToLoadClass : "picture-slides-image-load-fail",
  184. imageLinkClass : "picture-slides-image-link",
  185. fadeContainerClass : "picture-slides-fade-container",
  186. imageTextContainerClass : "picture-slides-image-text",
  187. previousLinkClass : "picture-slides-previous-image",
  188. nextLinkClass : "picture-slides-next-image",
  189. imageCounterClass : "picture-slides-image-counter",
  190. startSlideShowClass : "picture-slides-start-slideshow",
  191. stopSlideShowClass : "picture-slides-stop-slideshow",
  192. thumbnailContainerClass: "picture-slides-thumbnails",
  193. dimBackgroundOverlayClass : "picture-slides-dim-overlay"
  194. });
  195. </script>
  196. </head>
  197.  
  198. <body>
  199.  
  200. <div id="content">
  201. <div id="top">
  202. <div id="top_ban">
  203.  
  204. <h1>S I D H O N L I N E P H O T O G R A P H Y</h1>
  205.  
  206. </div>
  207. </div>
  208. <div id="menu">
  209. <ul>
  210.  
  211.  
  212.  
  213. <li><a href="/index.html" title="Home">Home</a></li>
  214. <li><a href="/en/biography.html" title="Biography">Biography</a></li>
  215. <li><a href="/en/gallery.html" title="Gallery">Gallery</a></li>
  216. <li><a href="/en/contact.html" title="Contact me">Contact</a></li>
  217.  
  218. </ul>
  219. </div>
  220. <div class="picture-slides-container">
  221. <div id="left_gallery">
  222.  
  223. <ul class="picture-slides-thumbnails">
  224.  
  225. <li><a href="/images/00.jpg"><img src="/thumbnails/00.jpg" alt="" /></a></li>
  226. <li><a href="/images/01.jpg"><img src="/thumbnails/01.jpg" alt="" /></a></li>
  227. <li><a href="/images/02.jpg"><img src="/thumbnails/02.jpg" alt="" /></a></li>
  228. <li><a href="/images/03.jpg"><img src="/thumbnails/03.jpg" alt="" /></a></li>
  229. <li><a href="/images/04.jpg"><img src="/thumbnails/04.jpg" alt="" /></a></li>
  230. <li><a href="/images/05.jpg"><img src="/thumbnails/05.jpg" alt="" /></a></li>
  231. <li><a href="/images/06.jpg"><img src="/thumbnails/06.jpg" alt="" /></a></li>
  232. <li><a href="/images/07.jpg"><img src="/thumbnails/07.jpg" alt="" /></a></li>
  233. <li><a href="/images/08.jpg"><img src="/thumbnails/08.jpg" alt="" /></a></li>
  234. <li><a href="/images/09.jpg"><img src="/thumbnails/09.jpg" alt="" /></a></li>
  235. <li><a href="/images/10.jpg"><img src="/thumbnails/10.jpg" alt="" /></a></li>
  236. <li><a href="/images/11.jpg"><img src="/thumbnails/11.jpg" alt="" /></a></li>
  237. <li><a href="/images/12.jpg"><img src="/thumbnails/12.jpg" alt="" /></a></li>
  238. <li><a href="/images/13.jpg"><img src="/thumbnails/13.jpg" alt="" /></a></li>
  239. <li><a href="/images/14.jpg"><img src="/thumbnails/14.jpg" alt="" /></a></li>
  240. <li><a href="/images/15.jpg"><img src="/thumbnails/15.jpg" alt="" /></a></li>
  241. <li><a href="/images/16.jpg"><img src="/thumbnails/16.jpg" alt="" /></a></li>
  242. <li><a href="/images/17.jpg"><img src="/thumbnails/17.jpg" alt="" /></a></li>
  243. <li><a href="/images/18.jpg"><img src="/thumbnails/18.jpg" alt="" /></a></li>
  244. <li><a href="/images/19.jpg"><img src="/thumbnails/19.jpg" alt="" /></a></li>
  245. <li><a href="/images/20.jpg"><img src="/thumbnails/20.jpg" alt="" /></a></li>
  246. <li><a href="/images/21.jpg"><img src="/thumbnails/21.jpg" alt="" /></a></li>
  247. <li><a href="/images/22.jpg"><img src="/thumbnails/22.jpg" alt="" /></a></li>
  248. <li><a href="/images/23.jpg"><img src="/thumbnails/23.jpg" alt="" /></a></li>
  249. <li><a href="/images/24.jpg"><img src="/thumbnails/24.jpg" alt="" /></a></li>
  250. <li><a href="/images/25.jpg"><img src="/thumbnails/25.jpg" alt="" /></a></li>
  251. <li><a href="/images/26.jpg"><img src="/thumbnails/26.jpg" alt="" /></a></li>
  252. </ul>
  253.  
  254.  
  255. </div>
  256.  
  257. <div id="line">
  258. </div>
  259.  
  260. <div id="page">
  261.  
  262.  
  263.  
  264.  
  265. <div id="container">
  266.  
  267. <div class="picture-slides-fade-container">
  268. <a class="picture-slides-image-link">
  269. <span class="picture-slides-image-load-fail">Le chargement de la photo a échoué:</span>
  270. <img class="picture-slides-image" src="/images/00.jpg" alt="Enlighten knowledge" />
  271. </a>
  272. </div>
  273.  
  274. <div class="picture-slides-image-text"><a class="picture-slides-image-link">Enlighten knowledge</a></div>
  275.  
  276. <div class="navigation-controls">
  277. <a href="index.html" class="picture-slides-previous-image">Back</a>
  278. <span class="picture-slides-image-counter"></span>
  279. <a href="index.html" class="picture-slides-next-image">Next</a>
  280. -
  281. <a href="index.html" class="picture-slides-start-slideshow">Start slideshow</a>
  282. <a href="index.html" class="picture-slides-stop-slideshow">Stop slideshow</a>
  283. </div>
  284.  
  285. </div>
  286. </div>
  287.  
  288. <div class="picture-slides-dim-overlay"></div>
  289. <br/>
  290. <br/>
  291.  
  292.  
  293.  
  294. </div>
  295.  
  296. <div id="footer">
  297.  
  298. <div id="line2">
  299. </div>
  300.  
  301.  
  302. The work contained in my gallery is <a href="<a href="http://www.whatiscopyright.org/" rel="nofollow" target="_blank">http://www.whatiscopyright.org/</a>">Copyright</a> ©2006-2010 Sophie Cagnac.
  303. All rights reserved. My work may not be reproduced, copied, edited, published, transmitted or uploaded in any way without my written permission. My work does not belong to the public domain.
  304.  
  305.  
  306. </div>
  307.  
  308. </div>
  309. </body>
  310. </html>
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Est-ce que tu as essayé de faire ce que je t'ai dit ?
Parce que la gallerie modifie automatiquement les données... il n'a besoin que d'un seul élément, et après se débrouille avec
  • Commenter cette réponse |
Score
0
òh
òi
|
Oui, mais dans ce cas, ça ne modifiera que la toute première image. Je ne peux pas faire de même avec les photos suivantes de la galerie.
C'est ce que je ne comprends pas, je ne peux pas placer le code pour les autres photos dans les div sans altérer les liens. Je suis obligée de placer les photos dans la balise <head> et là, je n'ai pas la possibilité de lier un texte.
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
C'est ce que je te disais, tu as juste besoin de remplacer une ligne de code HTML:
Dans ton cas cette ligne (ligne 274 dans ce que tu as donné) :
  1. <div class="picture-slides-image-text">Enlighten knowledge</div>

Tu la remplaces par
  1. <div class="picture-slides-image-text"><a class="picture-slides-image-link">Enlighten knowledge</a></div>


Et c'est tout.
  • Commenter cette réponse |
Score
0
òh
òi
|
Oui, c'est bien ça.
Mon problème c'est que la liste des images disponible dans la galerie n'est que dans la partie <head>. Dans le corps, il n'y a que la première image. Je n'ai pas réussi à comprendre comment fonctionnait ce code, du coup je n'arrive pas à trouver la solution. Je te passe le code complet pour que tu comprennes mieux.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
  3. <html xmlns="<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>" lang="en" xml:lang="en">
  4. <head>
  5.  
  6. <link rel="icon" type="image/png" href="/favicon.png"/>
  7.  
  8. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <link href="css.css" rel="stylesheet" type="text/css" />
  11.  
  12. <title>Photo gallery</title>
  13.  
  14. <script type="text/javascript" src="/js/jquery.min.js"></script>
  15. <script type="text/javascript" src="/js/PictureSlides-jquery-2.0.js"></script>
  16. <script type="text/javascript">
  17. jQuery.PictureSlides.set({
  18. // Switches to decide what features to use
  19. useFadingIn : true,
  20. useFadingOut : true,
  21. useFadeWhenNotSlideshow : true,
  22. useFadeForSlideshow : true,
  23. useDimBackgroundForSlideshow : true,
  24. loopSlideshow : false,
  25. usePreloading : true,
  26. useAltAsTooltip : true,
  27. useTextAsTooltip : false,
  28.  
  29. // Fading settings
  30. fadeTime : 500, // Milliseconds
  31. timeForSlideInSlideshow : 3000, // Milliseconds
  32.  
  33. // At page load
  34. startIndex : 1,
  35. startSlideShowFromBeginning : true,
  36. startSlideshowAtLoad : false,
  37. dimBackgroundAtLoad : false,
  38.  
  39. // Large images to use and thumbnail settings
  40. images : [
  41. {
  42. image : "/images/00.jpg",
  43. alt : "Enlighten knowledge",
  44. text : "Enlighten knowledge. High school Clément Marot - Cahors"
  45. },
  46. {
  47. image : "/images/01.jpg",
  48. alt : "Macro Music",
  49. text : "Macro Music"
  50. },
  51. {
  52. image : "/images/02.jpg",
  53. alt : "Dust on the Playground",
  54. text : "Dust on the Playground"
  55. },
  56. {
  57. image : "/images/03.jpg",
  58. alt : "Show goes on",
  59. text : "Show goes on - Gwen Is Naked",
  60. url : "<a href="http://www.myspace.com/gwenisnaked" rel="nofollow" target="_blank">http://www.myspace.com/gwenisnaked</a>"
  61. },
  62. {
  63. image : "/images/04.jpg",
  64. alt : "Alors Danse",
  65. text : "Alors Danse - Model: Adeline B."
  66. },
  67. {
  68. image : "/images/05.jpg",
  69. alt : "Crimson",
  70. text : "Crimson"
  71. },
  72. {
  73. image : "/images/06.jpg",
  74. alt : "Never forget to dream",
  75. text : "Never forget to dream"
  76. },
  77. {
  78. image : "/images/07.jpg",
  79. alt : "Douceur Nature n°15",
  80. text : "Douceur Nature n°15"
  81. },
  82. {
  83. image : "/images/08.jpg",
  84. alt : "Douceur Nature n°06",
  85. text : "Douceur Nature n°06"
  86. },
  87. {
  88. image : "/images/09.jpg",
  89. alt : "Hope",
  90. text : "Hope"
  91. },
  92. {
  93. image : "/images/10.jpg",
  94. alt : "Douceur Nature n°08",
  95. text : "Douceur Nature n°08"
  96. },
  97. {
  98. image : "/images/11.jpg",
  99. alt : "Douceur Nature n°03",
  100. text : "Douceur Nature n°03"
  101. },
  102. {
  103. image : "/images/12.jpg",
  104. alt : "Douceur Nature n°10",
  105. text : "Douceur Nature n°10"
  106. },
  107. {
  108. image : "/images/13.jpg",
  109. alt : "Fairyland",
  110. text : "Fairyland"
  111. },
  112. {
  113. image : "/images/14.jpg",
  114. alt : "Do you remember?",
  115. text : "Do you remember?"
  116. },
  117. {
  118. image : "/images/15.jpg",
  119. alt : "Under the Bridge",
  120. text : "Under the Bridge - Pont Valentré, Cahors"
  121. },
  122. {
  123. image : "/images/16.jpg",
  124. alt : "Watch me",
  125. text : "Watch me - St Etienne Cathedral, Cahors"
  126. },
  127. {
  128. image : "/images/17.jpg",
  129. alt : "Dare enter",
  130. text : "Dare enter - St Etienne Cathedral, Cahors"
  131. },
  132. {
  133. image : "/images/18.jpg",
  134. alt : "Alone in light",
  135. text : "Alone in light"
  136. },
  137. {
  138. image : "/images/19.jpg",
  139. alt : "The Bird(s)",
  140. text : "Don't they ever stop migrating? - Alfred Hitchcock - The Birds. Perched on the top of trees they are safe, we are not."
  141. },
  142. {
  143. image : "/images/20.jpg",
  144. alt : "Friends?",
  145. text : "Friends?"
  146. },
  147. {
  148. image : "/images/21.jpg",
  149. alt : "Songe",
  150. text : "Songe"
  151. },
  152. {
  153. image : "/images/22.jpg",
  154. alt : "IR",
  155. text : "IR"
  156. },
  157. {
  158. image : "/images/23.jpg",
  159. alt : "Twilight",
  160. text : "Twilight"
  161. },
  162. {
  163. image : "/images/24.jpg",
  164. alt : "Let the sun shine",
  165. text : "Let the sun shine"
  166. },
  167. {
  168. image : "/images/25.jpg",
  169. alt : "- Vision -",
  170. text : "- Vision -"
  171. },
  172. {
  173. image : "/images/26.jpg",
  174. alt : "Capture",
  175. text : "Capture"
  176. },
  177.  
  178. ],
  179. thumbnailActivationEvent : "click",
  180.  
  181. // Classes of HTML elements to use
  182. mainImageClass : "picture-slides-image", // Mandatory
  183. mainImageFailedToLoadClass : "picture-slides-image-load-fail",
  184. imageLinkClass : "picture-slides-image-link",
  185. fadeContainerClass : "picture-slides-fade-container",
  186. imageTextContainerClass : "picture-slides-image-text",
  187. previousLinkClass : "picture-slides-previous-image",
  188. nextLinkClass : "picture-slides-next-image",
  189. imageCounterClass : "picture-slides-image-counter",
  190. startSlideShowClass : "picture-slides-start-slideshow",
  191. stopSlideShowClass : "picture-slides-stop-slideshow",
  192. thumbnailContainerClass: "picture-slides-thumbnails",
  193. dimBackgroundOverlayClass : "picture-slides-dim-overlay"
  194. });
  195. </script>
  196. </head>
  197.  
  198. <body>
  199.  
  200. <div id="content">
  201. <div id="top">
  202. <div id="top_ban">
  203.  
  204. <h1>S I D H O N L I N E P H O T O G R A P H Y</h1>
  205.  
  206. </div>
  207. </div>
  208. <div id="menu">
  209. <ul>
  210.  
  211.  
  212.  
  213. <li><a href="/index.html" title="Home">Home</a></li>
  214. <li><a href="/en/biography.html" title="Biography">Biography</a></li>
  215. <li><a href="/en/gallery.html" title="Gallery">Gallery</a></li>
  216. <li><a href="/en/contact.html" title="Contact me">Contact</a></li>
  217.  
  218. </ul>
  219. </div>
  220. <div class="picture-slides-container">
  221. <div id="left_gallery">
  222.  
  223. <ul class="picture-slides-thumbnails">
  224.  
  225. <li><a href="/images/00.jpg"><img src="/thumbnails/00.jpg" alt="" /></a></li>
  226. <li><a href="/images/01.jpg"><img src="/thumbnails/01.jpg" alt="" /></a></li>
  227. <li><a href="/images/02.jpg"><img src="/thumbnails/02.jpg" alt="" /></a></li>
  228. <li><a href="/images/03.jpg"><img src="/thumbnails/03.jpg" alt="" /></a></li>
  229. <li><a href="/images/04.jpg"><img src="/thumbnails/04.jpg" alt="" /></a></li>
  230. <li><a href="/images/05.jpg"><img src="/thumbnails/05.jpg" alt="" /></a></li>
  231. <li><a href="/images/06.jpg"><img src="/thumbnails/06.jpg" alt="" /></a></li>
  232. <li><a href="/images/07.jpg"><img src="/thumbnails/07.jpg" alt="" /></a></li>
  233. <li><a href="/images/08.jpg"><img src="/thumbnails/08.jpg" alt="" /></a></li>
  234. <li><a href="/images/09.jpg"><img src="/thumbnails/09.jpg" alt="" /></a></li>
  235. <li><a href="/images/10.jpg"><img src="/thumbnails/10.jpg" alt="" /></a></li>
  236. <li><a href="/images/11.jpg"><img src="/thumbnails/11.jpg" alt="" /></a></li>
  237. <li><a href="/images/12.jpg"><img src="/thumbnails/12.jpg" alt="" /></a></li>
  238. <li><a href="/images/13.jpg"><img src="/thumbnails/13.jpg" alt="" /></a></li>
  239. <li><a href="/images/14.jpg"><img src="/thumbnails/14.jpg" alt="" /></a></li>
  240. <li><a href="/images/15.jpg"><img src="/thumbnails/15.jpg" alt="" /></a></li>
  241. <li><a href="/images/16.jpg"><img src="/thumbnails/16.jpg" alt="" /></a></li>
  242. <li><a href="/images/17.jpg"><img src="/thumbnails/17.jpg" alt="" /></a></li>
  243. <li><a href="/images/18.jpg"><img src="/thumbnails/18.jpg" alt="" /></a></li>
  244. <li><a href="/images/19.jpg"><img src="/thumbnails/19.jpg" alt="" /></a></li>
  245. <li><a href="/images/20.jpg"><img src="/thumbnails/20.jpg" alt="" /></a></li>
  246. <li><a href="/images/21.jpg"><img src="/thumbnails/21.jpg" alt="" /></a></li>
  247. <li><a href="/images/22.jpg"><img src="/thumbnails/22.jpg" alt="" /></a></li>
  248. <li><a href="/images/23.jpg"><img src="/thumbnails/23.jpg" alt="" /></a></li>
  249. <li><a href="/images/24.jpg"><img src="/thumbnails/24.jpg" alt="" /></a></li>
  250. <li><a href="/images/25.jpg"><img src="/thumbnails/25.jpg" alt="" /></a></li>
  251. <li><a href="/images/26.jpg"><img src="/thumbnails/26.jpg" alt="" /></a></li>
  252. </ul>
  253.  
  254.  
  255. </div>
  256.  
  257. <div id="line">
  258. </div>
  259.  
  260. <div id="page">
  261.  
  262.  
  263.  
  264.  
  265. <div id="container">
  266.  
  267. <div class="picture-slides-fade-container">
  268. <a class="picture-slides-image-link">
  269. <span class="picture-slides-image-load-fail">Le chargement de la photo a échoué:</span>
  270. <img class="picture-slides-image" src="/images/00.jpg" alt="Enlighten knowledge" />
  271. </a>
  272. </div>
  273.  
  274. <div class="picture-slides-image-text">Enlighten knowledge</div>
  275.  
  276. <div class="navigation-controls">
  277. <a href="index.html" class="picture-slides-previous-image">Back</a>
  278. <span class="picture-slides-image-counter"></span>
  279. <a href="index.html" class="picture-slides-next-image">Next</a>
  280. -
  281. <a href="index.html" class="picture-slides-start-slideshow">Start slideshow</a>
  282. <a href="index.html" class="picture-slides-stop-slideshow">Stop slideshow</a>
  283. </div>
  284.  
  285. </div>
  286. </div>
  287.  
  288. <div class="picture-slides-dim-overlay"></div>
  289. <br/>
  290. <br/>
  291.  
  292.  
  293.  
  294. </div>
  295.  
  296. <div id="footer">
  297.  
  298. <div id="line2">
  299. </div>
  300.  
  301.  
  302. The work contained in my gallery is <a href="<a href="http://www.whatiscopyright.org/" rel="nofollow" target="_blank">http://www.whatiscopyright.org/</a>">Copyright</a> ©2006-2010 Sophie Cagnac.
  303. All rights reserved. My work may not be reproduced, copied, edited, published, transmitted or uploaded in any way without my written permission. My work does not belong to the public domain.
  304.  
  305.  
  306. </div>
  307.  
  308. </div>
  309. </body>
  310. </html>

  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Tu n'as pas du bien comprendre ce que je t'ai dit, ou sinon j'ai pas compris ce que tu veux.

Si j'ai bien compris ce que tu veux, tu veux qu'il y ait un lien quand tu cliques sur "Show goes on - Gwen Is Naked - Click to visit their MySpace", ça t'ouvre le myspace. Actuellement, il n'y a qu'un lien que sur l'image, c'est bien ça ?
  • Commenter cette réponse |
Score
0
òh
òi
|
Merci pour ta réponse.
J'ai déjà essayé de modifier la partie HTML mais ça ne donne pas le résultat escompté.

Le code HTML donne ça :

  1. <div id="container">
  2.  
  3. <div class="picture-slides-fade-container">
  4. <a class="picture-slides-image-link">
  5. <span class="picture-slides-image-load-fail">Le chargement de la photo a échoué:</span>
  6. <img class="picture-slides-image" src="/images/00.jpg" alt="Enlighten knowledge" />
  7. </a>
  8. </div>
  9.  
  10. <div class="picture-slides-image-text">Enlighten knowledge</div>
  11.  
  12. <div class="navigation-controls">
  13. <a href="index.html" class="picture-slides-previous-image">Back</a>
  14. <span class="picture-slides-image-counter"></span>
  15. <a href="index.html" class="picture-slides-next-image">Next</a>
  16. -
  17. <a href="index.html" class="picture-slides-start-slideshow">Start slideshow</a>
  18. <a href="index.html" class="picture-slides-stop-slideshow">Stop slideshow</a>
  19. </div>
  20.  
  21. </div>
  22. </div>
  23.  
  24. <div class="picture-slides-dim-overlay"></div>
  25. <br/>
  26. <br/>
  27.  
  28.  
  29.  
  30. </div>


L'image présente dans la partie HTML du code est la première image qui apparaît en ouvrant la page. J'ai essayé d'ajouter des div identiques à la suite, mais ça ne fait qu'ajouter les photos les unes sous les autres et ça casse les liens du thumbs vers les images.

ça c'est le rendu que j'ai pour l'instant.
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Salut,

A mon avis c'est plutôt dans le code HTML que tu dois modifier quelque chose.
Tu dois avoir quelque chose qui ressemble à ça actuellement :
  1. <div class="picture-slides-container">
  2. <div class="picture-slides-fade-container">
  3. <a class="picture-slides-image-link"><img class="picture-slides-image" src="pictures/1.jpg" alt="This is picture 1" /></a>
  4. </div>
  5.  
  6. <div class="picture-slides-image-text">This is picture 1</div>
  7.  
  8. <div class="navigation-controls">
  9. <span class="picture-slides-previous-image">Previous</span>
  10. <span class="picture-slides-image-counter"></span>
  11. <span class="picture-slides-next-image">Next</span>
  12.  
  13. <span class="picture-slides-start-slideshow">Start slideshow</span>
  14. <span class="picture-slides-stop-slideshow">Stop slideshow</span>
  15. </div>
  16. ...


Si tu remplaces la ligne 6 par :
  1. <div class="picture-slides-image-text"><a class="picture-slides-image-link">This is picture 1</a></div>


Ca devrait le faire j'imagine
  • 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