Back to site
Since 2004, our University project has become the Internet's most widespread web hosting directory. Here we like to talk a lot about web servers, web development, networking and security services. It is, after all, our expertise. To make things better we've launched this science section with the free access to educational resources and important scientific material translated to different languages.

Easy FancyBox

Easy FancyBox dodatni program za WordPress veb sajtove pruža Vam elegantno i fleksibilno “lightbox” rešenje za gotovo sve medijske linkove na vašem veb sajtu. Easy FancyBox koristi paket FancyBox jQuery ekstenziju, a pritom je i kompatibilan sa WP 3+ Multi-Site. Nakon aktivacije, na Vašoj Settings > Media adm stranici naći ćete novi FancyBox odeljak gde možete upravljati opcijama dodatnog programa.

Nakon aktivacije, svi linkovi ka JPG, GIF i PNG slikama se automatski otvaraju u stilu FancyBox Mac “lightbox” koja lebdi iznad veb stranice. Uz pomoć ovog dodatnog programa može se upravljati većinom dostupnih opcija, zajedno sa još nekim dopunskim funkcijama.

Takođe podržava:

  • Sve druge tipove slika i mapirane slike
  • WordPress galerije
  • NextGEN galerije (za instrukcije vidi FAQs - najčešće postavljana pitanja)
  • Youtube galerije preko Youtube Simple Gallery dodatnog programa (za instrukcije vidi FAQs)
  • SWF (Flash) filmove
  • SVG medija slike (zahvaljujemo Simon Maillard-u)
  • Linkovi ka Youtube, Vimeo i Dailmotion
  • Skriveni inlajn sadržaj
  • iFrames
  • PDF fajlovi
  • Auto-popup na učitanoj stranici
  • linkovi unutar Gravity Forms u ajax modu

Pogledajte prikaz ekrana kako biste stekli o tome kako će slike i YouTube filmovi biti predstavljeni na Vašem sajtu odmah nakon što instalirate i (mreža) aktivirate ovaj jednostavni dodatni program.

Za instrukcije o tome kako se upravlja sa YouTube, Dailymotion i Vimeo filmovima (i sličnim servisima) i naznakama, pogledajte FAQ’s kako biste napravili displej sa inlajn sadržajem u FancyBox preklapanju. Pretplatite se na Status301 za naznake o tome kako dobiti najveći stepen kontrole nad onim što će biti prikazano u FancyBox preklapanju na vašem veb sajtu.

Podršku možete dobiti na Easy FancyBox web stranici ili WordPress forumu.

Za više informacija posetite FancyBox, primeri i FancyBox Support Forum. Molimo Vas da razmislite o DONATION kako biste omogućili nastavak razvoja FancyBox projekta.

Preporučujemo:
- Za bolje funkcionisanje sajta jednostavno instalirajte i aktivirajte dodatni program Use Google Libraries kako biste učitali jQuery sa Googles CDN.

Prevodioci

OSNOVNO

Šta je to FancyBox?

U osnovi, to je maštovit način prezentovanja slika, filmova, portabl dokumenata i inlajn sadržaja na Vašem veb sajtu. Na primer, ako imate slike na vašem postu koje su skalirane na niže, a koje su povezane sa verzijom u originalnoj veličini, umesto da otvorite temu na praznoj stranici, FancyBox ih otvara u glatkom preklapanju. Za više primera i informacija posetite FancyBox.

Koju verziju FancyBox-a ovaj dodatni program koristi?

Istu onu verziju koju ima i ovaj dodatni program. Trudim se da držim korak sa FancyBox apgrejdovima i uvek se prebacujem na najnovije i najbolje verzije. Molim Vas da me obavestite ako primetite da zaostajem ili da propuštam apgrejdove!

Instalirao sam dodatni program. Šta sada?

Kao prvo, proverite da li su “thumbnails” sličice na Vašem postovima i stranicama direktno povezane sa svojim “full size” dvojnikom. Otvorite bilo koji post sa sličicama za editovanje i selektujte prve “thumbnail”. Kliknite na Edit Image taster koji se pojavi i izaberite Link to Image. Ubuduće, klikom na taj “thumbnail” biće otvorena “full size” verzija u FancyBox.

Isto se dešava i za WordPress Galleries. Izaberite Link to: File prilikom ubacivanje galerija tag-a.

Želim da unesem neke promene. Gde je stranica za podešavanja?

Ne postoji nova stranica za setovanje, ali ipak postoji nekoliko opcija koje možete promeniti. Novi FancyBox odeljak ćete pronaći na Settings > Media. Da biste videli “default”, pogledajte primer u Screenshots

Upomoć! Ne radi…

Molimo Vas da pratite “troubleshooting” uputstva na Other Notes kako biste utvrdili uzrok. Ako to ne pomaže, tražite podršku na Easy FancyBox WordPress forumu ili idite na development site

NAPREDNO

Hoće li WordPress generisana galerija biti prikazana u FancyBox preklapanju?

Da, ali jedino ako ste koristili opciju Link thumbnails to: Image File dok ste ubacivali galeriju! quicktag/shortcode galerije bi trebalo da izgleda nešto kao .

“lightbox” ne izgleda dobro na mobilnim uređajima. Šta mogu da uradim po tom pitanju?

FancyBox 1.3.4 automatizovana procedura koja se koristi u thsi dodatnom programu nije razvijana za potrebe mobilnih uređaja. Trenutno jedino rešenje za ovaj problem je deaktivirati FancyBox za male ekrane. Ovo se može uraditi dodavanjem uređaja za tekst na vaš bočni bar uz pomoć izvoda iz programskog jezika kojeg dajemo dole.

<script type="text/javascript">
if(window.innerWidth < 500 || window.innerHeight < 500 || window.outerWidth < 500 || window.outerHeight < 500 ) {
  jQuery(document).off('ready gform_post_render', easy_fancybox_handler);
};
</script>

Podesite vrednost 500 da biste dobili ekrane drugih veličina.

Mogu li da napravim slajdšou iz moje galerije?

Za te potrebe u Pro version postoji napredna opcija pod nazivom “Gallery Auto-rotation” .

Mogu li da izostavim slike ili druge linkove iz auto-atribucije?

Da. Svi linkovi sa klasom nofancybox koji normalno postaju auto-aktivirani, biće izostavljeni iz otvaranja u FancyBox preklapanju.

<a href="url/to/fullimg.jpg" class="nofancybox"><img src="url/to/thumbnail.jpg" /></a>

Hoće li NextGen galerija biti prikazana u FancyBox preklapanju ?

Može biti.

  1. Stavite na OFF FancyBox Auto-gallery opciju; zatim
  2. podesite NextGen opciju “JavaScript Thumbnail effect” na “Custom”; i
  3. popunite liniju za unošenje koda sa
class="fancybox" rel="%GALLERY_NAME%"
Mogu li da koristim JEDNU sličicu za otvaranje cele galerije ?

To se može uraditi manualno (uz pomoć unutrašnje WordPress gallery funkcije, ili ne) ili u kombinaciji sa NextGen Gallery.

Uputstvo

A. Otvorite Vaš post za editovanje u HTML modu i ubacite prvu thumbnail sličicu u njegov sadržaj (linkujte na fajl slika, ne na stranicu) koja će služiti kao thumbnail galerije.

B. Unesite sledeći kod kako biste pokrenuli skriveni div koji sadrži sve druge slike vidljive samo u FancyBox:

<div class="fancybox-hidden">

C. Odmah nakon formiranje novog reda, ubacite sve druge slike koje želite da budu prikazane u galeriji. Čak možete koristiti WordPress funkciju interne galerije sa skraćenim kodom. NAPOMENA: ako je thumbnail galerije pridodata postu biće prikazana po drugi put dok “krstari” kroz galeriju u FancyBox-u. Ako to ne želite, koristite sliku koja nije “attached” postu kao thumbail galerije.

D. Zatvorite skriveni div u novom redu sa sledećim kodom:

</div>

Sa NextGEN Gallery

Možete birati između dva skraćena koda kako biste pokazali da galerija (1) ograničava slike po galeriji koristeći skraćeni kod [nggallery id=x] ili (2) po imenu tag-a (kroz galerije; potrebno je da podesite naziv tag-a manualno => više rada, ali zato više kontrole) uz pomoć skraćenog koda[nggtags gallery=YourTagName,AnotherTagName].

Osnovni koraci:

A. Ubacite skraćeni kod po vašem izboru u sadržaj stranice/posta. B. Konfigurišite NextGen na Gallery > Options > Gallery settings da biste imali najmanje ove sledeće opcije za setovanje:

  1. Broj slika po stranici: 1
  2. Integrišite slajdšou: isključeno (opciono, ali se preporučuje: umesto toga koristite auto-rotaciju u FancyBox settings )
  3. Prvo prikaži: Thumbnails
  4. Prikaži ImageBrowser: isključeno
  5. Dodajte skrivene slike: uključeno

C. Opciono: dodajte sledeće novo CSS pravilo “stylesheet”-u vaše teme (ili instalirajte Custom CSS i dodajte ga na novu Appearance > Edit CSS admin stranicu) kako biste sakrili linkove za pretraživanje stranica ispod “thumbnail” galerije.

.ngg-navigation {
display:none;
}

Mogu li da kreiram galeriju od Youtube sličica koje se otvaraju u FancyBox?

To možete uraditi manualno učitavanjem pojedinačnih sličica koje se mogu povratiti pomoću jedinstvenog film ID-a u ovim URL-ovima za tri različite veličine:

http://i4.ytimg.com/vi/UNIQUE-MOVIE-ID/default.jpg
http://i4.ytimg.com/vi/UNIQUE-MOVIE-ID/mqdefault.jpg
http://i4.ytimg.com/vi/UNIQUE-MOVIE-ID/hqdefault.jpg

Ali lakši je ovaj metod, kojeg je šerovao Shashank Shekhar (hvala!) :

Da biste kreirali Youtube thumbnail galerije, instalirajte http://wordpress.org/extend/plugins/youtube-simplegallery/ i podesite ‘Effect’ opciju na fancybox. Zatim deaktivirajte Youtube autodetekciju na Settings > Media.

Mogu li da prikažem veb stranice ili HTML fajlove u FancyBox preklapanju?

Da. Umetnite link ili sa class="fancybox-iframe" ili sa class="fancybox iframe" (primetićete da je tu “space”-prazan prostor, umesto “hyphen” - crtice) na bilo koju veb stranicu ili .htm(l) fajl u sadržaju.

NAPOMENA: Razlika između ove dve klase (‘-’ ili “prazan prostor”) je u veličini prozora za preklapanje. Iprobajte obe a koristite onu koja je za vas bolja. :)

Mogu li da prikažem PDF fajlove u FancyBox preklapanju?

Da. Samo smestite link sa URL završetkom u .pdf na vaš Portable Document fajl u sadržaju stranice.

Ako nemate aktiviran Auto-detect pod PDF na Settings > Media admin stranici, biće potrebno da dodate class="fancybox-pdf" (da biste pokrenuli prepoznavanje pdf sadržaja) na link kako biste osposobili FancyBox za to.

Mogu li da puštam SWF fajlove u FancyBox preklapanju?

Da. Samo stavite link sa URL završetkom u .swf na vaš Flash fajl u sadržaju stranice.

Ako nemate aktiviran Auto-detect pod SWF na Settings > Media admin page, biće potrebno da dodate ili class="fancybox ili class="fancybox-swf" (da biste pokrenuli prepoznavanje swf sadržaja) na link kako biste osposobili FancyBox za to.

Kako da prikažem sadržaj sa različitim veličinama?

FancyBox pokušava da automatski detektuje veličinu sadržaja, ali ako ne odredi veličinu biće neuspešno setovanje za taj konkretan tip sadržaja pošto je setovan na Settings > Media page. Ovo možete da prevaziđete manualno tako što ćete definisati širinu i visinu obavijenu spiralnim bronzama u atributima klase samog linka. Na primer, Flash film sa drugom dimenzijom:

<a class="fancybox-swf {width:1024,height:675}" href="link-to-your-swf"></a>

Mogu li da puštam YouTube, Dailymotion i Vimeo filmove u FancyBox preklapanju?

Da. Jednostavno napravite link koristeći Share URL ( full Page URL, Short URL sa ili bez opcija kao što je HD itd.) na YouTube/Vimeo/Dailymotion stranici na vašem post sadržaju. Ako vam je Auto-detect deaktiviran, dodatni program će se pobrinuti za sve ostalo! :)

Ako vam je Auto-detection deaktiviran, dajte linku atribut klase kao što je class="fancybox-youtube" za Youtube, class="fancybox-vimeo" za Vimeo i class="fancybox-dailymotion" za Dailymotion, kako biste manualno aktivirali FancyBox za to.

Može se napraviti i za YouTube i za Vimeo filmove da se mogu puštati odmah nakon otvaranja dodavanjem parametra autoplay=1 na URL. Na primer, kratki-url YouTube link koji bi trebao da radi u HD mode, ima taster za “full screen” i “auto-start” na “open”, izgledao bi kao:

<a href="http://youtu.be/N_tONWXYviM?hd=1&fs=1&autoplay=1">text or thumbnail</a>

Želim taj ‘Show in full-screen’ taster na svojim YouTube filmovima

Append &fs=1 na vaš YouTube share URL.

Mogu li da prikažem Youtube plej listu u FancyBox?

Da, samo idite na Youtube stranicu bilo kog filma koji je na plej listi i upotrebite Share taster da biste dobili share URL baš kao kod pojedinačnih filmova, ali ovoga puta “checkmark” stavite na ‘Share with playlist’ opciju.

Flash film u preklapanju prikazuje ISPOD neki drugi flash sadržaj na istoj stranici!

Proverite da je DRUGI flash sadržaj kao npr wmode podešen, prevashodno na ‘opaque’ ili neki drugi ‘transparent’ ali nikada na ‘window’ ili “missing”. Na primer, ako ono što ste ubacili izgleda kao:

<object type="application/x-shockwave-flash" width="200" height="300" data="...url...">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="...url..." />
</object>

samo dodajte <param name="wmode" value="opaque" /> među ostale parametre. Ili ako koristite umetak kao:

<object width="640" height="385">
<param name="movie" value="...url..."></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="...url..." type="application/x-shockwave-flash" width="640" height="385" allowscriptaccess="always" allowfullscreen="true" wmode="window"></embed>
</object>

samo promenite taj wmode="window" na wmode="opaque" ili dodajte atribut ako nedostaje.

Kako da prikažem INLAJN sadržaj u FancyBox sadržaju ?

Prvo idite na vašu Settings > Media admin stranicu i aktivirajte Inline opciju u okviru FancyBox settings. Nakon što ste to sačuvali, admin stranica će prikazati novi odeljak pod nazivom “Inline” gde možete (tweak-ovati) podešavati njegove parametre.

Zatim otvorite vašu stranicu/post za editovanje u HTML tab i spakujte inlajn sadržaj u

<div style="display:none" class="fancybox-hidden"><div id="fancyboxID-1" class="hentry" style="width:460px;height:380px;">
...inline content here...
</div></div>

Potom stavite FancyBox link tag sa atributom klase “fancybox-inline” bilo gde u post/page sadržaj koji će ukazivati na inlajn sadržaj, kao

<a href="#fancyboxID-1" class="fancybox-inline">Read my inline content</a>

NAPOMENA: Pakovanje ID div-a mora biti jedinstveno i mora se odgovarati linkovima HREF sa # ispred njih. Prilikom korišćenja gore datog primera za više kombinacija FancyBox inlajn sadržaja (hidden div + opening link) po jednoj stranici, za drugi dajte ID fancyboxID-2, i tako dalje…

NAPOMENA 2: Ako uočite da se inlajn sadržaj prikazan u FancyBox po stilu veoma razlikuje od ostatka sadržaja na stranici, probajte da promenite div tag klasu atributa (attribute class="hentry") u nešto drugo što odgovara vašoj temi. Utvrdite naziv klase koja se koristi za glavni sadržaj na sajtu i ponovo je iskoristite.

Mogu li da prikažem kontakt iz unutrašnjosti FancyBox?

Da. Postoji nekoliko mogućih načina, ali je najlakše da koristite Inline metod. Inlajn sadržaj može biti “shortcode” kao što je to na ovom primeru u kojem se koristi Contact Forms 7 i Easy FancyBox:

<a href="#contact_form_pop" class="fancybox">Contact Us</a>

<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop" class="hentry" style="width:460px;height:380px;">
        [contact-form-7 id="87" title="Contact form 1"]
    </div>
</div>

Gde menjate skraćeni kod (između [ and ] karaktera) sa onim datim u dodatnom programu. Takože se to može uraditi i sa “shortcode”-ovima iz drugih dodatnih programa kao što je to na primer Jetpack’s Contact Form modul. Promenite klasu atributa da odgovara klasi koja se koristi za div koji obuhvata sadržaj na vašem postu kako bi imao bilo koju formu CSS stila limitiranog na sadržaj posta, a koja može biti primenjena na inlajn sadržaj unutar FancyBox.

Mogu li da napravim sliku uli skriveni sadržaj na “pop up”-u u FancyBox na učitanoj stranici?

Da. Link koji ima ID fancybox-auto (Napomena: može biti samo JEDAN link kao onaj na stranici!) biće automatski aktiviran na učitanoj stranici.

Iskoristite gore date instrukcije za inlajn sadržaj, ali ovoga puta dajte linku takođe i id="fancybox-auto" (klasu takođe ostavite) i uklonite “anchor text” da biste ga sakrili. Sada će se skriveni div sadržaj automatski “pop up”-ovati kada posetilac otvori stranicu.

Isto se može uraditi i sa slikom, flash filmom, PDF ili frejm linkom! Ali, molim vas da upamtite da može biti samo jedna stavka po stranici koja koristi ID fancybox-auto…

Mogu li da napravim da se stavka iz menija otvara u FancyBox preklapanju ?

Da. Ali šta treba uraditi da bi to radilo, zavisi od od vaše teme. Ako ste na WordPress 3+ i vaša tema podržava novu internu Custom Menu funkciju, ili ako koristite kastom meni na uređaju na “sidebar”-u, onda je to lako:

  1. Idite na Settings > Media i aktivirajte FancyBox iFrame podršku.
  2. Idite na Appearance > Menus i otvorite mali tab “Screen Options” u gornjem desnom uglu.
  3. Aktivirajte opciju “CSS Classes” u “Advanced menu properties”.
  4. Sada dajte stavci koju želite da otvorite u “FancyBox iframe” klasu “fancybox-iframe”.

Ako ste na starijoj verziji WordPress ili ako ne možete da koristite WP’s Menus, biće potrebno da uradite neka teška hakovanja teme kako biste ga naterali da radi. U osnovi, ono što treba da postignete jeste da stavka iz menija, za koju želite da bude otvorena u “lightbox” preklapanju, treba da dobije tag class=”fancybox-iframe” .

Da li je Easy FancyBox multi-site kompatibilan?

Da. Napravljen je da radi sa Network Activate i ne zahteva manualnu aktivaciju na svakom sajtu na mreži. Možete ga čak instalirati i na “mu-plugins”: aploudujte kompletan /easy-fancybox/ direktorijum na /wp-content/mu-plugins/ i uklonite fajl “easy-fancybox.php one dir up”.





Published (Last edited): 02-08-2013 , source: http://status301.net/wordpress-plugins/easy-fancybox/