Do czego służy znacznik ksi-gallery?

Znacznik <ksi-gallery>{ parametry w formacie JSON }</ksi-gallery> służy do tworzenia galeri zdjęć RWD. Każde zdjecie z galerii może mieć tytuł, podtytuł oraz być linkiem.

Parametry

Parametry konfiguracyjne należy przygotować w formacie JSON.

• template: nazwa szablonu. Domyślnie 'default'. W wersji podstawowej jest to jedyny dostępny szablon. Istnieje możliwość stworzenia większej ilości szablonów.
• items: lista elementów galerii jako Array.
• containerStyle: dodatkowy styl dla kontenera.
• containerClass: dodatkowa klasa dla kontenera.

Pojedynczy element galerii:

• image: nazwa obrazka JPG z bieżącego katalogu.
• title: tytuł.
• subtitle: podtytuł.
• imageNamePrefix: początek nazwy dla zdjęcia źródłowego.
• url: adres URL.
• target: atrybut target dla znacznika a.
• imgStyle: dodatkowy styl dla elementu img.
• imgClass: dodatkowa klasa dla elementu img.
• cntStyle: dodatkowy styl dla kontenera elementu.
• cntClass: dodatkowa klasa dla kontenera elementu.

Przykład użycia dla 1 zdjęcia

<ksi-gallery>
  {
    "containerStyle":"height:360px;",
    "items":[
      {
        "image":"img-3.jpg",
        "title":"Usługi informatyczne",
        "subtitle":"full stack developer",
        "url":"https://xksi.pl/",
        "target":"_blank"
      }
    ]
  }
</ksi-gallery>

Efekt działania powyższego kodu:

Przykład użycia dla 2 zdjęć

<ksi-gallery>
  {
    "template":"nazwa-szablonu",
    "items":[
      {
        "image":"img-1.jpg",
        "title":"Strony www dla",
        "subtitle":"organizatorów turystyki",
        "url":"https://dlaoperatora.pl/",
        "target":"_blank"
      },
      {
        "image":"img-2.jpg",
        "title":"Strony www dla",
        "subtitle":"agentów turystycznych",
        "url":"https://ksimedia.pl/",
        "target":"_blank"
      }
    ]
  }
</ksi-gallery>

Efekt działania powyższego kodu:

Przykład użycia dla 3 zdjęć

<ksi-gallery>
  {
    "template":"nazwa-szablonu",
    "items":[
      {
        "image":"img-1.jpg",
        "title":"Strony www dla",
        "subtitle":"organizatorów turystyki",
        "url":"https://dlaoperatora.pl/",
        "target":"_blank"
      },
      {
        "image":"img-2.jpg",
        "title":"Strony www dla",
        "subtitle":"agentów turystycznych",
        "url":"https://ksimedia.pl/",
        "target":"_blank"
      },
      {
        "image":"img-3.jpg",
        "title":"Usługi informatyczne",
        "subtitle":"full stack developer",
        "url":"https://xksi.pl/",
        "target":"_blank"
      }
    ]
  }
</ksi-gallery>

Efekt działania powyższego kodu: