Colorbox Inline

Nakładka nad bieżącą stroną

Moduł umożliwia otwieranie elementu w nakładce nad bieżącą podstroną (wymagany przez Colorbox).
Element musi być dostępny na danej podstronie.

Do załadowania zawartości z innej podstrony przez AJAX służy moduł Colorbox Load

Opis działania

Po włączeniu modułu nie pojawiają się żadne dodatkowe opcje konfiguracji.

W pierwszej kolejności należy wybrać element po kliknięciu którego nastąpi wyświetlenie w dodatkowej warstwie wybranej treści podstrony. Do tego elementu należy dodać atrybut data-colorbox-inline, którego wartością będzie selektor elementu do wyświetlenia w nowej warstwie.

 <a data-colorbox-inline="img"> Tekst CTA </a>
 // w nowej warstwie zostanie wyświetlony obraz, który jest pierwszym obrazem w kodzie źródłowym strony

 <a data-colorbox-inline="header"> Tekst CTA </a>
 // w nowej warstwie zostanie wyświetlony obszar pierwszego znacznika header

 <a data-colorbox-inline="#logo"> Tekst CTA </a>
 // w nowej warstwie zostanie wyświetlony element z identyfikatorem logo

 <a data-colorbox-inline=".kod-produktu"> Tekst CTA </a>
 // w nowej warstwie zostanie wyświetlony element z klasą kod-produktu, np. tym razem w formie tekstu

 <a data-colorbox-inline="div span"> Tekst CTA </a>
 // w nowej warstwie zostanie wyświetlona zawartość znacznika span, który znajduje się z znaczniku div

Innym przykładem mogłoby być wyświetlenie elementu, który domyślnie na wyświetlanej podstronie ma ustawione display: none.

Pozostałe atrybuty:

• data-width="" - szerokość elementu w nowej warstwie
• data-height="" - wysokość elementu w nowej warstwie
• data-class="" - dodatkowa klasa w nowej warstwie