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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Script lightbox et slideshow en conflit

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Script lightbox et slideshow en conflit

n°2090083
solo1861
Posté le 19-07-2011 à 04:09:09  profilanswer
 

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
mood
Publicité
Posté le 19-07-2011 à 04:09:09  profilanswer
 

n°2090324
solo1861
Posté le 20-07-2011 à 11:14:21  profilanswer
 

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

n°2090387
egege
Posté le 20-07-2011 à 14:29:28  profilanswer
 

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

n°2090534
solo1861
Posté le 21-07-2011 à 08:23:28  profilanswer
 

Colorbox. ok. Je vais essayer.
Merci.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Script lightbox et slideshow en conflit

 

Sujets relatifs
[Résolu] Conflit de class en cssafficher donné DB dans script php
Problème script d'ouverture de sessionExécuter un script dans un formulaire
Barre de recherche google dans un site SCRIPTscript générateur de sommaire
Script d'ouverture de session windows 2000 server !!! HELP !Script pour téléchargement automatique
script shell classnotfoundexception avec le classpath definiCreer un script automatiquement sur site perso ?
Plus de sujets relatifs à : Script lightbox et slideshow en conflit

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.092 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)