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ę.
<div class="product-item-holder size-big single-product-gallery small-gallery"> <div id="owl-single-product"> <div id="slide1"> <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto0" . "" class="lightbox_trigger"> <img class="img-responsive" src="images/motorcycle/" . "$getphoto0" . "" /> </a> </div> <div id="slide2"> <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto1" . "" class="lightbox_trigger"> <img class="img-responsive" src="images/motorcycle/" . "$getphoto1" . "" /> </a> </div> <div id="slide3"> <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto2" . "" class="lightbox_trigger"> <img class="img-responsive" src="images/motorcycle/" . "$getphoto2" . "" /> </a> </div> <div id="slide4"> <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto3" . "" class="lightbox_trigger"> <img class="img-responsive" src="images/motorcycle/" . "$getphoto3" . "" /> </a> </div> <div id="slide5"> <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto4" . "" class="lightbox_trigger"> <img class="img-responsive" src="images/motorcycle/" . "$getphoto4" . "" /> </a> </div> <div id="slide6"> <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto5" . "" class="lightbox_trigger"> <img class="img-responsive" src="images/motorcycle/" . "$getphoto5" . "" /> </a> </div> <div id="slide7"> <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto6" . "" class="lightbox_trigger"> <img class="img-responsive" src="images/motorcycle/" . "$getphoto6" . "" /> </a> </div> <div id="slide8"> <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto7" . "" class="lightbox_trigger"> <img class="img-responsive" src="images/motorcycle/" . "$getphoto7" . "" /> </a> </div> <div id="slide9"> <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto8" . "" class="lightbox_trigger"> <img class="img-responsive" src="images/motorcycle/" . "$getphoto8" . "" /> </a> </div> <div id="slide10"> <a rel="prettyPhoto[gallery1]" href="images/motorcycle/" . "$getphoto9" . "" class="lightbox_trigger"> <img class="img-responsive" src="images/motorcycle/" . "$getphoto9" . "" /> </a> </div> <div class="nav-holder left hidden-xs"> </div> <div class="nav-holder right hidden-xs"> </div> </div> <div class="single-product-gallery-thumbs gallery-thumbs"> <div id="owl-single-product-thumbnails"> <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="0" href="#slide1"> <img width="67" src="images/motorcycle/" . "$getphoto0" . "" /> </a> <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="1" href="#slide2"> <img width="67" src="images/motorcycle/" . "$getphoto1" . "" /> </a> <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="2" href="#slide3"> <img width="67" src="images/motorcycle/" . "$getphoto2" . "" /> </a> <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="3" href="#slide4"> <img width="67" src="images/motorcycle/" . "$getphoto3" . "" /> </a> <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="4" href="#slide5"> <img width="67" src="images/motorcycle/" . "$getphoto4" . "" /> </a> <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="5" href="#slide6"> <img width="67" src="images/motorcycle/" . "$getphoto5" . "" /> </a> <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="6" href="#slide7"> <img width="67" src="images/motorcycle/" . "$getphoto6" . "" /> </a> <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="7" href="#slide8"> <img width="67" src="images/motorcycle/" . "$getphoto7" . "" /> </a> <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="8" href="#slide9"> <img width="67" src="images/motorcycle/" . "$getphoto8" . "" /> </a> <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="9" href="#slide10"> <img width="67" src="images/motorcycle/" . "$getphoto9" . "" /> </a> </div> <div class="nav-holder left hidden-xs"> </div> <div class="nav-holder right hidden-xs"> </div> </div> </div>
W razie potrzeby przerzucę inne elementy kodu (piszcie tylko co potrzeba).