Come ingrandire le immagini come medie
La piattaforma di blogging Medium utilizza a effetto zoom personalizzato sulle loro pagine del blog. Ogni volta che l'utente fa clic su un'immagine, verrà automaticamente ingrandita in dimensioni maggiori.
È un grande effetto e certamente unico per Medium, ma non è mai stato qualcosa che potrebbe facilmente essere copiato.
Ora, con il MediumLightbox sceneggiatura, è più facile che mai. Questo script JS è leggero e facile da aggiungere a qualsiasi sito Web o blog.
Se desideri vedere come funziona, puoi visitare il pagina demo dal vivo ospitato dal creatore Davide Calignano.
Ha passato un po 'di tempo a inchiodare l'esatta transizione e l'effetto dell'animazione personalizzata a creare un'immagine speculare dello zoom dell'immagine di Medium. L'intera biblioteca è scritto in puro JavaScript, quindi non si affida a nessun 3rd script di festa come jQuery.
Avrai bisogno di sapere un po 'di JS per configurarlo, ma certamente non hai bisogno di essere un esperto.
Ogni immagine può prendere dati- * attributi per impostare l'altezza e la larghezza di dimensioni normali, che sono tutti tirato dinamicamente dal plugin lightbox. Il codice di installazione è molto semplice e può indirizzare le immagini stesse, o contenitori come il
Ecco lo snippet di codice singolo necessario per eseguire il plug-in:
MediumLightbox ( 'figure.zoom-effetto');
Dentro la funzione, lo farai passare un selettore per tutti gli elementi (ad es. .zoom-effetto classe. Questa classe è specificamente definito nel foglio di stile di MediumLightbox, quindi è consigliabile utilizzarlo anche nella tua pagina.
E, una volta impostato, sei pronto!
Nell'area del contenuto della pagina, puoi avvolgere tutte le immagini in a
Per scaricare una copia di questo script e iniziare, visita il repository principale di GitHub. Qui, troverai anche documentazione insieme a frammenti di codice puoi copiare per essere impostato velocemente.
