Strict Standards: Declaration of action_plugin_searchtext::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /lib/plugins/searchtext/action.php on line 14

Warning: Cannot modify header information - headers already sent by (output started at /lib/plugins/searchtext/action.php:14) in /inc/auth.php on line 313

Warning: Cannot modify header information - headers already sent by (output started at /lib/plugins/searchtext/action.php:14) in /inc/actions.php on line 163
style-graficzne:js-imageslider [Shop Docs]

Dokumentacja techniczna

imageSlider

Pod-klasa Shop. Przewijanie miniatur zdjęć pod głównym zdjęciem produktu.

Parametry w JS

Ponieważ klasa jest inicjalizowana razem z Shop, wszystkie parametry należy nadać przed zdarzeniem domready lub najpóźniej w funkcji warunkowej Shop.imageSlider.condition()

Parametry Shop.imageSlider.options :

  • container (obiekt DOM) - kontener dla wszystkich zdjęć
  • left_arrow_img (string) - url do obrazu ze strzałką w lewo
  • right_arrow_img (string) - url do obrazu ze strzałką w prawo
  • left_delta (int) - skok przy kliknięciu na strzałkę w lewo, domyślnie -2
  • right_delta (int) - skok przy kliknięciu na strzałkę w prawo, domyślnie 2
  • galleryclass (string) - klasa drugiego kontenera, wewnątrz container

imageSlider wymaga następującej struktury DOM:

  • container
    • galleryclass
      • <ul>
        • <li> - dla każdego zdjęcia
          • <img> - miniatura

W aplikacji nad każdym <img> znajduje się również <a>, jest on wykorzystywany przez galerię.

Działanie

Mierzona jest szerokość wszystkich zdjęć oraz container. Jeżeli zdjęć jest więcej, tworzone są dwie strzałki, a wszystkim niemieszczącym się zdjęciom (ich <li>) nadana klasa none. Strzałki <img> otrzymują zdarzenia onClick, które powodują „wędrowanie” klasy none o left_delta i right_delta miejsc.