Jak powiększać obrazy, takie jak Medium

Platforma blogowania Medium używa niestandardowy efekt powiększania obrazu na swoich stronach bloga. Za każdym razem, gdy użytkownik kliknie obraz, zostanie automatycznie powiększony do większego rozmiaru.

To świetny efekt i na pewno wyjątkowy dla Medium, ale nigdy nie był czymś, co można łatwo skopiować.

Teraz z MediumLightbox skrypt, jest łatwiejszy niż kiedykolwiek. Ten skrypt JS jest lekki i łatwy do dodania do dowolnej witryny lub bloga.

Jeśli chcesz zobaczyć, jak to działa, możesz odwiedzić strona demonstracyjna na żywo gospodarzem jest twórca Davide Calignano.

Spędził trochę czasu przybijając dokładny efekt przejścia i animacji utworzyć lustrzane odbicie powiększenia obrazu Medium. Cała biblioteka jest napisane w czystym JavaScript, więc nie opiera się na żadnym 3^{r & D} skrypty imprezowe, takie jak jQuery.

Będziesz musiał znać trochę JS, aby go skonfigurować, ale na pewno nie musisz być ekspertem.

Każdy obraz może zabrać atrybuty danych * do ustawiania pełnej wysokości i szerokości, z których wszystkie są pociągany dynamicznie z wtyczki lightbox. Kod instalacyjny jest bardzo prosty i może skieruj zdjęcia na siebie, lub pojemniki takie jak

element.

Oto pojedynczy fragment kodu potrzebny do uruchomienia wtyczki:

 MediumLightbox ('figure.zoom-effect'); 

Wewnątrz funkcji będziesz przekazać selektor dla wszystkich elementów (np.

) z .efekt powiększenia klasa. Ta klasa jest specjalnie zdefiniowane w arkuszu stylów MediumLightbox, więc najlepiej użyć tego również na swojej stronie.

A kiedy już to skonfigurujesz, jesteś gotowy!

W obszarze zawartości strony możesz zawinąć wszystkie obrazy w

znacznik używający tej klasy. Będą automatycznie uzyskiwać ten ulubiony efekt średniego kliknięcia i powiększenia zarówno dla użytkowników komputerów stacjonarnych, jak i mobilnych.

Aby pobrać kopię tego skryptu i zacząć, po prostu odwiedź główne repozytorium GitHub. Tutaj również znajdziesz dokumentacja wraz z fragmentami kodu możesz skopiować, aby szybko skonfigurować.