prettyPhoto je jQuery lightbox klon. Podržava otvaranje slika, self-hosted videa, YouTubea videa, flash datoteka, iframeova i ajaxa te radi na svakom renomiranom web pregledniku. Korišten je u masi tema i pluginova, uključujući WooCommerce. Postoji i kao zaseban WordPress plugin.
Od svih dostupnih u WP plugin repozitoriju, za ovaj članak ćemo koristiti WordPress prettyPhoto plugin. Jedan od razloga što sam odabrao upravo ovaj plugin jest činjenica da se redovito nadograđuje te da koristi posljednju verziju skripte 3.1.6 koja sadrži bitnu sigurnosnu zakrpu (XSS Fix).
Ruku na srce, velika većina korisnika koristila je prettyPhoto za standardno otvaranje fotki/nativnih WP galerija u lightboxu. No, prettyPhoto može puno, puno više. Danas ćemo proći kroz nekoliko nestandardnih mogućih primjena prettyPhotoa. U navedenim primjerima sam koristio inline css što nije fancy solucija (ali radi). Ako budete koristili dijelove navedenog koda, toplo vam preporučujem dodavanje klasa elementima te definiranje stilova u vašoj style.css datoteci.
1. Otvaranje galerije iz HTML linka
Nakon instalacije i aktivacije WordPress prettyPhoto plugina, sve će se fotografije i nativne WP galerije moći otvarati u prettyPhoto lightboxu. Naravno, pod uvjetom da u postavkama prikaza privitka i postavkama galerije izaberete poveznicu na Medijski zapis. Također, kodove obavezno dodavati u Tekst kartici (nikako Vizualno), kako ne bi došlo do greške u formatiranju.
No, što ako želimo galeriju koristiti kao album, što znači da je ne prikazujemo kao standardni grid, te je želimo pozvati iz HTML linka?
Po defaultu sve fotografije koje su linkane na Medijski zapis automatski dobiju rel atribut “prettyPhoto”. S obzirom na fleksibilnost ove skripte, malo ćemo se poigrati i iskoristiti još neke ugrađene funkcionalnosti.
Cijeli kod ćemo “umotati” u jedan div a u njemu ćemo kreirati “skriveni” div u kojem se nalazi naša galerija.
<div class="prettyphoto-gallery"><a href="/wp-content/uploads/image1.jpg" rel="prettyPhoto[Gallery-1]">Neki link</a> <div style="display: none;"> <a rel="prettyPhoto[Gallery-1]" href="/wp-content/uploads/image2.jpg"><img src="/wp-content/uploads/image2.jpg" alt="alt-02" width="1024" height="576" /></a> <a rel="prettyPhoto[Gallery-1]" href="/wp-content/uploads/image3.jpg"><img src="/wp-content/uploads/image3.jpg" alt="alt-03" width="1024" height="576" /></a> <a rel="prettyPhoto[Gallery-1]" href="/wp-content/uploads/image4.jpg"><img src="/wp-content/uploads/image4.jpg" alt="alt-04" width="1024" height="576" /></a> <a rel="prettyPhoto[Gallery-1]" href="/wp-content/uploads/image5.jpg"><img src="/wp-content/uploads/image5.jpg" alt="alt-05" width="1024" height="576" /></a></div> </div>
2. Otvaranje galerije iz thumbnaila
Slično kao u gornjem primjeru, album, odnosno galeriju slika ćete možda željeti pozvati iz sličice (thumbnaila). Kod se razlikuje samo u prvom dijelu, a to je da umjesto HTML linka ubacujemo minijaturu koja je linkana na veću verziju fotografije te otvara pridružene fotke iz galerije.
<div class="prettyphoto-gallery"><a href="/wp-content/uploads/2015/09/img-01.jpg" rel="prettyPhoto[Gallery-2]"> <img src="/wp-content/uploads/2015/09/img-01-150x150.jpg" alt="alt-01.jpg" width="150" height="150" /></a> <div style="display: none;"> <a rel="prettyPhoto[Gallery-2]" href="https://media-x.hr/wp-content/uploads/2015/09/bg-02-1024x576.jpg"><img src="https://media-x.hr/wp-content/uploads/2015/09/bg-02-1024x576.jpg" alt="bg-02.jpg" width="1024" height="576" /></a> <a rel="prettyPhoto[Gallery-2]" href="https://media-x.hr/wp-content/uploads/2015/09/bg-03-1024x576.jpg"><img src="https://media-x.hr/wp-content/uploads/2015/09/bg-03-1024x576.jpg" alt="bg-03.jpg" width="1024" height="576" /></a> <a rel="prettyPhoto[Gallery-2]" href="https://media-x.hr/wp-content/uploads/2015/09/bg-04-1024x576.jpg"><img src="https://media-x.hr/wp-content/uploads/2015/09/bg-04-1024x576.jpg" alt="bg-04.jpg" width="1024" height="576" /></a> <a rel="prettyPhoto[Gallery-2]" href="https://media-x.hr/wp-content/uploads/2015/09/bg-05-1024x576.jpg"><img src="https://media-x.hr/wp-content/uploads/2015/09/bg-05-1024x576.jpg" alt="bg-05.jpg" width="1024" height="576" /></a></div> </div>
3. Otvaranje YouTube/Vimeo videa iz thumbnaila
U slučaju da želite otvarati YouTube ili Vimeo video iz sličice, ikone i slično, rješenje je vrlo jednostavno.
<a href="https://www.youtube.com/watch?v=ognnZ3r2qyQ" rel="prettyPhoto" title=""><img src="https://media-x.hr/wp-content/uploads/2015/09/icon_youtube-150x150.png" alt="YouTube" width="150" /></a>
<a href="https://vimeo.com/138512116" rel="prettyPhoto[iframes]"title=""><img src="https://media-x.hr/wp-content/uploads/2015/09/vimeo-150x150.png" alt="Vimeo" width="150" /></a>
4. Otvaranje inline contenta iz thumbnaila
Pomoću prettyPhotoa možete otvarati tzv. inline content. Moguća primjena je, recimo, dodavanje specifikacija, dodatnih slika ili video o usluzi/proizvodu i slično.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<div><a href="#inline-1" rel="prettyPhoto" ><img src="https://media-x.hr/wp-content/uploads/2015/09/Very-Basic-Code-icon-150x150.png" alt="" width="150" /></a> <div id="inline-1" style="display: none;"> <h4>Ovo je inline content otvoren u prettyPhotou.</h4></br> <img src="/wp-content/uploads/2015/09/logo-wordpress.png" width="64" height="64" class="alignleft size-full" /> Lorem ipsum ...</div> </div>
5. Otvaranje kontakt forme iz thumbnaila
U ovom primjeru ćemo otvoriti Contact form 7 u lightboxu. Oni koji su koristili CF7 znaju da kad kreirate formu, plugin kreira shortcode koji se ubaci na mjesto gdje želite prikazati formu. Mi ćemo shortcode ubaciti u skriveni div te ćemo kontakt formu pozvati klikom na sličicu. Možete koristiti ikonu, sličicu koja izgleda kao button. Budite kreativni.
<div class="prettyphoto-contact"><a href="#inline-2" rel="prettyPhoto" ><img src="/wp-content/uploads/2015/09/business_contact-150x150.png" alt="alt-contact" width="150" /></a> <div id="inline-2" style="display: none;"> <h4> Kontaktirajte nas</h4> [[contact-form-7 id="xybroj" title="Forma 1"]]</div> </div>
6. Otvaranje (eksternih) web stranica iz HTML linka
Pišete li o nekom proizvodu, usluzi, informaciji koja je objavljena na drugom webu, možda ćete korisnicima omogućiti da škicnu taj drugi web bez da napuste vaš web. U tom slučaju možete otvarati web stranicu u lightboxu pomoću iframea.
<a href="http://www.apple.com/hr/macbook-pro/?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="MacBook pro">MacBook Pro na 100%</a>
Možete ograničiti dimenzije iframea te prikazati eksterni web u određenim dimenzijama što može biti cool ako je taj web responzivan.
Apple.com – dimenzije 500x550px
<a href="http://www.apple.com?iframe=true&width=500&height=550" rel="prettyPhoto[iframes]">Apple.com - dimenzije 500x550px</a>
7. Otvaranje anchor linka iz hyperlinka
Slično kao pod brojem 6, možda ćete htjeti otvarati eksternu web stranicu no na točno određenom mjestu (anchor link). Na primjer, želite linkati na određeni dio dokumentacije ili određeni komentar. Uvjet je, naravno, da ta stranica zaista ima anchor linkove na koje se možete “zakačiti”. Koristite slijedeći kod:
Kako kreirati tablicu sadržaja (TOC)?
<a href="https://media-x.hr/wordpress-tablice-sadrzaja-fusnote-i-anchor-linkovi/#tablica-sadrzaja?iframe=true&width=80%&height=80%" rel="prettyPhoto[iframes]">Kako kreirati tablicu sadržaja (TOC)?</a>
Zaključak
Osobno, smatram da je najbolje pametno osmisliti sadržaj i raspored elemenata weba tako da sve bude odmah dostupno posjetiteljima weba. No, po iskustvu na raznim support forumima, korisnici često traže način kako “uštedjeti na mjestu”, kako elegantnije prikazati sadržaj bez da “zatrpa” veći dio stranice i slično.
Nadam se da vam je ovaj članak pomogao ili barem dao inspiraciju za buduće projekte (segmente stranice). Skrećem pažnju na činjenicu da web stranice koje koriste HTTPS protokol nećete moći otvarati u iframeu. Također, budite mudri i dodajte klase (ili ID-eve) HTML elementima te dodajte CSS pravila u style datoteci, osobito ako mislite jednu od gore navedenih opcija koristiti na više mjesta. Takvo rješenje je znatno elegantnije i fleksibilnije.
Komentari su dobro došli.
