„Brzydkim” sposobem można dodać obrazki na podstronę i ukryć je klasą css. Nie zalecam w ten sposób kodować, bo jest to raczej upierdliwy i mało wygodny sposób. Czasami jednak nie ma wyboru ;p
„Ładnym” sposobem można użyć wtyczki Foogallery z rozszerzeniem „Single Thumbnail Gallery„.
Sprawdziłem „ładny” sposób, lecz aby dodać galerię tą wtyczką, trzeba wrzucić shortcode (tak jak prawie wszystkimi wtyczkami?), a to mnie nie ratuje.
Fragment mojego kodu:
<a href="#" class="zdj">
<h3 class="tekst"> Galeria </h3>
<div class="info"> <p> 320zł <span class="noc">/ noc</span> </p> </div>
<div class="przyciemnienie"></div>
</a>
Mam link z klasą 'zdj’, a w środku kilka elementów. Potrzebuję z tego linku uruchamiać galerię. Nie mogę go zastąpić shortcodem, no bo jak?
EDIT:
Ostatecznie mogę to rozwiązać shortcodem do galerii w ukrytym divie, a następnie symulować kliknięcie w miniaturkę tej galerii za pomocą JS, ale nie wiem czy to dobre rozwiązanie?
Średnio rozumiem co chcesz osiągnąć. Chciałbyś odpalać tą galerię zamiast z obrazka od razu z linka?
Dokładnie. Załóżmy, że dodam shortcode galerii zaraz pod linkiem i pakuje go w diva z display:none;
<a href="#" class="zdj">
<h3 class="tekst"> Galeria </h3>
<div class="info"> <p> 320zł <span class="noc">/ noc</span> </p> </div>
<div class="przyciemnienie"></div>
</a>
<div style="display:none">[gallery]</div>
i teraz tym linkiem powyżej chciałbym uruchamiać galerię z shortcodu.
Albo zrobić coś w stylu
<a href="link/do/galerii" class="zdj" rel="lightbox">
tylko nie mam pomysłu jak.
Ja bym na Twoim miejscu wystylizował ten thumbnail w cssie. Pousuwać praktycznie wszystko i zostawić tylko tytuł, który też dasz radę wystylizować, tak żeby wyglądał jak zwykły link.
To byłby „ładny sposób”.
Brzydki:
html:
<div><a href="#" class="zdj"><img src="fotka1.jpg" rel="lightbox" class="fotka_niewidoczna"></a><img src="fotka2.jpg" rel="lightbox" class="fotka_niewidoczna"></div>
<h3 class="tekst"> Galeria </h3>
<div class="info"> <p> 320zł <span class="noc">/ noc</span> </p> </div>
<div class="przyciemnienie"></div>
</a>
css:
.fotka_niewidoczna { display: none; }
To jest tylko teoria i nie mam pewności czy załapie ale możesz spróbować tą drogą. Pamiętaj, że fotki i tak ładuje na stronie.
Do samej galerii lightboxa możesz użyć np.:
https://pl.wordpress.org/plugins/gallery-lightbox-slider/screenshots/
’a’ zamieniłem na 'div’ z pozycją relatywną, a miniaturce galerii dałem pozycję absolutną, usunąłem z niej img, więc został sam link, którego rozciągnąłem na całą szerokość diva, więc w wyglądzie nic się nie zmieniło, a link z miniaturki zakrywa całą powierzchnię elementu „zdj”
<div class="zdj">
<h3 class="tekst"> Galeria </h3>
<div class="info"> <p> 320zł <span class="noc">/ noc</span> </p> </div>
<div class="przyciemnienie"></div>
[foogallery id="327"]
</div>
Dzięki za pomoc Nikodemsky, teraz już działa tak jak chcę.
