Iar modul cel mai obișnuit de a folosi FancyBox pe un blog WordPress este de a mări imaginile, atât cele singulare, cât și cele care au fuzionat într-o galerie. Exemple de implementare a tuturor opțiunilor de mai sus pot fi găsite pe site-ul oficial al pluginului - fancybox.net. Și în acest articol, vom analiza cât de ușor este integrarea bibliotecii în blogul nostru, utilizând plug-inurile FancyBox pentru WordPress și Easy FancyBox și setările lor de bază. Și, de asemenea, să învețe cum să conectați FancyBox la WordPress fără un plug-in.
FancyBox Pentru WordPress: afișăm imagini și galerii frumos
Dacă ați lucrat deja cu imagini în Wordpress și le-ați plasat în înregistrări și pe pagini, ați observat că imaginile cu o extensie mare a șablonului se micșorează. Și uneori afectează corectitudinea afișării informațiilor pe care doriți să le transmiteți, datorită faptului că nu totul poate fi dezasamblat. Puteți lupta cu asta prin suspendarea unui link către dvs. în fișierul media. În acest caz, când faceți clic pe o imagine, aceasta, în funcție de setări, se deschide fie în aceeași fereastră ca o pagină completă, fie într-o filă nouă. Sunt de acord, ambele opțiuni nu sunt cele mai convenabile și necesită acțiuni suplimentare ale utilizatorului și timpul este complet nerezonabil.
Pentru a elimina aceste neplăceri și a îmbunătăți procesul de afișare a fotografiilor pe blogul Wordpress, a fost dezvoltat un plugin special FancyBox pentru WordPress. Servește vizitatorului pentru a activa imaginea făcând clic pe acesta, deschizându-l în partea de sus a restului ferestrelor. Aici:
Să instalați un plug-in pentru site-ul nostru din depozitul WordPress.
Activați FancyBox pentru WP și începe imediat să lucreze, aplicând setările sale de bază pentru imagini. În acest mod ne putem asigura că mergem la blogul nostru, actualizându-l și făcând clic pe oricare dintre imaginile disponibile.
În același timp, imaginea este scalată la dimensiuni mari și plasată într-o fereastră pop-up deasupra restului conținutului, care este puțin întunecată. Pentru a închide fereastra modală, puteți face clic pe o cruce în colțul din dreapta sus sau oriunde pe pagina din afara imaginii.
În plus față de opțiunile pre-instalate, se presupune o setare mai flexibilă pentru FancyBox For WordPress. Le găsim în consola VI, în meniul "Setări" - "FancyBox pentru WP". Dacă faceți clic pe link, vom vedea un număr mare de filuri responsabile de editarea acestor sau alți parametri. Acestea sunt asociate în principal cu schimbarea aspectului afișării imaginilor. Din păcate, plugin-ul este complet vorbitor de limbă engleză. Dar acum vom lua în considerare toate momentele cele mai interesante de care ai nevoie dacă setările implicite nu corespund nevoilor tale.
Fila Start este "Info". Iată linkuri către informații despre dezvoltatori și despre produsul în ansamblu. Creatorii plug-in-ului spun că, dacă nu doriți să vă implicați în toate setările propuse, atunci fără aceasta versiunea de bază a setărilor oferă un rezultat suficient de atractiv. De asemenea, vă solicită să acordați atenție faptului că, dacă după editare nu ați observat imediat modificările, aceasta deseori nu înseamnă că FancyBox Pentru WordPress nu funcționează. Dacă aveți un plugin de cache instalat, de exemplu, Hyper Cache. atunci trebuie să ștergeți memoria cache după salvarea modificărilor sau dezactivarea plug-in-ului în timp ce lucrați cu setările.
Următoarea filă este "Aspect". Aceasta este pagina în care putem personaliza opțiunile de bază care sunt responsabile de apariția ferestrelor pop-up. Dacă este bifată caseta de validare - funcția este activată, dacă nu este dezactivată:
- "Border" - alegeți dacă va fi afișat cadrul din jurul ferestrei modale. Implicit este nr. Dacă selectăm opțiunea "da", un câmp suplimentar pentru selectarea culorii de margine apare în format hexazecimal (# 000000). Ajustarea lățimii cadrului nu este posibilă;
- "Buton de închidere" - determinați dacă caseta de lumină are un buton de închidere a ferestrei (încrucișată) și unde va fi localizat (stânga / stânga / dreapta / partea de jos / partea de sus). Valoarea de pornire este în partea dreaptă sus;
- "Padding" - acest element este responsabil pentru setarea în FancyBox Pentru WordPress a culorii și a lățimii liniuței de la marginea ferestrei pop-up la imaginea plasată în ea. Valoarea implicită este albă, 10 pixeli;
- "Opțiuni de suprapunere" - setați caracteristicile fundalului de fundal, care apare sub imaginea de tip pop-up, acoperind conținutul întregii pagini. Definit inițial: ca culoare gri, ca o transparență (opacitate) - 0,3. Proprietatea de transparență este măsurată de la 0.0 la 1.0, iar cu cât este mai mică valoarea, cu atât mai transparent va fi fundalul. În consecință, dacă doriți să ascundeți complet conținutul lăsat în spatele ferestrei modale, puteți selecta opacitatea: 1;
- "Titlu" - atribuie dacă să afișeze o subtitrare a imaginii (adică valoarea atributului titlu al imaginii) și cum. Aici puteți seta locația numelui în funcție de umplutura ferestrei pop-up (Inside / Outside / Over) și de culoarea sa. În valorile "Inside" și "Outside", textul va fi plasat în marginea inferioară a ferestrei modale, respectiv sub ea. Și dacă selectați opțiunea "Peste", numele va fi plasat deasupra liniuței inferioare, deasupra imaginii pe un substrat translucid întunecat;
- "Săgeți de navigare" - alegeți să afișați săgețile de navigare. Ele apar atunci când plasați cursorul peste imagine.
Când faceți modificări, nu uitați să le salvați făcând clic pe butonul "Salvați modificările" din partea de jos a paginii. Aici avem opțiunea de a returna toate setările FancyBox Pentru WordPress în mod prestabilit, făcând clic pe linkul "Reveniți la valori implicite".
Accesați fila "Animații". Aici vom configura funcțiile responsabile de controlul animației de tip pop-up:
- "Opțiuni Zoom" - alegeți dacă gradul de transparență să se modifice în timpul creșterii și descreșterii imaginii. În același paragraf, plug-in-ul FancyBox Pentru WordPress ne oferă flexibilitatea de a regla viteza zoomului:
- "Tip de tranziție" - setați tipul de animație pentru fereastra modală de deschidere (primul câmp) și cea de închidere. Alegerea este disponibilă în trei valori: decolorare (implicit) - decolorare / manifestare, elastic - elastic, nici unul - fără animație. Ar fi de dorit să se precizeze că opțiunea de deschidere a mijloacelor elastice popap de animație în care originalul, de dimensiuni mai mici, imaginea vine în prim-plan a poziției inițiale ca și în cazul în care ajustarea dimensiunii ecranului și umplându-l cu un altul. Când închideți caseta de lumină, același lucru se întâmplă în ordine inversă;
- "Relaxare" - în acest moment putem conecta funcția de netezime la animație și alege una dintre multele sale opțiuni separat pentru deschiderea ferestrelor, închiderea și deplasarea între diapozitive. Despre ce vorbim? Această funcție stabilește viteza animației în diferite stadii ale animației, ceea ce o face mai realistă. La urma urmei, in viata, actiunea produsa de obiect nu incepe cu fulgere rapida si nu suporta aceeasi viteza pana la sfarsit.
Rețineți că aceste setări pot fi aplicate numai acelor ferestre modale de deschidere / închidere care au valoarea elastică în parametrul "Tip de tranziție".
Următoarea filă este "Setări de comportament". Acesta este responsabil pentru stabilirea comportamentului ferestrei pop-up și vine cu starea "mediu". În acest sens, dezvoltatorii de FancyBox Pentru WordPress ne avertizează că este mai bine să lăsăm totul așa cum este pe această pagină, dacă nu știm cu adevărat cum să lucrăm cu parametrii localizați aici. Prin urmare, nu vom vorbi în detaliu despre toate opțiunile. Pentru ceea ce fiecare dintre ei răspunde, este clar din captura de ecran:
Al cincilea tabel este "Galeriile". Acest nivel avansat al setărilor referitoare la galeriile de imagini:
Să presupunem că aveți un material pe pagină care este împărțit condițional în mai multe blocuri semantice. De exemplu: într-una dintre ele plasați imagini pentru a ilustra procesul de creare a paginii de destinație pe WP. și în exemplele următoare - cele mai reușite pagini de vânzare. Și doriți ca aceste două grupuri de imagini să nu fie amestecate într-o singură fereastră modală, ci să fie afișate în diferite casete lightbox. Pentru a face acest lucru, selectați mai întâi opțiunea "Nu grupați imagini în galerie în mod automat".
Pentru cel de-al doilea grup de fișiere media, repetați aceleași acțiuni, dar cu o altă valoare rel, de exemplu: rel = "gal2";
- "Creați o galerie pentru fiecare post (va funcționa numai dacă tema dvs. utilizează clasa" post ")." Creați o galerie pentru fiecare postare (va funcționa numai dacă tema dumneavoastră folosește clasa = "post" pentru fiecare post, care este comun în WordPress) pentru fiecare post, care este caracteristica Wordpress);
- «Utilizați o expresie personalizată pentru a aplica FancyBox» - utilizarea personalizat jQuery-expresie pentru setarea FancyBox pentru WordPress în cazul în care opțiunile plugin oferite nu vi se potrivesc și ai nevoie de un unități individuale mai flexibile. Această opțiune este cel mai bine să nu utilizați.
Este, de asemenea, mai bine să nu editați următoarele file, ele vor fi ușor de înțeles și utile doar pentru utilizatorii avansați.
Sunt încrezător că toate instrucțiunile de mai sus vor fi suficiente pentru a vă integra cu succes FancyBox Pentru WordPress în blogul dvs. pentru a afișa efectiv imaginile într-o fereastră pop-up.
Dar nu puteți să nu fiți atenți la faptul că pe Internet există plângeri periodice adresate utilizatorilor cu privire la vulnerabilitatea plug-in-ului, ceea ce duce la infectarea site-urilor cu viruși chiar și fără acces la administrarea și găzduirea Wordpress. Dacă vă confruntați cu problema hacking resursa dvs. web, este important să verificați și să curățați virușii de pe site cât mai curând posibil. Vreau să vă ofer o opțiune alternativă pentru afișarea imaginilor în casete lightbox. Și mai mult vom fi familiarizați cu plug-in-ul, care este principala competiție a FancyBox pentru EP. Este folosit pe paginile blogului meu.
Easy FancyBox: principalele caracteristici ale pluginului
Tipic de diferențele sale sunt:
- plugin-ul este parțial rusificat, deci este ușor să-i înțelegi setările în mod independent;
- la setările de bază, imaginile nu sunt fuzionate automat în galerii, Easy FancyBox afișează numai imaginea pe care a fost făcută clic în fereastra pop-up. Pentru a afișa un grup de fișiere într-o casetă lightbox, trebuie să creați o galerie standard Wordpress în modul de editare editat.
Sau, în setările plug-in din blocul "Galerie" din câmpul "Autogallery", selectați elementul "Toate într-o singură galerie";
- în opțiunea "ieșire din cutie", Easy FancyBox plasează numele preluat din atributul alt deasupra imaginilor. Pentru a dezactiva această opțiune, debifați în câmpul "Appearance" câmpul "Show title";
- Plug-in-ul vă permite să selectați tipul fișierelor media care vor fi deschise în fereastra modală.
Nu au existat deficiențe semnificative în funcționarea plug-in-ului. Dar dacă "lightbox-ul dvs." este încorporat în Template-ul VI, există o mare probabilitate de conflict și se poate dovedi că Easy FancyBox pentru WordPress nu funcționează. În acest caz, este logic să contactați asistența pentru clienți.
Integrarea bibliotecii FancyBox în Wordpress fără pluginuri
Dacă sunteți sensibil la problema îmbunătățirii utilizabilității site-ului. apoi sigur că vă îngrijorați de viteza blogului dvs. Și știm că un număr mare de plug-in-uri pot încetini procesul de încărcare a paginilor. Prin urmare, în cele ce urmează, vom lua în considerare implementarea scriptului jQuery FancyBox pe WordPress fără un plug-in. Această metodă este recomandată pentru a fi utilizată în cazul în care sunteți familiarizat cu structura și editarea șablonului Wordpress și aveți experiență cu codul. În acest proces, pot exista conflicte cu alte scripturi tematice cauzate de includerea anumitor opțiuni. Soluția acestei probleme în fiecare caz individual va fi individuală, deci este dificil să anticipăm toate variantele în avans.
// Fancybox stylesheet. wp_enqueue_style ("stilul fancybox", get_template_directory_uri () ./fancybox/jquery.fancybox.css ', array (),' '); // scriptul Fancybox. wp_enqueue_script ('fancybox-script', get_template_directory_uri ()) ./fancybox/jquery.fancybox.js ', array (' jquery '),' ');
Apoi deschideți fișierul tematic header.php pentru editare și în locul capului apelul funcției FancyBox:
Articole similare
-
Fancybox for wordpress - plugin pentru creșterea imaginilor, note de blogger
-
Fancybox pentru wordpress configurație plugin, instrucțiuni detaliate
-
Ulogin - widget de autorizare prin rețelele sociale - pluginuri pentru wordpress
Trimiteți-le prietenilor: