Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML][PHP] Problem z prettyphoto i owlgallery
Forum PHP.pl > Forum > Przedszkole
d0m1n1k_
Witam,
chciałem skorzystać z gotowego szablonu kupionego na jednym z anglojęzycznych serwisów.
Sama strona jest ok, wszystko ładnie pięknie działa poza jednym - dla mnie bardzo istotnym - elementem.
Galeria zdjęć. Ma w sobie trzy komponenty: miniaturkę, podgląd skalowany i powiększenie.
Całość oparta jest o prettyphoto i owl-gallery (tak przynajmniej wynika z class i linków do js/css).

Miniaturki działają poprawnie, podgląd skalowany też, ale kiedy powiększę wybrane zdjęcie nie mogę przesunąć na powiększeniu do kolejnego lub poprzedniego.
Czy ktoś miał kiedykolwiek z tym styczność i mógłby mi pomóc?

Byłbym dozgonnie wdzięczny - za co z góry dziękuję.

  1. <div class="product-item-holder size-big single-product-gallery small-gallery">
  2. <div id="owl-single-product">
  3. <div id="slide1">
  4. <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto0" . "" class="lightbox_trigger">
  5. <img class="img-responsive" src="images/motorcycle/" . "$getphoto0" . "" />
  6. </a>
  7. </div>
  8. <div id="slide2">
  9. <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto1" . "" class="lightbox_trigger">
  10. <img class="img-responsive" src="images/motorcycle/" . "$getphoto1" . "" />
  11. </a>
  12. </div>
  13. <div id="slide3">
  14. <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto2" . "" class="lightbox_trigger">
  15. <img class="img-responsive" src="images/motorcycle/" . "$getphoto2" . "" />
  16. </a>
  17. </div>
  18. <div id="slide4">
  19. <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto3" . "" class="lightbox_trigger">
  20. <img class="img-responsive" src="images/motorcycle/" . "$getphoto3" . "" />
  21. </a>
  22. </div>
  23. <div id="slide5">
  24. <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto4" . "" class="lightbox_trigger">
  25. <img class="img-responsive" src="images/motorcycle/" . "$getphoto4" . "" />
  26. </a>
  27. </div>
  28. <div id="slide6">
  29. <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto5" . "" class="lightbox_trigger">
  30. <img class="img-responsive" src="images/motorcycle/" . "$getphoto5" . "" />
  31. </a>
  32. </div>
  33. <div id="slide7">
  34. <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto6" . "" class="lightbox_trigger">
  35. <img class="img-responsive" src="images/motorcycle/" . "$getphoto6" . "" />
  36. </a>
  37. </div>
  38. <div id="slide8">
  39. <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto7" . "" class="lightbox_trigger">
  40. <img class="img-responsive" src="images/motorcycle/" . "$getphoto7" . "" />
  41. </a>
  42. </div>
  43. <div id="slide9">
  44. <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto8" . "" class="lightbox_trigger">
  45. <img class="img-responsive" src="images/motorcycle/" . "$getphoto8" . "" />
  46. </a>
  47. </div>
  48. <div id="slide10">
  49. <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto9" . "" class="lightbox_trigger">
  50. <img class="img-responsive" src="images/motorcycle/" . "$getphoto9" . "" />
  51. </a>
  52. </div>
  53. <div class="nav-holder left hidden-xs">
  54. <a class="prev-btn slider-prev" data-target="#lightbox_trigger" href="#prev"></a>
  55. </div>
  56. <div class="nav-holder right hidden-xs">
  57. <a class="next-btn slider-next" data-target="#lightbox_trigger" href="#next"></a>
  58. </div>
  59. </div>
  60.  
  61.  
  62. <div class="single-product-gallery-thumbs gallery-thumbs">
  63. <div id="owl-single-product-thumbnails">
  64. <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="0" href="#slide1">
  65. <img width="67" src="images/motorcycle/" . "$getphoto0" . "" />
  66. </a>
  67. <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="1" href="#slide2">
  68. <img width="67" src="images/motorcycle/" . "$getphoto1" . "" />
  69. </a>
  70. <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="2" href="#slide3">
  71. <img width="67" src="images/motorcycle/" . "$getphoto2" . "" />
  72. </a>
  73. <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="3" href="#slide4">
  74. <img width="67" src="images/motorcycle/" . "$getphoto3" . "" />
  75. </a>
  76. <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="4" href="#slide5">
  77. <img width="67" src="images/motorcycle/" . "$getphoto4" . "" />
  78. </a>
  79. <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="5" href="#slide6">
  80. <img width="67" src="images/motorcycle/" . "$getphoto5" . "" />
  81. </a>
  82. <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="6" href="#slide7">
  83. <img width="67" src="images/motorcycle/" . "$getphoto6" . "" />
  84. </a>
  85. <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="7" href="#slide8">
  86. <img width="67" src="images/motorcycle/" . "$getphoto7" . "" />
  87. </a>
  88. <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="8" href="#slide9">
  89. <img width="67" src="images/motorcycle/" . "$getphoto8" . "" />
  90. </a>
  91. <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="9" href="#slide10">
  92. <img width="67" src="images/motorcycle/" . "$getphoto9" . "" />
  93. </a>
  94. </div>
  95.  
  96. <div class="nav-holder left hidden-xs">
  97. <a class="prev-btn slider-prev" data-target="#owl-single-product-thumbnails" href="#prev"></a>
  98. </div>
  99. <div class="nav-holder right hidden-xs">
  100. <a class="next-btn slider-next" data-target="#owl-single-product-thumbnails" href="#next"></a>
  101. </div>
  102. </div>
  103. </div>


W razie potrzeby przerzucę inne elementy kodu (piszcie tylko co potrzeba).
trueblue
Z tego kodu nic nie wynika.
Nie możesz przesuwać, bo nie widać przycisków "previous" i "next", czy widać, ale nie przewija?
Patrzyłeś czy są jakieś błędy w konsoli przeglądarki?
d0m1n1k_
Rozszerzyłem kod to chyba całości galerii.
Nie widać przycisków prev/next
Konsola nie nie wywala. Zdjęcia się ładują, wszystko gładko śmiga... ale nie do cholerne przesuwanie.
trueblue
A co z css dla przycisków, są style?
d0m1n1k_
Cytat(trueblue @ 11.02.2015, 18:15:29 ) *
A co z css dla przycisków, są style?


Całość jest oparta o prettyphoto i owl-gallery.
Nic tam nie było ruszane.

Teraz patrząc na css to jest dość skromnie.
Są trzy pliki ich dotyczące bezpośrednio: owl.carousel.css (70 linii), owl.transitions.css (175) oraz prettyphoto.css (170 linii).
W tych plikach szukałem bezpośredniego nawiązania, ale nie znajduję ich.

A może spytam inaczej, czy jest jakiś opensource'owy skrypt galerii z tymi samymi elementami?
Może w ten sposób będzie łatwiej mi to naprawić - wymieniając wadliwy komponent.
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.