I migliori CSS open source e didascalie di immagini jQuery

L'uso delle didascalie delle immagini all'interno dell'HTML è una tradizione di lunga data tra gli sviluppatori web. Tipicamente questo coinvolge gli elementi <figure> e <figcaption> , oltre ad alcuni stili CSS aggiuntivi. A causa del grande movimento open source, possiamo trovare ancora più ottimi esempi di plug-in e script di avvio per creare queste didascalie di immagini nei tuoi progetti.

Voglio presentare una piccola raccolta di soluzioni CSS e jQuery per creare didascalie di immagini HTML. Queste soluzioni variano notevolmente nei loro metodi e scopo, ma tutte meritano di essere prese in considerazione. Alcuni sviluppatori devono implementare uno script in WordPress o Joomla!, mentre altri possono utilizzare HTML statico. Spero che questa raccolta offrirà un punto di partenza per la ricerca dell'argomento e la scelta di una base di codice per didascalie dell'immagine che funzioni perfettamente per le proprie esigenze.

Didascalie delle immagini CSS

Costruire le didascalie delle immagini con gli effetti CSS può essere difficile. A volte richiederà hack del browser e alcune sintassi extra che non riconosci. Ma mostra anche quanto l'attuale settore del web design sia avanzato in un breve periodo di tempo.

Questi esempi sono semplicemente le migliori soluzioni che ho trovato che forniscono un effetto didascalia dell'immagine senza interruzioni sviluppato su proprietà CSS2 e animazioni di transizione CSS.

Etichetta.css

Voglio iniziare introducendo label.css come una delle migliori librerie di didascalie di immagini CSS. Ciò ti consente di aggiungere i nomi delle classi alle immagini con didascalie che verranno quindi aggiornate nell'HTML. Puoi forzare la visualizzazione delle didascalie in qualsiasi punto dell'immagine, anche negli angoli.

Inoltre, la libreria label.css rende facile nascondere i sottotitoli finché l'utente non passa il mouse sopra un'immagine. Questa tecnica è ottima perché a volte vorrai che i sottotitoli vengano visualizzati come testo statico sulla pagina, mentre altre volte gli effetti di animazione nascosti sono più importanti.

Didascalie delle immagini di Hongkiat

Quello che mi piace di più di questo articolo di Hongkiat è che le varie didascalie delle immagini saranno tutte implementate utilizzando diverse tecniche CSS. Sono tutti accoppiati in un'unica grande galleria di didascalie e puoi scegliere le tue animazioni preferite per creare un'interfaccia nuova di zecca. I codici sono stati tutti testati all'interno dei browser moderni e supportano tutti i principali prefissi CSS.

Tuttavia, il problema più grande che alcuni utenti avranno con questo script è che non segue la struttura HTML di figure/figcaption. Tutto il contenuto della didascalia è contenuto all'interno di un intervallo all'interno di un contenitore div. Il che ovviamente rende ancora perfettamente perfetto, ma non contrassegna il tipo esatto di contenuto. Ma ci vogliono solo 5-10 minuti di aggiornamento degli elementi per farlo funzionare in una struttura più formattata. Guarda la demo dal vivo per vedere queste didascalie in azione.

Didascalie animate HTML5

L'esempio di figcaption HTML5 di Coalmarch è un tutorial di didascalia di immagini CSS meravigliosamente semplice. Puoi seguire i passaggi in pochi minuti e avere un layout brillante che mostra i sottotitoli nascosti al passaggio del mouse. Lo script stesso include una piccola quantità di jQuery, ma è completamente plausibile sostituirlo e utilizzare invece gli effetti di transizione CSS.

Didascalie delle immagini a scorrimento

Il blog CSS-Tricks è molto noto nella comunità del web design. Il loro tutorial sulla creazione di didascalie di immagini scorrevoli è stato testato in numerosi browser e funziona perfettamente. Sono rimasto davvero colpito da questa dimostrazione, non solo per gli effetti, ma anche per la sintassi HTML standard. Gli elementi figura e figcaption non sono solo impliciti per buona misura. Serve per aiutare il browser a differenziare il contesto tra i vari elementi della pagina. Dai un'occhiata alla demo dal vivo e guarda tu stesso questo effetto.

jQuery Didascalie delle immagini

Il più grande vantaggio dell'utilizzo di jQuery è una percentuale molto più alta di supporto del browser. Chiunque abbia abilitato JavaScript dovrebbe visualizzare le didascalie delle immagini esattamente come qualsiasi altro browser. CSS è semplicemente più semplice perché alcuni sviluppatori preferirebbero non entrare nello scripting. Ma queste soluzioni sono altrettanto importanti e contribuiscono notevolmente all'esperienza del frontend.

Didascalia.js

Ho appena trovato Caption.js poco fa e questa libreria si è distinta come un'ottima fonte per gli sviluppatori web. Lo script indirizzerà le immagini in base al tuo selettore jQuery (classi, ID, ecc.) E includerà automaticamente gli elementi figure e figcaption. Questo è fondamentale perché il rendering della pagina finale verrà visualizzato correttamente, insieme all'aiuto di alcuni posizionamenti CSS. Caption.js è open source e gratuito per contribuire o scaricare da Github.

jQuery.imageCaption

Ora direi che jQuery.imageCaption è la soluzione perfetta per gli sviluppatori che eseguono un motore CMS. Questo plugin è semplicissimo da personalizzare ed estrae rapidamente le didascalie in base al testo alternativo dell'immagine. Allo stesso modo questo renderà gli elementi figura e figcaption, il che è ottimo per i vantaggi SEO.

Chiamando la funzione imageCaption() non è necessario passare alcun parametro nella chiamata. Questo verrà comunque visualizzato correttamente sulla pagina e puoi applicarlo a qualsiasi post del blog di WordPress. Allo stesso modo, tutte le classi aggiunte all'elemento img verranno trasferite all'elemento <figure> contenente, il che significa che hai molto più controllo tramite CSS.

Didascalia

Captionate è sicuramente un progetto open source sottovalutato a causa di tutte le altre soluzioni disponibili. È stato sviluppato da North Krimsly per l'uso in vari motori CMS. Puoi trovare una guida tutorial che spiega il processo per implementare Captionate nel tuo sito web.

Fondamentalmente scriverai un elemento img HTML5 con la classe .caption e questo verrà raccolto dallo script jQuery. Il testo dell'attributo alt viene quindi trasferito in un elemento figcaption e scritto nell'HTML. Scorri la pagina di esempio e puoi vedere che la sintassi dei sottotitoli è piuttosto minimalista rispetto ad altre soluzioni.

HCaptions

Approfondindo questo esempio finale, penso che HCaptions possa contenere uno spettro più ampio delle sole immagini. Questo plugin jQuery è stato sviluppato per gestire tutti i contenuti dei sottotitoli che possono essere visualizzati in HTML. Dai un'occhiata alla pagina della demo dal vivo e vedrai una bella raccolta di esempi. Allo stesso modo le varie opzioni consentono di controllare la velocità e il posizionamento di ogni didascalia. Esistono alcune soluzioni migliori per la gestione esclusiva delle immagini HTML, ma il plug-in HCaptions ha uno scopo eccezionale per sottotitolare altri elementi standard della pagina Web.

Chiusura

Potresti essere sorpreso di quanto possano essere pieni di risorse questi script. E quando utilizzi codice HTML5 valido, Google offre un'opportunità ancora migliore per eseguire la scansione delle tue pagine e quindi indicizzare il contesto correlato. Se ho ignorato qualsiasi fantastico script per i sottotitoli delle immagini, condividilo con noi nell'area di discussione del post.