Share
Come promesso nel mio precedente articolo, ecco il tutorial sulla creazione di una galleria dalle immagini di dimensioni personalizzate. Come bonus imparerai come creare un plugin jQuery di base per presentare l'immagine più grande della miniatura in un modo più accattivante.
Se non hai letto il mio precedente articolo sulle dimensioni delle immagini personalizzate, ti preghiamo di leggerlo in modo che sia più facile capire questo tutorial.
A seconda del layout del tema e del sistema di griglia utilizzato, è possibile decidere le dimensioni dell'immagine per le anteprime. Prima di decidere, pensa a quante immagini vuoi avere in una fila, qual è la larghezza del contenitore in cui verranno visualizzate le miniature, i margini, i paddings, ecc..
Userò un esempio di 940 pixel di larghezza, 2 colonne (8/4 ratio), dove il contenuto sarà di 620 pixel e la barra laterale di 300 pixel con un margine sinistro di 20 pixel. L'area del contenuto e l'area della barra laterale avranno una spaziatura interna di 20 pixel. Ora un po 'di matematica: il contenuto è largo 620px con padding di 20px, lasciando 580px per le miniature; e visualizzazione di 5 miniature per linea, ciascuna con un margine destro di 10 px in modo che non siano incollate insieme; La quinta immagine in ogni riga non avrà un margine destro; le miniature saranno 108 px in larghezza e altezza e ritagliate.
L'immagine di dimensioni maggiori sarà massima di 660 px di larghezza e 660 px di altezza, verrà ridimensionata proporzionalmente senza ritaglio.
Puoi scegliere qualsiasi misura adatta al tuo layout, se decidi di cambiare le dimensioni possono essere facilmente rigenerate (vedi il post precedente su come farlo), e non devono essere quadrate.
Modifica il functions.php file in modo che assomigli a questo:
Accentsconagua
add_action ('after_setup_theme', 'setup'); function setup () // ... add_theme_support ('post-thumbnails'); add_image_size ('preview', 108, 108, true); // thumbnail add_image_size ('zoomed', 660, 600); // grande //… Ancora dentro functions.php aggiungi il metodo generate_thumbnail_list:
function generate_thumbnail_list ($ post_id = null) if ($ post_id == null) return; $ images = get_posts (array ('numberposts' => -1, 'post_type' => 'attachment', 'post_mime_type' => 'image / jpeg, image / jpg, image / png, image / gif', 'post_parent' => $ post_id, 'orderby' => 'menu_order', 'order' => 'ASC', 'exclude' => get_post_thumbnail_id ($ post_id))); if (count ($ images)> 0) echo 'Nel content-single.php chiama il generate_thumbnail_list metodo, passando l'ID del post come parametro.
immagini
Quanto sopra mostrerà un elenco non ordinato, contenente collegamenti ai file più grandi e alle immagini in miniatura.
Ovviamente le miniature devono essere stilizzate, altrimenti è solo una semplice lista di immagini. Aggiungi quanto segue al tuo foglio di stile esistente o creane uno nuovo e accodalo:
.chiaro chiaro: entrambi; .gallery list-style-type: none; padding: 0; margine: 0; .gallery li float: left; margine: 0 10px 10px 0; .gallery li: nth-child (5n) margin-right: 0; .gallery a float: left; cursore: puntatore; decorazione del testo: nessuna; .gallery img float: left; confine: 0;
Ciò metterà le immagini una accanto all'altra, lasciando uno spazio intorno a loro.
A questo punto facendo clic sulla miniatura si aprirà l'immagine grande su una pagina vuota. Questo è un buon ripiego nel caso in cui JavaScript sia disabilitato.
Prima di scrivere qualsiasi JavaScript sarebbe desiderabile sapere come verrà visualizzata l'immagine grande. Ecco cosa avevo in mente:
Nota: tutto questo verrà generato dal plugin jQuery. Questo è solo per mostrare il processo di creazione.
Una sovrapposizione trasparente su tutti i contenuti, con l'immagine nel mezzo e i controlli nell'angolo in alto a destra. Mentre l'immagine si sta caricando ci sarà una proiezione di spinner. Nella radice del corpo del documento verrà aggiunto un div wrapper, che conterrà i collegamenti per la navigazione al successivo e precedente, un link per chiudere la galleria e il wrapper attorno all'immagine in cui verrà caricata l'immagine. Questo è il codice HTML minimo che verrà utilizzato per la galleria.
Successivo Precedente
Aggiungendo il seguente stile si modellano gli elementi di cui sopra come nell'immagine sopra (i commenti sono inclusi per spiegare le parti che potrebbero non essere immediatamente evidenti):
#zoom z-index: 99990; / * indice elevato in modo che rimanga in cima a tutti gli altri elementi * / position: fixed; / * è fisso, quindi se il contenuto viene fatto scorrere, rimane nello stesso punto * / top: 0; a sinistra: 0; larghezza: 100%; altezza: 100%; / * crea uno sfondo trasparente, quindi il contenuto sottostante sarà visibile, la trasparenza può essere regolata * / background: rgba (0, 0, 0, 0.8); #zoom .content z-index: 99991; / * indice superiore in modo che l'immagine rimanga sopra l'overlay * / position: absolute; / * inizia il posizionamento iniziale: sarà centrato orizzontalmente e verticalmente * / superiore: 50%; a sinistra: 50%; larghezza: 200 px; altezza: 200 px; margine: -100px 0 0 -100px; / * posizionamento finale * / / * uno spinner animato come sfondo sarà visibile mentre l'immagine sta caricando * / background: #ffffff url ('... /img/spinner.gif') no-repeat 50% 50%; border: 20px solid #ececec; padding: 0; #zoom img display: block; larghezza massima: nessuna; sfondo: #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; / * indice superiore in modo che la chiusura rimanga sopra la sovrapposizione e l'immagine * / posizione: assoluta; inizio: 0; a destra: 0; larghezza: 49 px; altezza: 49 px; cursore: puntatore; background: transparent url ('/img/icons/close.png') no-repeat 50% 50%; opacità: 1; filtro: alfa (opacità = 100); #zoom .previous, #zoom .next z-index: 99992; / * indice superiore in modo che la chiusura rimanga sopra la sovrapposizione e l'immagine * / posizione: assoluta; inizio: 0; overflow: nascosto; blocco di visualizzazione; larghezza: 49 px; altezza: 49 px; text-indent: 100%; #zoom .previous right: 100px; background: url ('... /img/icons/arrows.png') no-repeat 0 0; #zoom .next right: 50px; background: url ('... /img/icons/arrows.png') no-repeat 100% 0; #zoom .close: hover background-color: # da4f49; / * aggiunge una tinta rossa al passaggio del mouse * / #zoom. precedente: hover, #zoom .next: hover background-color: # 0088cc; / * aggiunge una tinta blu al passaggio del mouse * / Il risultato di quanto sopra:
Il codice HTML sopra non sarà necessario, verrà generato con JavaScript. Gli eventi saranno allegati per l'apertura, la navigazione e la chiusura della galleria. La navigazione e la chiusura della galleria possono essere eseguite dalla tastiera o usando il mouse.
Il JavaScript qui sotto è anche commentato per spiegare cosa sta succedendo:
(function ($) $ .zoom = function () // aggiungi un wrapper della galleria al corpo del documento $ ('body'). append (''); var zoomedIn = false, // un flag per sapere se la galleria è aperta o no zoom = $ ('# zoom'), zoomContent = null, opened = null; // la funzione dell'elemento immagine aperta setup () zoom.hide (); // nascondi // aggiungi gli elementi interni, il wrapper dell'immagine, i link di chiusura e di navigazione zoom.prepend (''); zoom.prepend (''); zoom.prepend ( 'precedente'); zoom.prepend ( 'Avanti'); zoomContent = $ ('# zoom .content'); // associa eventi agli elementi aggiunti $ ('# zoom .close'). on ('fai clic', chiudi); $ ('# zoom .previous'). on ('click', openPrevious); $ ('# zoom .next'). on ('click', openNext); // osserva gli eventi della tastiera per la navigazione e chiude la galleria $ (document) .keydown (function (event) if (! opened) return; if (event.which == 27) $ ('# zoom .close' ) .click (); return; if (event.which == 37) $ ('# zoom .previous'). click (); return; if (event.which == 39) $ ('# zoom .next '). click (); return; return;); if ($ ('. galleria li a'). length == 1) // aggiungi la classe 'zoom' per singola immagine in modo che i link di navigazione nascondano $ ('. gallery li a') [0] .addClass (' zoom '); // allegare click event observer per aprire l'immagine $ ('. zoom, .gallery li a'). on ('click', apri); function open (event) event.preventDefault (); // impedisce l'apertura di una pagina vuota con l'immagine var link = $ (this), src = link.attr ('href'), // crea un oggetto immagine con l'origine dal link image = $ (new Image ()) .attr ('src', src) .hide (); se (! src) return; $ ('# zoom. precedente, #zoom .next'). show (); if (link.hasClass ('zoom')) $ ('# zoom. precedente, #zoom .next'). hide (); // mostra la galleria con spinner di caricamento, navigazione e pulsanti di chiusura se (! zoomedIn) zoomedIn = true; zoom.show (); // pulisci e aggiungi l'oggetto immagine per caricare zoomContent.empty (). prepend (image); // event observer per il caricamento dell'immagine, render () sarà // chiamato mentre l'immagine sta caricando image.load (render); aperto = collegamento; function openPrevious (event) event.preventDefault (); if (opened.hasClass ('zoom')) return; var prev = opened.parent ('li'). prev (); if (prev.length == 0) prev = $ ('. gallery li: last-child'); prev.children ('a'). trigger ('click'); function openNext (event) event.preventDefault (); if (opened.hasClass ('zoom')) return; var next = opened.parent ('li'). next (); if (next.length == 0) next = $ ('. gallery li: first-child'); next.children ('a'). trigger ('click'); function render () // se l'immagine non è completamente caricata non fare nulla se (! this.complete) return; var image = $ (this); // se l'immagine ha le stesse dimensioni della galleria // mostra solo l'immagine non animare se (image.width () == zoomContent.width () && image.height () == zoomContent.height ()) mostra (immagine); ritorno; var borderWidth = parseInt (zoomContent.css ('borderLeftWidth')); // ridimensiona la galleria alle dimensioni dell'immagine prima // che visualizza l'immagine zoomContenuto.animale (larghezza: image.width (), altezza: image.height (), marginTop: - (image.height () / 2) - borderWidth , marginLeft: - (image.width () / 2) - borderWidth, 300, function () show (image);); function show (image) image.fadeIn ('veloce'); function close (event) event.preventDefault (); zoomedIn = falso; zoom.hide (); zoomContent.empty (); impostare(); ; ) (JQuery); Dopo aver incluso il plug-in di sopra, inizializzalo aggiungendo la chiamata del plugin nel generate_thumbnail_list metodo:
function generate_thumbnail_list ($ post_id = null) // ... if (count ($ images)> 0) // ... echo '';
Un vero esempio di come funziona e come può essere usato: Zoom jQuery Photo Gallery Plugin demo
get_the_ID ()get_posts ()get_post_thumbnail_id ()wp_get_attachment_image_src ()wp_get_attachment_image ()