Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS][JavaScript]Problem z galerią zdjęć
Forum PHP.pl > Forum > Przedszkole
pucureczek
Witam

Mam problem z galerią zdjęć na stronie www. Chodzi o to, że w przeglądarce Google Chrome oraz w Operze po najechaniu myszką na galerię oraz którekolwiek zdjęcie zaczyna "pływać", "ruszać się w górę oraz w dół" przez ten błąd nie można kliknąć oraz powiększyć zdjęcia dodam, że w IE oraz w Mozilla Firefox błąd nie występuje niżej podaje screena z przedstawieniem problemu.



Podsyłam również kod:

  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
  3. <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
  4.  
  5. <div id="gallery">
  6. <ul>
  7. <li>
  8. <a href="photos/zdj26a.png" title="# Zdjęcie 26 #">
  9. <img src="photos/zdj26.png" width="300" height="200" alt="" />
  10. </a>
  11. </li>
  12. <br>
  13. <li>
  14. <a href="photos/zdj27a.png" title="# Zdjęcie 27 #">
  15. <img src="photos/zdj27.png" width="300" height="200" alt="" />
  16. </a>
  17. </li>
  18. <br>
  19. <li>
  20. <a href="photos/zdj28a.png" title="# Zdjęcie 28 #">
  21. <img src="photos/zdj28.png" width="300" height="200" alt="" />
  22. </a>
  23. </li>
  24. <br>
  25. <li>
  26. <a href="photos/zdj29a.png" title="# Zdjęcie 29 #">
  27. <img src="photos/zdj29.png" width="300" height="200" alt="" />
  28. </a>
  29. </li>
  30. </ul>
  31. </div>


CSS

  1. /* jQuery lightBox plugin - Gallery style*/
  2.  
  3. #gallery {
  4. /*background-color: #444;--tło */
  5. padding: 10px;
  6. width: 0px;
  7. margin: 70px 0px 0px 800px;
  8. }
  9.  
  10. #gallery ul
  11. {
  12. list-style: none;
  13. }
  14.  
  15. #gallery ul li
  16. {
  17. display: inline;
  18. }
  19.  
  20. #gallery ul img {
  21. border: 5px solid #3e3e3e;
  22. border-width: 5px 5px 20px; /*rozmiar ramki 3e3e3e*/
  23. }
  24.  
  25. #gallery ul a:hover img
  26. {
  27. border: 5px solid #fff;
  28. border-width: 5px 5px 20px;
  29. color: #fff;
  30. }
  31.  
  32. #gallery ul a:hover
  33. {
  34. color: #fff;
  35. }


CSS \ jquery.lightbox-0.5

  1. #jquery-overlay {
  2. position: absolute;
  3. top: 0;
  4. left: 0;
  5. z-index: 90;
  6. width: auto;
  7. min-width:1280px;
  8. height: 500px;
  9. margin: 0;
  10. }
  11. #jquery-lightbox {
  12. position: absolute;
  13. top: 0;
  14. left: 0;
  15. width: 100%;
  16. z-index: 100;
  17. text-align: center;
  18. line-height: 0;
  19. }
  20. #jquery-lightbox a img { border: none;}
  21. #lightbox-container-image-box {
  22. position: relative;
  23. background-color: #fff;
  24. width: 250px;
  25. height: 250px;
  26. margin: 0 auto;
  27. }
  28. #lightbox-container-image { padding: 10px;}
  29. #lightbox-loading {
  30. position: absolute;
  31. top: 40%;
  32. left: 0%;
  33. height:25%;
  34. width: 100%;
  35.  
  36. text-align: center;
  37. line-height: 0;
  38. }
  39.  
  40. #lightbox-nav {
  41. position: absolute;
  42. top: 0;
  43. left: 0;
  44. height: 100%;
  45. width: 100%;
  46. z-index: 10;
  47. }
  48. #lightbox-container-image-box > #lightbox-nav { left: 0;}
  49. #lightbox-nav a { outline: none;}
  50. #lightbox-nav-btnPrev, #lightbox-nav-btnNext {
  51. width: 49%;
  52. height: 100%;
  53. zoom: 1;
  54. display: block;
  55. }
  56. #lightbox-nav-btnPrev {
  57. left: 0;
  58. float: left;
  59. }
  60. #lightbox-nav-btnNext {
  61. right: 0;
  62. float: right;
  63. }
  64. #lightbox-container-image-data-box {
  65. font: 10px Verdana, Helvetica, sans-serif;
  66. background-color: #fff; /* odpowiada za kolor tĹa w powiÄkszonym zdjÄciu [dĂłĹ] */
  67. margin: 0 auto;
  68. line-height: 1.4em;
  69. overflow: auto;
  70. width: 100%;
  71. padding: 0 10px 0;
  72. }
  73. #lightbox-container-image-data {
  74. padding: 0;
  75. color: #666; /* kolor czcionki w powiÄkszonym zdjÄciu [dĂłĹ]*/
  76. }
  77. #lightbox-container-image-data #lightbox-image-details {
  78. width: 70%;
  79. float: left;
  80. text-align: left;
  81. }
  82. #lightbox-image-details-caption { font-weight: bold;}
  83. #lightbox-image-details-currentNumber {
  84. display: block;
  85. clear: left;
  86. padding-bottom: 1.0em;
  87. }
  88. #lightbox-secNav-btnClose {
  89. width: 66px;
  90. float: right;
  91. padding-bottom: 0.7em;
  92. }


Proszę o pomoc w rozwiązaniu problemu tongue.gif
Damonsson
Zamiast 1000 znaków w poście, starczyłby link do strony.

edit:
wywal display: inline-block; z li a:
  1. li a
  2. {
  3. width:auto;
  4. color:#ffffff;
  5. text-decoration:none;
  6. margin:0 5px;
  7. padding:0 5px;
  8. }
pucureczek
Bardzo dziękuję pomogło!! yahoo.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.