Se connecter / S'enregistrer
Votre question

Lightbox sur aera shape

Tags :
  • Lightbox
  • Programmation
Dernière réponse : dans Programmation
11 Mars 2010 16:19:50

Bonjour à tous,

Je suis confronté à un petit problème lors de la réalisation de mon site/portfolio.

en gros, j'aimerais utiliser lightbox pour l'affichage de ma galerie d'images, je l'avais fais sans problèmes sur mon site précédent, (la j'avais un tableau avec des miniatures à l'intérieur qui servaient de lien vers les images)
mais cette fois ci j'utilise des "aera shape" , des zones cliquable sur l'écran tout simplement, qui servent de liens vers mes images.

Impossible de faire fonctionner lightbox, lorsque je click sur la zone, l'écran s'assombrit mais l'image ne s'ouvre pas (sans lightbox l'image apparait dans un nouvel onglet)

étant spécialisé dans la 3D et non dans le web, je bloque la, voici mon code, l'un de vous saurait il m'aider ? Merci .


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Graphline - portfolio - 3D gallery</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="keywords" content="3d , 3ds max , 3d max , modélisation , illustrator , photoshop , sony vegas , sound forge , dessin , sculpture , photos , photo"/>
  7. <meta name="description" content="illustrator - 2D"/>
  8. <meta name="Creation_Date" content="mars 2010"/>
  9. <meta name="robots" content="index, follow, all"/>
  10. <meta name="identifier-url" content="www.Graphline.be"/>
  11. <meta name="revisit-after" content="5 days"/>
  12. <meta name="author" content="Grégoire Arnaud"/>
  13. <meta name="rating" content="general"/>
  14.  
  15. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  16. <script type="text/javascript" src="js/prototype.js"></script>
  17. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  18. <script type="text/javascript" src="js/lightbox.js"></script>
  19.  
  20. <script language="JavaScript">
  21. <!--
  22. function MM_findObj(n, d) { //v4.01
  23. var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  24. d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  25. if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  26. for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  27. if(!x && d.getElementById) x=d.getElementById(n); return x;
  28. }
  29. function MM_swapImage() { //v3.0
  30. var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  31. if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  32. }
  33. function MM_swapImgRestore() { //v3.0
  34. var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  35. }
  36.  
  37. function MM_preloadImages() { //v3.0
  38. var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  39. var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  40. if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  41. }
  42.  
  43. //-->
  44. </script>
  45. </head>
  46. <body bgcolor="#50637A" onLoad="MM_preloadImages('portfolio_r2_c1_f2.jpg','portfolio_r2_c2_f2.jpg','portfolio_r2_c3_f2.jpg','portfolio_r2_c4_f2.jpg');">
  47. <table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">
  48. <!-- fwtable fwsrc="BASE.png" fwbase="portfolio.jpg" fwstyle="Dreamweaver" fwdocid = "1963897273" fwnested="0" -->
  49. <tr>
  50. <td><img src="spacer.gif" width="166" height="1" border="0" alt=""></td>
  51. <td><img src="spacer.gif" width="167" height="1" border="0" alt=""></td>
  52. <td><img src="spacer.gif" width="112" height="1" border="0" alt=""></td>
  53. <td><img src="spacer.gif" width="166" height="1" border="0" alt=""></td>
  54. <td><img src="spacer.gif" width="413" height="1" border="0" alt=""></td>
  55. <td><img src="spacer.gif" width="1" height="1" border="0" alt=""></td>
  56. </tr>
  57.  
  58. <tr>
  59. <td colspan="5"><img name="portfolio_r1_c1" src="portfolio_r1_c1.jpg" width="1024" height="145" border="0" alt=""></td>
  60. <td><img src="spacer.gif" width="1" height="145" border="0" alt=""></td>
  61. </tr>
  62. <tr>
  63. <td><a href="index.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('portfolio_r2_c1','','portfolio_r2_c1_f2.jpg',1);"><img name="portfolio_r2_c1" src="portfolio_r2_c1.jpg" width="166" height="44" border="0" alt=""></a></td>
  64. <td><a href="portfolio.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('portfolio_r2_c2','','portfolio_r2_c2_f2.jpg',1);"><img name="portfolio_r2_c2" src="portfolio_r2_c2.jpg" width="167" height="44" border="0" alt=""></a></td>
  65. <td><a href="cv.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('portfolio_r2_c3','','portfolio_r2_c3_f2.jpg',1);"><img name="portfolio_r2_c3" src="portfolio_r2_c3.jpg" width="112" height="44" border="0" alt=""></a></td>
  66. <td><a href="contact.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('portfolio_r2_c4','','portfolio_r2_c4_f2.jpg',1);"><img name="portfolio_r2_c4" src="portfolio_r2_c4.jpg" width="166" height="44" border="0" alt=""></a></td>
  67. <td rowspan="2"><img src="3dgallerydroite.jpg" width="413" height="755" border="0" usemap="#Map2"></td>
  68. <td><img src="spacer.gif" width="1" height="44" border="0" alt=""></td>
  69. </tr>
  70. <tr>
  71. <td colspan="4"><img src="3dgallery-gauche.jpg" width="611" height="711" border="0" usemap="#Map"></td>
  72. <td><img src="spacer.gif" width="1" height="711" border="0" alt=""></td>
  73. </tr>
  74. </table>
  75.  
  76. <map name="Map">
  77. <area shape="rect" coords="478,676,535,700" href="portfolio.html">
  78. <area shape="rect" coords="56,103,112,264" href="3D Gallery/perso_TFA.jpg" rel="lightbox" alt="tfa">
  79. <area shape="rect" coords="159,101,217,264" href="3D Gallery/maison.jpg">
  80. <area shape="rect" coords="264,101,322,264" href="3D Gallery/peppertbot.jpg">
  81. <area shape="rect" coords="368,101,425,264" href="3D Gallery/Seau.jpg">
  82. <area shape="rect" coords="473,102,530,265" href="3D Gallery/Perso_Le Souffle.jpg">
  83. <area shape="rect" coords="577,102,655,264" href="3D Gallery/Le Puit.jpg">
  84. </map>
  85. <map name="Map2"><area shape="rect" coords="-2,146,24,309" href="3D Gallery/Le Puit.jpg">
  86. </map></body>
  87. </html>

Autres pages sur : lightbox aera shape

a c 232 L Programmation
11 Mars 2010 21:29:44

Salut,

Quelle lightbox utilises-tu ?
Je ne suis pas sûr qu'ils gèrent les area...
m
0
l
12 Mars 2010 08:28:31

Salut OmaR,

J'utilise la dernière version, c'est à dire la 2.04.
avant de poster je me suis renseigner sur plusieurs forum biensure, et j'ai lu plusieurs personnes qui faisaient fonctionner lightbox sur des aera donc je suis presque sûr que c'est possible ;) 
m
0
l
a c 232 L Programmation
12 Mars 2010 09:09:59

narco8, vu qu'il y a énormément de lightbox disponibles, est-ce que tu pourrais dire exactement laquelle tu utilises ? De quel site elle vient ?
m
0
l
12 Mars 2010 11:25:23

Je viens de résoudre mon problème,

Il fallait rajouter une commande à la ligne de code du lien vers les image :

<area shape="rect" coords="55,103,111,264" href="3D Gallery/perso_TFA.jpg" alt="push for service!" rel="lightbox" title="Perso" />

Au cas ou ca pourra servir à quelqu'un ;) 
m
0
l
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