Buna ziua programatori incepatori.
În acest articol, vom face o opțiune de creștere a imaginii prin clic pe mouse.
Nu mă voi înșela dacă presupun că aceasta este una dintre cele mai căutate opțiuni pentru proprietarii de site-uri și există multe modalități de a le pune în aplicare.
Pentru cei care nu sunt absolut familiarizați cu limbile de programare și structura site-ului există o mulțime de plug-in-uri, dar acest lucru nu este calea noastră.
Axiom - cu cât mai puține plug-in-uri, cu atât mai bine.
Pentru cei care știu ce fișiere de șabloane sunt și cum să le adauge ceva, există un script pentru mărirea imaginilor adaptate la WordPress.
Puteți vedea dezvoltarea inițială aici. iar în acest articol adăugăm designul și legarea la șablon.
Deci, avem un cod de imagine html familiar tuturor utilizatorilor WordPress descărcați de către încărcătorul de imagini CMS.
În această etichetă, adăugați un cursor la o lupă cu un plus și un handler de evenimente onClik cu un nume de funcție care va crește și micșora imaginea.
HTML este gata, acum vom scrie scenariul.
Aici este un program atât de mic, simplu, dar foarte util.
Acum, să vedem cum să o implementăm pe WordPress.
În eticheta de script, adăugați atributul async pentru încărcarea asincronă și inserați scriptul în fișierul header.php, înainte de eticheta de închidere
Apoi, așa cum am spus mai sus, în codul imaginii descărcate, adăugăm cursorul și evenimentul onclick
Verificăm cum funcționează.
Dezavantajul acestui script este că acesta este legat de lățimea imaginii.
Deci, va funcționa corect cu imagini cu aceeași lățime, adică setările din variabila w pot fi făcute doar la o anumită dimensiune + - 20px.
De exemplu, pentru toate fotografiile având o lățime de 200px, puteți atribui setarea unei creșteri de până la 400 de pixeli.
Pentru imaginile cu o lățime diferită de mai mult de 20-30 pixeli, va trebui să modificați setările sau să adăugați un alt script cu un alt nume de funcție.
Vă urez succes creativ.
Și acum, ce-i mai interesant?
Articole similare
Trimiteți-le prietenilor: