Kuidas suumida pilte nagu keskmine

Blogging platvorm Medium kasutab a kohandatud pildi suumimise efekt oma blogilehekülgedel. Kui kasutaja klõpsab pildil, suurendab see automaatselt suuremat pilti.

See on suurepärane mõju ja kindlasti ainulaadne Mediumile, kuid seda ei saanud kunagi kopeerida.

Nüüd, koos MediumLightbox skript, see on lihtsam kui kunagi varem. See JS-skript on kerge ja kergesti lisatav mis tahes veebisaidile või blogile.

Kui soovite näha, kuidas see toimib, võite külastada live demo leht majutab looja Davide Calignano.

Ta veetis mõnda aega täpse ülemineku ja kohandatud animatsiooniefektiga luua keskmise pildi suumi peegelpilt. Kogu raamatukogu on kirjutatud puhtas JavaScriptis, nii et see ei tugine ühelegi 3-le^rd partei skriptid, näiteks jQuery.

Sa pead teadma väikest JS-i, et seda üles seada, kuid kindlasti ei pea te olema ekspert.

Iga pilt võib võtta andmete * atribuudid täissuuruses kõrguse ja laiuse seadistamiseks, mis kõik on tõmmatud dünaamiliselt valguskasti pluginast. Seadistuskood on väga lihtne ja võimalik sihtige pilte ise, või konteinerid nagu

element.

Siin on üks koodilõik, mis vajab plugina käivitamist:

 MediumLightbox (keskmine joonis) ('figure.zoom-effect'); 

Funktsiooni sees läbida valija kõigi elementide puhul (nt.

) koos .suum-efekt klassi. See klass on konkreetselt määratletud MediumLightboxi stiililehel, nii et see on parim, kui seda ka oma lehel kasutada.

Ja kui see on loodud, olete kõik seadistatud!

Lehekülje sisupiirkonnas saate kõik pildid mähkida a

selle klassi abil. Nad saavad selle armastatud keskmise suurusega kliki-suumi efekti automaatselt nii laua- kui mobiilikasutajatele.

Skripti koopia allalaadimiseks ja alustamiseks külastage lihtsalt GitHubi peamist repot. Siin leiad ka dokumentatsiooni koos koodilõigudega saate kiiresti kopeerida.