Script lightbox et slideshow en conflit

Script lightbox et slideshow en conflit - HTML/CSS - Programmation

Marsh Posté le 19-07-2011 à 04:09:09    

Bonjour,
 
Je cherche à créer mon premier site, mais j'ai aucune notion en programmation. En récupérant un kit, cherchant des infos sur le net et en utilisant kompoZer, ça avait l'air prometteur.  
Mais j'ai un problème avec les script jquery et prototype/scriptaculous que j'arrive pas à résoudre.  
Quand je rentre les script prototype et scriptaculous pour la lightbox, le script jquery du slideshow (je crois que c'est le nom: c'est une zone ou les images sont en diaporama a mon que l'on clic sur l'un des miniatures; dans ce cas la elle s'affiche) ne marche plus.  
Un message "loading..." apparait et les photos s'affichent toutes les unes a la suite des autres.
Capture d'ecrans:
http://imageshack.us/f/819/scriptym.jpg/
 
J'arrive pas a avoir les 2 qui marchent. C'est soit l'un, soit l'autre.

Code :
  1. <head>
  2.   <title></title>
  3.   <meta http-equiv="Content-Type"
  4. content="text/html; charset=iso-8859-1" />
  5.   <meta http-equiv="content-language" content="fr" />
  6.   <link href="style.css" title="Défaut"
  7. rel="stylesheet" type="text/css" media="screen" />
  8.   <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
  9.   <script type="text/javascript"
  10. src="js/jquery-easing-1.3.pack.js"></script>
  11.   <script type="text/javascript"
  12. src="js/jquery-easing-compatibility.1.2.pack.js"></script>
  13.   <script type="text/javascript"
  14. src="js/coda-slider.1.1.1.pack.js"></script>
  15.   <script type="text/javascript" src="js/js.js"></script><!--[if lt IE 10]> <style> .cadre {behavior: url(js/PIE.php);} </style> <![endif]-->
  16.   <link rel="stylesheet" href="css/lightbox.css"
  17. type="text/css" media="screen" />
  18.   <script type="text/javascript" src="js/prototype.js"></script>
  19.   <script type="text/javascript"
  20. src="js/scriptaculous.js?load=effects,builder"></script>
  21.   <script type="text/javascript" src="js/lightbox.js"></script>
  22. </head>


Merci.  
Et désolé d'être un boulet.


Message édité par solo1861 le 19-07-2011 à 23:15:47
Reply

Marsh Posté le 19-07-2011 à 04:09:09   

Reply

Marsh Posté le 20-07-2011 à 11:14:21    

Bonsoir,
J'ai essayé toute la soirée, mais quoi que je change seul l'un des 2 fonctionne. :pt1cable:
J'ai essayé d'insérer  var $j = jQuery.noConflict();  mais je ne voit pas de $ dans le code. Du coup ça m'aide pas vraiment
 

Code :
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><title></title>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <meta http-equiv="content-language" content="fr" />
  5. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  6. <script type="text/javascript" src="js/prototype.js"></script>
  7. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  8. <script type="text/javascript" src="js/lightbox.js"></script>
  9. <link href="style.css" title="Défaut" rel="stylesheet" type="text/css" media="screen" />
  10. <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
  11. <script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
  12. <script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
  13. <script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
  14. <script type="text/javascript" src="js/js.js"></script><!--[if lt IE 10]> <style> .cadre {behavior: url(js/PIE.php);} </style> <![endif]-->
  15. <script type="text/javascript">
  16.     var $j = jQuery.noConflict();
  17. </script>
  18. </head>
  19. <body>
  20. <div id="conteneur"><!-- *************************************** HEADER **************************************** -->
  21. <div id="header">
  22. <div id="header_haut"> <a href=""><img src="images/souscrire.png" alt="" height="17" width="100" /></a> </div>
  23. <ul id="menu_header">
  24. <li id="ici"><a href="index.html" title="">Acceuil</a></li>
  25. <li><a href="#" title="">Couché
  26. de soleil</a></li>
  27. <li><a href="Nuit.html" title="">Nuit</a></li>
  28. <li><a href="Urbain.html" title="">Urbain</a></li>
  29. <li><a title="" href="#">Portrait</a></li>
  30. <li><a href="#" title="">Paysage</a></li>
  31. <li><a href="#" title="">Nature</a></li>
  32. <li><a href="#" title="">Inclassable</a></li>
  33. <li><a href="Liens.html" title="">Liens</a></li>
  34. </ul>
  35. </div>
  36. <!-- *************************************** HEADER **************************************** -->
  37. <!-- *************************************** CONTENU **************************************** -->
  38. <div id="contenu">
  39. <div style="width: 728px;" id="cadre">
  40. <div class="cadre">Couché de soleil </div>
  41. <br />
  42. <br />
  43. <br />
  44. <a href="photo%20sunset/sunset1.jpg" rel="lightbox[sunset]"><img src="photo%20sunset/sunset1-small.jpg" /></a>
  45. &nbsp;<a href="photo%20sunset/sunset2.jpg" rel="lightbox[sunset]"><img src="photo%20sunset/sunset2-small.jpg" /></a>
  46. &nbsp;<a href="photo%20sunset/sunset3.jpg" rel="lightbox[sunset]"><img src="photo%20sunset/sunset3-small.jpg" /></a>
  47. &nbsp;<a href="photo%20sunset/sunset4.jpg" rel="lightbox[sunset]"><img src="photo%20sunset/sunset4-small.jpg" /></a><br />
  48. <br />
  49. <br />
  50. <br />
  51. <br />
  52. <a href="photo%20sunset/sunset5.jpg" rel="lightbox[sunset]"><img src="photo%20sunset/sunset5-small.jpg" /></a>
  53. <br />
  54. <br />
  55. <br />
  56. <br />
  57. <br />
  58. <br />
  59. <br />
  60. <br />
  61. </div>
  62. <br />
  63. <!-- ****************** SLIDE ********************* -->
  64. <div id="contenu_couleur">
  65. <div id="page-wrap">
  66. <div class="slider-wrap">
  67. <div id="main-photo-slider" class="csw">
  68. <div class="panelContainer"><!-- ************* IMG 1 **************** -->
  69. <div class="panel" title="Panel 1">
  70. <div class="wrapper"> <img src="img_slide/photo-1.jpg" alt="temp" />
  71. <div class="photo-meta-data">Section: Portrait<span></span>
  72. </div>
  73. </div>
  74. </div>
  75. <!-- ************* IMG 1 **************** -->
  76. <!-- ************* IMG 2 **************** -->
  77. <div class="panel" title="Panel 2">
  78. <div class="wrapper"> <img src="img_slide/photo-2.jpg" alt="temp" />
  79. <div class="photo-meta-data">Section: <a href="CoucheDeSoleil.html">Couché de soleil</a><span><br />
  80. </span><span></span> </div>
  81. </div>
  82. </div>
  83. <!-- ************* IMG 2 **************** --><!-- ************* IMG 3 **************** -->
  84. <div class="panel" title="Panel 3">
  85. <div class="wrapper"> <img src="img_slide/photo-3.jpg" alt="temp" />
  86. <div class="photo-meta-data">Section: <a href="Nuit.html">Nuit</a><span></span> </div>
  87. </div>
  88. </div>
  89. <!-- ************* IMG 3 **************** --><!-- ************* IMG 4 **************** -->
  90. <div class="panel" title="Panel 4">
  91. <div class="wrapper"> <img src="img_slide/photo-4.jpg" alt="temp" />
  92. <div class="photo-meta-data">Section: <a href="Urbain.html">Urbain</a><span></span>
  93. </div>
  94. </div>
  95. </div>
  96. <!-- ************* IMG 4 **************** --> </div>
  97. </div>
  98. </div>
  99. <div id="movers-row">
  100. <div> <a href="#1" class="cross-link"><img src="img_slide/photo-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a><!-- ************* Petite IMG 1 **************** --><a href="#2" class="cross-link"><img src="img_slide/photo-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a><!-- ************* Petite IMG 2 **************** --></div>
  101. <div> <a href="#3" class="cross-link"><img src="img_slide/photo-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a><!-- ************* Petite IMG 3 **************** -->
  102. <a href="#4" class="cross-link"><img src="img_slide/photo-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a><!-- ************* Petite IMG 4 **************** --></div>
  103. </div>
  104. </div>
  105. </div>
  106. <!-- ****************** SLIDE ********************* --> </div>
  107. <!-- *************************************** CONTENU **************************************** -->
  108. <!-- ***************************************** PIED ****************************************** -->
  109. <div id="pied"></div>


 
Si quelqu'un à une solution...
 
Merci

Reply

Marsh Posté le 20-07-2011 à 14:29:28    

Essaye un autre script que lightbox, il y en a pleins. Colorbox est pas mal.
 
Mélanger jquery et prototype c'est pas forcement la meilleure idée en terme de compatibilité ;)

Reply

Marsh Posté le 21-07-2011 à 08:23:28    

Colorbox. ok. Je vais essayer.
Merci.

Reply

Sujets relatifs:

Leave a Replay

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