Share
Așa cum am promis în articolul meu precedent, aici este tutorialul privind crearea unei galerii din imaginile personalizate. Ca bonus, veți învăța cum să creați un plugin jQuery de bază pentru a prezenta imaginea de dimensiuni mai mari a miniaturii într-un mod mai atrăgător.
Dacă nu ați citit articolul meu despre dimensiunile personalizate ale imaginilor, citiți-l astfel încât să fie mai ușor să înțelegeți acest tutorial.
În funcție de aspectul temei dvs. și de sistemul de rețea pe care îl utilizează, puteți decide diferite dimensiuni de imagine pentru miniaturi. Înainte de a decide să vă gândiți la numărul de imagini pe care doriți să le aveți într-un rând, care este lățimea containerului în care vor fi afișate miniaturile, margini, garnituri etc..
Voi folosi un exemplu de 940 pixeli, cu 2 coloane (raportul 8/4), în cazul în care conținutul va fi de 620 de pixeli, iar bara laterală 300 de pixeli cu o margine stângă de 20 de pixeli. Zona de conținut și zona laterală a buclei vor avea o căptușeală interioară de 20 de pixeli. Acum, un pic de matematică: conținutul are o lățime de 620 pixeli, cu zăpadă de 20 de pixeli, lăsând 580 de pixeli pentru miniaturi; și afișând 5 miniaturi pe linie, fiecare având o margine dreaptă de 10 pixeli, astfel încât acestea să nu fie lipite împreună; A 5-a imagine în fiecare linie nu va avea o marjă dreaptă; miniaturile vor avea o lățime și o înălțime de 108px și vor fi tăiate.
Imaginea de dimensiune mai mare va avea o lățime maximă de 660 de pixeli și o înălțime de 660 de pixeli, va fi redimensionată proporțional fără decupare.
Aveți posibilitatea să alegeți dimensiunile care se potrivesc aspectului dvs., dacă decideți să schimbați dimensiunile care pot fi ușor regenerate (vezi postul anterior despre cum se face) și nu trebuie să fie în formă de pătrat.
Editați functions.php fișier astfel încât să arate ceva de genul:
Accentsconagua
add_action ('after_setup_theme', 'setup'); setarea funcției () // ... add_theme_support ('post-thumbnails'); add_image_size ('previzualizare', 108, 108, true); // miniatură add_image_size ('zoomed', 660, 600); // large // ... Inca inauntru functions.php adăugați metoda generate_thumbnail_list:
funcția generate_thumbnail_list ($ post_id = null) if ($ post_id == null) retur; $ images = get_posts (array ('numberposts' => -1, 'post_type' => 'attachment', 'post_mime_type' => 'image / jpeg, image / jpg, => $ post_id, 'orderby' => 'menu_order', 'comanda' => 'ASC', 'exclude' => get_post_thumbnail_id ($ post_id))); dacă (count ($ images)> 0) echo 'În Conținutul-single.php suna generate_thumbnail_list , prin care trece ID-ul postului ca parametru.
Imagini
Cele de mai sus vor scoate o listă neordonată, care conține legături către fișierele mai mari și imaginile miniatură.
Evident, miniaturile trebuie să fie în stil, altfel este doar o listă simplă de imagini. Adăugați următoarele la foaia dvs. de stil existentă sau creați unul nou și enquege-l:
.clar clar: ambele; .gallery list-style-type: none; umplutura: 0; marja: 0; .gallery li float: left; margine: 0 10px 10px 0; .gallery li: n-copil (5n) marginea-dreapta: 0; .gallery a float: left; cursor: pointer; text-decoration: nici unul; .gallery img float: left; frontieră: 0;
Acest lucru va pune imaginile una lângă alta, lăsând un spațiu în jurul lor.
În acest moment, faceți clic pe miniatură va deschide imaginea mare pe o pagină goală. Aceasta este o schimbare bună în cazul în care JavaScript este dezactivat.
Înainte de a scrie orice JavaScript, ar fi de dorit să știți cum va fi afișată imaginea mare. Iată ce am avut în minte:
Notă: toate acestea vor fi generate din pluginul jQuery. Aceasta este doar pentru a arăta procesul creației.
O acoperire transparentă pe partea de sus a întregului conținut, cu imaginea din mijloc și cu comenzile din colțul din dreapta sus. În timp ce imaginea se încarcă, se va afișa o rotire. În rădăcina corpului documentului va fi adăugat un div wrap, care va conține linkurile pentru navigare către următorul și precedentul, un link pentru a închide galeria și învelișul în jurul imaginii în care va fi încărcată imaginea. Acesta este codul HTML minimal care va fi folosit pentru galerie.
Înainte Înapoi
Adăugarea următorului stil va schița elementele de mai sus ca în imaginea de mai sus (sunt incluse comentarii pentru a explica părți care nu pot fi imediat evidente):
#zoom z-index: 99990; / * index ridicat, astfel încât să rămână pe partea de sus a tuturor celorlalte elemente * / poziție: fix; / * este fixat astfel încât dacă conținutul este derulat, acesta rămâne în același loc * / top: 0; stânga: 0; lățime: 100%; înălțime: 100%; / * creează un fundal transparent, astfel încât conținutul de sub acesta să fie vizibil, transparența poate fi ajustată * / background: rgba (0, 0, 0, 0.8); #zoom .content z-index: 99991; / * index mai mare, astfel încât imaginea va rămâne pe partea superioară a suprafeței * / poziție: absolută; / * începe poziționarea inițială: va fi centrat orizontal și vertical * / sus: 50%; stânga: 50%; lățime: 200px; înălțime: 200px; margine: -100px 0 0 -100px; / * pozitionarea finala * / / * un spinner animat ca fundal va fi vizibil in timp ce imaginea se incarca * / background: #ffffff url ('... /img/spinner.gif') nu-repeta 50% 50%; frontieră: 20px solid #ececec; umplutura: 0; #zoom img afișare: bloc; max-width: nici unul; fundal: #ececec; -moz-box-shadow: 2px 2px 5px rgba (0, 0, 0, 0.3); -webkit-box-shadow: 2px 2px 5px rgba (0, 0, 0, 0.3); box-shadow: 2px 2px 5px rgba (0, 0, 0, 0.4); #zoom .close z-index: 99993; / * index mai mare, astfel că închiderea va rămâne peste suprapunere și imagine * / poziție: absolută; top: 0; dreapta: 0; lățime: 49px; înălțime: 49px; cursor: pointer; fundal: adresa URL transparentă ("... /img/icons/close.png") nu-repeta 50% 50%; opacitate: 1; filtru: alfa (opacitate = 100); #zoom .precedent, #zoom .next z-index: 99992; / * index mai mare, astfel că închiderea va rămâne peste suprapunere și imagine * / poziție: absolută; top: 0; overflow: ascuns; afișare: bloc; lățime: 49px; înălțime: 49px; text-liniuță: 100%; #zoom .precedent dreapta: 100px; fundal: url ('... /img/icons/arrows.png') no-repeat 0 0; #zoom .next dreapta: 50px; fundal: url ('... /img/icons/arrows.png') nu-repeta 100% 0; #zoom .close: hover background-color: # da4f49; / * adaugă o nuanță roșie pe hover * / #zoom .precedent: hover, #zoom .next: hover background-color: # 0088cc; / * adaugă o nuanță albastră pe hover * / Rezultatul celor de mai sus:
Codul HTML de mai sus nu va fi necesar, acesta va fi generat cu JavaScript. Vor fi anexate evenimente pentru deschiderea, navigarea și închiderea galeriei. Navigarea și închiderea galeriei se pot face de la tastatură sau cu ajutorul mouse-ului.
Javascript de mai jos este, de asemenea, comentat pentru a explica ce se întâmplă:
(functie ($) $ .zoom = function () // adauga un wrapper galerii la corpul documentului $ ('body') append ('„); var zoomedIn = false, // un steag pentru a ști dacă galeria este deschisă sau nu zoom = $ ('zoom)', zoomContent = null, open = null; // configurarea funcției elementului imagine deschis () zoom.hide (); // ascundeți // adăugați elementele interioare, wrapper-ul de imagine, legăturile de închidere și navigare zoom.prepend ('„); zoom.prepend (“„); zoom.prepend ( 'Previous'); zoom.prepend ( 'Next'); zoomContent = $ ('# zoom .content'); // atașați evenimente la elementele adăugate $ ('# zoom .close') pe ('faceți clic', închideți); $ ('# zoom .precedent') la ("faceți clic pe", deschidereprecedentă); $ ('# zoom .next') pe ('click', openNext); // observați evenimentele tastaturii pentru navigare și închiderea galeriei $ (document) .keydown (funcție (eveniment) if (! open) return; if (event.which == 27) $ (' ) .click (); retur; dacă (event.which == 37) $ ('# zoom .previous'). ());)); dacă $ '' galerie li a ') length == 1) // adăugați clasa' zoom 'pentru o singură imagine, astfel încât linkurile de navigare să ascundă $ (' galerie li a ') [0] .addClass (' zoom '); // atașați observatorul evenimentului clic pentru a deschide imaginea $ ('. zoom, .gallery li a') pe ('faceți clic', deschideți); funcția deschisă (eveniment) event.preventDefault (); // a preveni deschiderea unei pagini goale cu imaginea var link = $ (this), src = link.attr ('href'), // a crea un obiect de imagine cu sursa din link-ul image = $ (new Image) .attr ('src', src) .hide (); dacă (! src) retur; $ ('# zoom .previous, #zoom .next'). arată (); dacă (link.hasClass ('zoom')) $ ('# zoom .previous, #zoom .next') hide (); // arăta galeria cu butoane de încărcare spinner, navigare și închidere dacă (! zoomedIn) zoomedIn = true; zoom.show (); // curățați și adăugați obiect de imagine pentru a încărca zoomContent.empty () prepend (imagine); // observer de eveniment pentru încărcarea imaginii, rendering () va fi // apelat în timp ce imaginea se încarcă imagine.load (render); open = link; funcția openPrevious (eveniment) event.preventDefault (); dacă (open.hasClass ('zoom')) return; var prev = open.parent ('li') prev (); dacă (prev.length == 0) prev = $ ("galerie li: ultim-child"); prev.children ('a') trigger ("clic"); funcția openNext (eveniment) event.preventDefault (); dacă (open.hasClass ('zoom')) return; var următor = deschis.parent ('li') next (); dacă (next.length == 0) next = $ ("galerie li: first-child"); next.children ('a') trigger ("clic"); funcția rendere () // dacă imaginea nu este complet încărcată nu face nimic dacă (! this.complete) return; var imagine = $ (aceasta); // daca imaginea are aceleasi dimensiuni ca galeria // arata doar ca imaginea sa nu fie animata daca (image.width () == zoomContent.width () && image.height () == zoomContent.height ()) Show (imagine); întoarcere; var borderWidth = parseInt (zoomContent.css ("borderLeftWidth")); // redimensionați galeria la dimensiunile imaginii înainte de a afișa imaginea zoomContent.animate (width: image.width (), height: image.height (), marginTop: - (image.height () / 2) - borderWidth , marginLeft: - (imagine.width () / 2) - borderWidth, 300, funcția () show (image);); afișarea funcției (imagine) image.fadeIn ('rapid'); functie close (eveniment) event.preventDefault (); zoomedIn = false; zoom.hide (); zoomContent.empty (); înființat(); ; ) (JQuery); După includerea pluginului de mai sus, inițializați-l adăugând apelul pluginului în generate_thumbnail_list metodă:
funcția generate_thumbnail_list ($ post_id = null) // ... dacă (count ($ images)> 0) // ... echo '„;
Un exemplu real de viață a modului în care funcționează și cum poate fi folosit: Zoom jQuery Galerie foto Plugin demo
get_the_ID ()get_posts ()get_post_thumbnail_id ()wp_get_attachment_image_src ()wp_get_attachment_image ()