DVZ Shoutbox | Image spoiler

1 Tworzymy nowy MyCode

Przechodzimy do: ACP -> Konfiguracja -> MyCode -> Nowy MyCode i wypełniamy pola w następujący sposób
Tytuł: Nasz tytuł; w moim przypadku będzie to image, aczkolwiek możecie go nazwać po swojemu
Wyrażenie regularne: \[image\](.*?)\[/image\] - image możecie zastąpić własnym tekstem. Jest to tekst w między który będziecie wklejać link do grafiki
Zamiana: 

<div class="img-spoiler">
 <button>Schowaj/Pokaż</button>
 <img src="$1" alt="image" style="display:none; max-width:100%;">
</div>

Krótko wyjaśniając: 
- div o klasie img-spoiler, aby łatwo było nam identyfikować x spoiler. Posiada on: display:none;, aby domyślnie obrazek był ukryty; max-width: 100%;, aby obrazek nie był szerszy niż jego rodzic;
- button, który będzie służyl do pokazywania/ukrywania grafiki;
- img, który odpowiada za pobranie i wyświetlenie grafiki
Włączony: Tak

2 Dodanie kodu JS

Dodajemy na samym dole strony (lub do naszego pliku z js) ten kod:


$("body").on("click", ".img-spoiler", function (){
    $(this).children("img").toggle(250);
});


Odpowiada on za mechanikę wyświetlania i ukrywania naszego obrazka. Liczba podana w .toggle() odpowiada za czas wyświetlania i chowania się w milisekundach. Używamy zdarzenia .on zamiast zwykłego .click, więc w przypadku pobrania nowej wiadomości wszystko działa prawidłowo. 

MyCode działa wszędzie na forum, ale stworzony jest głównie pod shoutbox. Dla lepszej optymalizacji w kodzie z drugiego punktu warto dodać kropkę przed body. Wtedy pokazywanie/ukrywanie będzie brało tylko elementy w klasie body, czyli takiej jaką posiada shoutbox.

Testowane na wersji: 2.2.1