Domača » Toolkit » Kako povečati slike, kot je Medium

    Kako povečati slike, kot je Medium

    Platforma za bloganje Medium uporablja a učinek povečave po meri na njihovih spletnih straneh. Ko uporabnik klikne sliko, se samodejno poveča v večjo velikost.

    To je odličen učinek in zagotovo edinstven za Medium, vendar nikoli ni bilo nekaj, kar bi lahko zlahka kopirali.

    Zdaj, z MediumLightbox skripta, je lažje kot kdajkoli prej. Ta skript JS je lahek in enostaven za dodajanje na katero koli spletno mesto ali spletni dnevnik.

    Če želite videti, kako to deluje, lahko obiščete demo stran v živo gostitelj Davide Calignano.

    Nekaj ​​časa je preizkusil točen prehod in učinek animacije po meri ustvarite zrcalno sliko povečave slike v mediju. Celotna knjižnica je napisano v čistem JavaScriptu, zato se ne zanaša na nobenega 3rd skripti, kot je jQuery.

    Boste morali vedeti malo JS, da ga ustanovi, vendar zagotovo ni treba biti strokovnjak.

    Vsaka slika lahko sprejme podatkov- * atributi za nastavitev višine in širine v polni velikosti, ki so vse dinamično iz vtičnika Lightbox. Nastavitvena koda je zelo preprosta in lahko samih slik, ali posodah, kot je

    element.

    Tu je enotni odrezek kode, ki ga potrebujete za zagon vtičnika:

     MediumLightbox ("lik.zoom-učinek"); 

    Znotraj funkcije boste mimo izbirnik za vse elemente (npr.

    ) z .učinek povečave razred. Ta razred je posebej opredeljeni v slogu sloga MediumLightbox, zato je najbolje, da to uporabite tudi na svoji strani.

    In ko je enkrat pripravljen, ste pripravljeni!

    V področju vsebine strani lahko vse slike ovijete v a

    z uporabo tega razreda. Samodejno bodo dobili ta priljubljeni učinek »klikni za povečavo« za namizne in mobilne uporabnike.

    Če želite prenesti kopijo tega skripta in začeti, obiščite glavno GitHub repo. Tukaj boste našli tudi dokumentacijo skupaj z odrezki kode kopirate lahko, da se hitro nastavite.