Share
După ultimul meu tutorial în care v-am arătat cum să adăugați un cursor jQuery Responsabil la tema WordPress, am crezut că vă arăt cum să adăugați o casetă de lumină receptivă la site-ul dvs. WordPress.
Vom folosi pluginul fantasticBox jQuery (script) pentru a demonstra implementarea casetei lightbox, dar aceleași principii se pot aplica majorității scripturilor lightbox. Acest tutorial va fi predat în primul rând printr-un screencast de 15 minute, dar am inclus și câteva instrucțiuni scrise scurte.
Primul lucru pe care trebuie să-l facem este să descărcați cutie atragatoare de pe site-ul fancyBox. Vrem apoi să deschidem sursă , unde vom copia următoarele fișiere pe tema noastră (rețineți că folosim Tema Twenty Twelve implicită în WordPress):
Cel mai bine este să rămâi organizat, așa că hai să creăm un dosar în tema noastră inc director numit cutie de lumină, și acolo vom crea trei dosare noi: css, js și imagini. În acest moment trebuie de asemenea să creați un fișier numit lightbox.js (nu vă îngrijorați încă). Apoi trebuie să împărțim fișierele de mai sus în locațiile corespunzătoare, așa că va arăta ca imaginea de mai jos.
Va trebui Editați | × căile spre imagini în jquery.fancybox.css așa că se potrivește noii noastre structuri de fișiere. Puteți face acest lucru efectuând o căutare și înlocuiți-o pentru:
URL-ul (“ cu url ('... / images /
Acum că avem dosarul de mai sus umplut cu toate fișierele necesare, trebuie să le încărcăm de fapt! Deschide-ți functions.php fișier și adăugați următoarele:
Accentsconagua
// Enqueue Scripts / Styles pentru functia noastra Lightbox twentytwelve_add_lightbox () wp_enqueue_script ('fancybox', get_template_directory_uri () '/inc/lightbox/js/jquery.fancybox.pack.js', array ('jquery'), Adevărat ); wp_enqueue_script ('lightbox', 'get_template_directory_uri'). '/inc/lightbox/js/lightbox.js', array ('fancybox'), false, true); wp_enqueue_style ('lightbox-style', get_template_directory_uri (). '/inc/lightbox/css/jquery.fancybox.css'); add_action ('wp_enqueue_scripts', 'twentytwelve_add_lightbox'); Ceea ce am făcut mai sus este enqueued script-ul FancyBox miniaturi (și de dependență, Wordpress inclus jQuery bibliotecă), noul nostru lightbox.js dosar, precum și foaia de stil FancyBox. Prea ușor!
Sa nu uiti asta lightbox.js fișier creat mai devreme? Este timpul să-l deschideți și să-l umpleți cu niște jQuery frumoase! În ecranul de mai sus i-am arătat fiecare exemplar separat, astfel încât să înțelegeți mai bine cum a funcționat jQuery, dar mai jos este combinat codul. Copiați această opțiune la lightbox.js fişier:
(functie ($) // Initializeaza Lightbox-ul pentru orice link cu clasa 'fancybox' $ (".fancycybox") fancybox (); // Initializeaza Lightbox automat pentru orice link catre imagini cu extensii .jpg, .jpeg , .png sau .gif $ ("a [href $ = '. jpg'], un [href $ = '.png'], un [href $ = "Iniționați caseta Lightbox și adăugați rel =" galerie "la toate imaginile galeriei atunci când galeria este configurată folosind [gallery link =" file "], astfel încât o Galerie Lightbox există $ (". galerie a [href $ = '. jpg'],. galerie a [href $ = '. pg'],. galerie a [href $ = '. ") .attr ('rel', 'galerie') fancybox (); // Inițializați caseta Lightbox pentru toate legăturile cu clasa" video "și asigurați suport îmbunătățit pentru încorporarea video $ (" : 800, maxHeight: 600, fitToView: false, lățimea: '70% ', înălțimea: '70%', autoSize: false, closeClick: false, openEffect: 'none', closeEffect: 'none'); jQuery); Bacsis: Ar trebui doar să includeți cu adevărat părțile din codul de mai sus de care aveți nevoie. Am inclus doar totul, astfel încât să puteți vedea diferitele opțiuni pentru inițializarea casetei lightbox. 
Acum puteți folosi Lightbox-ul! Cu codul de mai sus este setat să se adauge automat o casetă lightbox pentru toate link-urile către fișierele imagine cu extensii .jpg, .jpeg, .png sau .gif. Deci, următorul fragment de cod va produce o casetă lightbox:
Galerii pentru galerie de lumină:
Puteți crea, de asemenea, o "galerie de casete luminoase" prin adăugarea aceluiași rel atribuiți mai multor link-uri, cum ar fi:
Cu toate acestea, aceeași galerie de casete luminoase poate fi realizată și prin inserarea în postarea sau pagina dvs. a unei vechi Galerie vechi Wordpress. Doar asigurați-vă că ați conectat miniaturile la fișierele de imagine cum ar fi:
Video Lightbox:
De asemenea, este inclusă și suportul video pentru casete video, care poate fi realizat prin conectarea la URL-ul de încorporare IFRAME al unui videoclip (găsiți-l prin vizionarea codului de încorporare a unui videoclip de la un serviciu cum ar fi YouTube sau Vimeo) și oferindu-i o clasă de video și fancybox.iframe, ca astfel:
Faceți clic pe acesta pentru a deschide un videoclip de la Vimeo!
IFRAME Lightbox:
În plus față de IFRAME-urile din casetele de lumină video puteți încorpora alte IFRAME, cum ar fi Google Maps, prin includerea acelorași video și fancybox.iframe clase, cum ar fi:
Hărți Google (IFRAME)
Subtitrări:
După cum puteți vedea în videoclip, unele dintre imaginile pe care le-am introdus automat și au aplicat o casetă lightbox pentru a avea subtitrări. Acestea sunt determinate de titlu atributul link-ului. De exemplu, vedeți subtitrările stabilite în următoarea bucată de cod:
Faceți clic pentru o imagine!
Rețineți că FancyBox este licențiat sub licență Creative Commons Attribution-NonCommercial 3.0, ceea ce înseamnă că îl puteți folosi liber în non-comercial funcționează cu atribuire, dar trebuie să plătiți o taxă de licență pentru ao utiliza comercial proiecte. Puteți citi mai multe despre licență aici.
Dacă descărcați fișierele sursă de mai sus, vă rugăm să rețineți că după plasarea în tema inc directorul, veți nevoie pentru a adăuga codul găsit în pasul 2 la dvs. functions.php fișier, care enquies jQuery și toate fișierele fancyBox.
Alternativ, am transformat și asta într-un gratuit plugin pe care le puteți descărca pe site-ul meu personal.
Faceți clic pentru o imagine!