Jak přiblížit snímky jako médium

Platforma blogů Medium používá a vlastní efekt zvětšení obrazu na svých stránkách blogu. Kdykoli uživatel klikne na obrázek, automaticky se zvětší na větší velikost.

Je to skvělý efekt a určitě jedinečný pro Medium, ale nikdy to nebylo možné snadno kopírovat.

Teď, s MediumLightbox skript, je to jednodušší než kdy jindy. Tento JS skript je lehký a snadno přidat do libovolné webové stránky nebo blog.

Pokud chcete vidět, jak to funguje, můžete navštívit stránku živá ukázka stránky hostil tvůrce Davide Calignano.

On strávil chvíli přibíjení přesný přechod a vlastní animace efekt vytvořte zrcadlový obraz zoomu Medium. Celá knihovna je napsaný v čistém JavaScriptu, takže se nespoléhá na žádné 3^rd stranické skripty, například jQuery.

Budete muset znát trochu JS, abyste ho nastavili, ale určitě nemusíte být odborníkem.

Každý obraz může mít Atributy data- * pro nastavení plné výšky a šířky, z nichž všechny jsou dynamicky z pluginu lightboxu. Instalační kód je velmi jednoduchý a může cílové obrazy samotné, nebo kontejnery jako

živel.

Zde je jeden útržek kódu, který potřebujete pro spuštění pluginu:

 MediumLightbox ('efekt efektu'); 

Uvnitř funkce, budete projít voličem pro všechny prvky (např.

) pomocí .efekt zoomu třída. Tato třída je specificky definováno v šabloně stylů MediumLightbox, takže je to nejlepší použít i na vaší stránce.

A jakmile je to nastaveno, jste všichni nastaveni!

V oblasti obsahu stránky můžete všechny obrázky zabalit do souboru

pomocí této třídy. Automaticky získají tento milovaný Medium click-to-zoom efekt pro uživatele stolních i mobilních sítí.

Chcete-li stáhnout kopii tohoto skriptu a začít, stačí navštívit hlavní repo GitHub. Zde najdete také dokumentaci spolu s úryvky kódu můžete kopírovat rychle nastavit.