Ako zväčšiť obrázky ako stredné
Blogová platforma Medium používa a vlastný efekt zväčšenia obrazu na svojich blogových stránkach. Kedykoľvek používateľ klikne na obrázok, automaticky sa zväčší do väčšej veľkosti.
Je to skvelý efekt a určite jedinečný pre stredné, ale nikdy to nebolo možné ľahko kopírovať.
Teraz, s MediumLightbox skript, je to jednoduchšie ako kedykoľvek predtým. Tento skript JS je ľahký a ľahko sa pridáva do ľubovoľnej webovej stránky alebo blogu.
Ak by ste chceli vidieť, ako to funguje, môžete navštíviť živá demo stránka usadený tvorcom Davide Calignano.
Strávil chvíľu, kým sa priblížil presný prechod a vlastný efekt animácie vytvorte zrkadlový obraz priblíženia obrazu od spoločnosti Medium. Celá knižnica je napísaný v čistom jazyku JavaScript, takže sa nespolieha na žiadne 3rd ako napríklad jQuery.
Budete potrebovať vedieť trochu JS, aby ste ho nastavili, ale rozhodne nemusíte byť odborníkom.
Každý obrázok môže trvať atribúty data * na nastavenie plnej veľkosti a šírky, ktoré sú všetky vytiahol dynamicky z lightbox plugin. Nastavovací kód je veľmi jednoduchý a môže zacielenie na samotné obrázky, alebo kontajnery ako napr
Tu je útržok s jedným kódom, ktorý potrebujete na spustenie pluginu:
MediumLightbox ( 'figure.zoom-efekt');
Vo vnútri funkcie budete prejdite voličom pre všetky prvky (napr. .zoom efekt trieda. Táto trieda je špecificky definované v štýle s nástrojmi MediumLightbox, takže je to najlepšie použiť aj na svojej stránke.
A akonáhle sa to nastaví, všetci ste nastavený!
V oblasti s obsahom stránky môžete všetky obrázky zabaliť do a
Ak chcete prevziať kópiu tohto skriptu a začať, stačí navštíviť hlavné repo GitHub. Nájdete tu tiež dokumentáciu spolu s úryvkami kódu môžete skopírovať, aby ste sa nastavili rýchlo.
