Măriți imaginea când faceți clic pe html. Script pentru a mări imaginile în WordPress. Instalarea unui script pentru a mări imaginile

Desigur, există multe modalități de a mări imaginile. Și folosește în principal aplicații de scripturi și pluginuri. După părerea mea, astfel de metode sunt justificate în cazul resurselor cu un număr mare de fotografii sau orice imagini. Blogul meu nu este asa. Și, ca de obicei, merg pe calea celei mai mici investiții de timp, cunoștințe și resurse a site-ului meu. Îți propun o modalitate de a crește...

Te-ar putea interesa și:

Cum să faci umbră text în 5 minute

Bună dragă cititoare a blogului meu. În acest articol, veți învăța cum să creați o umbră de text folosind stiluri CSS și cod html în 5 minute.

Cum se creează butoane sus-jos pentru un site web

Acest articol este o continuare a articolului despre cum să creați un buton pentru un site web.

Cum să eliminați o postare de pe pagina de pornire folosind cod

Bună dragă cititoare a blogului meu. Era nevoie să ascund unele dintre articole de pe pagina principală. Nu îl eliminați deloc de la accesul cititorilor, ci eliminați...

Eliminarea intrărilor de categorie din pagina principală și RSS

Continuăm să îmbunătățim funcționalitatea și aspectul site-ului. Eliminam intrările inutile din pagina principală și RSS.

Pesmet pe wordpress

Salutare tuturor site-ului. Continuăm să ne îmbunătățim blogurile pentru a face bani. Cred că nu este un secret pentru nimeni că joacă un rol uriaș pe site. Desigur, nu toată lumea înțelege cum și după ce oră încep să influențeze, dar adevărul rămâne. Pentru a îmbunătăți acești factori, trebuie să îmbunătățim capacitatea de utilizare a site-ului: adăugați, îmbunătățiți designul, faceți-l atractiv și simplu. Faceți prelucrarea corectă a imaginilor de pe site. Mulți ar dori să știe răspunsul despre cum să faci o poză pe site când dau clic pe care a fost mărită. Această creștere este implementată pe site-ul meu. Sunteți de acord suficient de plăcut încât să puteți mări imaginile, să vedeți toată frumusețea pe tot ecranul.

Astăzi voi încerca să vă dezvălui acest secret al măririi. În general, o imagine poate fi mărită prin mai multe acțiuni:

• De exemplu, îl puteți mări trecând butonul mouse-ului
• A doua opțiune ar fi să măriți când este apăsat.

Desigur, dacă utilizați WordPress, atunci cea mai simplă și mai ușoară opțiune ar fi să căutați un șablon cu funcția de care avem nevoie, credeți-mă că acum există un număr mare de astfel de șabloane pe Internet. Deci, în 95 la sută din cazuri, veți găsi exact un șablon cu o imagine mărită. Dar dacă vă place această temă specială și doriți să măriți imaginea doar pe ea. Sau chiar scrii primul tău site pe o bucată de html, de care mă îndoiesc foarte mult, desigur.

Conectam scripturi Java pentru a mări imaginea

Rezultatul final va fi o imagine mărită, după tip. Bine, toate acestea sunt filozofie, pentru a mări imaginea, trebuie să conectăm biblioteca jQuery. Nu-mi amintesc, dar se pare că într-o lecție am scris despre această bibliotecă, dar dacă ai uitat, îți reamintesc. Pentru a conecta biblioteca trebuie site-ul introduce două coduri.

Trebuie înțeles că există o mulțime de biblioteci jQuery și în diferite cazuri sunt conectate biblioteci diferite.

Dacă vă scrieți site-ul în html, atunci pentru a insera o imagine veți avea nevoie de acest cod

Vă rugăm să rețineți că, în acest caz, va trebui să vă puneți imaginea în folderul imagini și să specificați numele imaginii. Nu uitați că fișierele bibliotecii de scripturi Java ar trebui să fie localizate în același loc cu pagina principală a site-ului, altfel scrieți o cale diferită pentru ele. Puteți descărca biblioteca de fișiere pentru a mări imaginea de pe site. Ei bine, și cel mai important acum, dacă doriți să vă măriți imaginea, adăugați-i următoarele proprietăți.

Salutări tuturor cititorilor site-ului blogului. Pe blogul meu, coloana cu articole publicate nu este restrânsă. Capturile de ecran și imaginile pot fi plasate în dimensiuni mari, astfel încât totul să fie clar vizibil pe ele. Și totuși, zilele trecute, începând să scriu o recenzie a programului Majento PositionMeter, creat pentru a verifica poziția unui site în motoarele de căutare, am vrut să afișez o captură de ecran pe tot ecranul.

Desigur, nu de dragul frumuseții, ci pentru vizitatorii blogului, confortul utilizatorului. În pușculița mea de cunoștințe se află o soluție fiabilă gata făcută, dar mânată de curiozitate, am decis să caut puțin pe Google pe Internet și să găsesc ceva interesant.

S-a dovedit ca în „Crocodile Dundee” - plimbarea a continuat. A renunțat la programul de lucru, a încălcat toate limitele puse de el însuși pentru percheziții. Ei bine, Dumnezeu să-l binecuvânteze, sper să nu fie în zadar. Poate că munca mea va fi de folos cuiva. Vă aduc în atenție două soluții bune pentru a mări imaginea la apăsare.

Voi demonstra a doua soluție pe blogul meu. Din păcate, spre deosebire de Alexander, va trebui să utilizați doar capturi de ecran ale programului ca exemplu.

Mărirea imaginii când se face clic cu Highslide JS

Folosind scriptul Highslide JS dezvoltat de compania norvegiană Highsoft AS, pe lângă mărirea imaginii la clic, puteți crea galerii media, ferestre pop-up care funcționează în html, ajax, Iframe și flash. Să trecem la acțiune. Accesați pagina de descărcare a scripturilor http://highslide.com, descărcați arhiva nouă și despachetați-o.

Găsiți fișierul cu extensia index, deschideți-l folosind orice browser, va apărea o fereastră cu exemple. Alegeți-l pe cel pentru care vă plac efectele vizuale. Există cinci opțiuni gata făcute pentru configurarea scriptului pentru a mări imaginea atunci când se face clic.

Creați un fișier text nou pe desktop, copiați părți ale codului evidențiate în captură de ecran în pătrate roșii și verzi, la o distanță mică unul de celălalt. Să le edităm. Va trebui să plasăm primul cod pe paginile site-ului nostru între etichetele head. De ce este responsabil? Să citim comentariile.

Comentariul de sub numărul unu spune că trebuie să specificați căile către fișierele js și css și, cu siguranță, acestea trebuie să fie localizate pe serverul nostru. Ștergem comentariile, scriem calea în care va fi localizat directorul cu fișierele script. Înlocuim toate două puncte cu numele directorului descărcat - highslide-4.1.13. Și vom înlocui fișierul highslide.js cu cel mai funcțional highslide-full.js. Brusc, în viitor, veți dori să folosiți mai multe chifle Highslide JS. Al doilea comentariu spune că este important să specificați calea către directorul cu grafica scriptului. Și că aici poți schimba setările. Ar trebui să iasă așa ceva.

Acum, codul terminat trebuie să fie plasat în secțiunea cap înainte de eticheta de închidere. Pe blogul meu WordPress, l-am plasat în fișierul footer.php al temei utilizate, înainte de eticheta de închidere

.

Să începem editarea celui de-al doilea cod, pe care îl vom insera direct în paginile de text pentru a mări imaginea atunci când facem clic. Pentru ușurință în utilizare, îl vom aduce în următoarea formă:

Adăugarea de text la imaginea pop-up

Acum haideți să aruncăm tot ce nu este necesar din directorul highslide-4.1.13.

Găsiți folderul highslide, deschideți-l și ștergeți totul, cu excepția folderului grafic și fișierele incluse highslide-full.js, highslide.css, highslide-ie6.css. Plasați highslide-4.1.13 în directorul rădăcină al site-ului dvs. Scenariul este gata. Puteți completa imagini, plasați codul de script pe pagină și vă puteți bucura de efectul de mărire a imaginii când faceți clic.

Pentru ca scriptul Highslide JS să funcționeze corect în WordPress, trebuie mai întâi rezolvată o problemă. La trecerea de la editorul html la cel vizual, o parte din codul scriptului dispare - onclick = "return hs.expand (this)".
Deschideți fișierul functions.php al temei și adăugați următorul cod mai jos, înainte de?>.

// funcția de filtrare change_mce_options ($ initArray) ($ initArray ["verify_html"] = fals; $ initArray ["cleanup_on_startup"] = fals; $ initArray ["cleanup"] = fals; $ initArray ["forced_root_block"] = fals; $ initArray ["validate_children"] = fals; $ initArray ["remove_redundant_brs"] = fals; $ initArray ["remove_linebreaks"] = fals; $ initArray ["force_p_newlines"] = fals; $ initArray ["force_br_newlines"] = fals $ initArray ["fix_table_elements"] = fals; $ initArray ["entities"] = "160, nbsp, 38, amp, 60, lt, 62, gt"; returnează $ initArray;) add_filter ("tiny_mce_before_init", "change_mce_options" );

Salvăm modificările, problema este rezolvată.

Pentru confortul utilizării scriptului pentru a mări imaginile la clic, puteți adăuga butoane suplimentare la editorul html WordPress.

Butoane suplimentare în editorul html pentru Highslide JS

Deschideți din nou fișierul functions.php al temei și lipiți următorul cod în partea de jos, înainte de?>.

// Butoane suplimentare html editor add_action ("admin_print_footer_scripts", "add_sheens_quicktags"); funcția add_sheens_quicktags () (?>

Vă rugăm să rețineți că în butonul mo1 am setat lățimea maximă permisă de afișare a miniaturilor pentru lățimea blogului meu = „730”. Dacă am nevoie de o miniatură mai mică, schimb doar valoarea. Înlocuiți lățimea permisă cu valoarea dvs. De asemenea, puteți seta înălțimea.

Salvați, accesați editorul de text, vedeți următoarele.

Folosim butoanele div, mo1, mo2, float-l, float-r, codul de script Highslide JS necesar poate fi acum afișat rapid și convenabil. Rămâne să scrieți calea către imagini, să completați titlul, alt și să scrieți text suplimentar pentru imagini.

Vă puteți crea propria configurație de script folosind editorul Highslide JS. Exact asta am facut pentru blogul meu.

Folosind Highslide JS Editor

În coloana din stânga a ferestrei deschise a site-ului dezvoltatorilor, accesați editorul Highslide JS făcând clic pe butonul Editor. Se va deschide o fereastră în fața noastră - Bine ați venit la editorul Highslide.

Faceți clic pe butonul verde Începeți!

Pas cu pas despre cum să utilizați editorul Highslide JS. Recomandări scurte.

Fila General se va deschide implicit.

General

Limba

În total, există 35 de limbi locale. Dintre acestea, există trei zone post-sovietice. lituaniană, rusă, ucraineană. Nu este dificil să faci o traducere în limba de interes. Pentru a traduce puțin, mai jos veți înțelege în ce fișier se află toate acestea. Alegem limba dorită și mergem mai departe.

Exemplu de încărcare

Selectăm opțiunea de a afișa mărirea imaginii atunci când este apăsată. Faceți clic pe butonul cu săgeata, opțiunile vor apărea în fereastra pop-up. Ne oprim la ceea ce ne place. Sunt doar patru dintre ei care merg primii. Restul pentru alte sarcini - afișarea galeriei, ferestre pop-up. Am folosit Fără chenar, buton de închidere simplu.

• Contur alb rotunjit
• Chenar alb și umbră
• Fără chenar, buton de închidere simplu
• Fără contur, margini CSS colorate

Pentru a vizualiza oricare dintre opțiuni, faceți mai întâi clic pe imaginea din dreapta și apoi repetați asupra efectelor. Alegeți-l pe cel care vă place și mergeți la fila următoare. În plus, în toate setările, faceți mai întâi clic pe imaginea din dreapta, iar după aceea, folosind modificările din setările editorului, observăm cum va arăta totul vizual.

Galerie și HTML

Am omis aceste două puncte, deoarece nu sunt incluse în sarcinile mele deocamdată. Până acum, mă interesează doar să măresc imaginea când sunt apăsat.

Stil

Miniatură
Eticheta explicativă

Personalizați aspectul și efectele miniaturii.

Trei setări din care să alegeți. Puteți afișa indicii sub miniatură.

Niciunul - nici un indiciu, Text de mai jos - cu text explicativ, Pictogramă și text de mai jos - cu o imagine și text. Mi se pare că indicii sunt de prisos.

Butonul pentru marginea miniaturii

Făcând clic pe acest buton, puteți regla grosimea și culoarea marginilor miniaturii.

Stilul etichetei

Punem o bifă în previzualizare și selectăm afișarea pictogramei de descărcare. Asta în cazul în care ați dat clic pe imagine, iar creșterea acesteia nu se grăbește să fie afișată.
Stiluri pop-up
fundal

Aici puteți modifica aspectul ferestrei pop-up. Schimbați fundalul legendei imaginii. Modificați lățimea și culoarea marginilor imaginii mărite.
Dimmering
Aplicați masca de estompare a paginii

Dacă doriți ca fundalul paginii să se întunece atunci când faceți clic pe imagine pentru a o mări, bifați caseta de selectare din această setare. Făcând clic pe Opțiuni de estompare, ajustați opțiunile de estompare, selectați o culoare.

Comportament

În Comportament, personalizăm comportamentul ferestrei pop-up.
Animaţie
uşurarea
Patru opțiuni pentru animație la afișarea unei imagini mărite.

Buton de animație avansată

Reglați viteza de apariție și de dispariție a imaginii mărite.

Ascunde miniatura la extindere (nu galerie)

Dacă bifați caseta de lângă acest articol când măriți imaginea, miniatura în sine va fi invizibilă.
Dimensiunea pop-upului și alinierea
Reglați dimensiunea ferestrei de mărire și alinierea acesteia.

Aliniere

Selectăm opțiunea implicită pentru alinierea imaginii mărite. Am ales să afișez o imagine mărită pe pagină - avto.

Buton de aliniere avansat

Făcând clic pe acest buton, puteți seta setările de lățime și înălțime pentru dimensiunea minimă, maximă și fixă ​​a imaginii. Ajustați marginile - sus, dreapta, jos, stânga.

Suprapuneri

Adăugarea de text la imaginea mărită.
Semnătura mea de pe imaginea mărită, când se face clic, va fi afișată în partea de jos. Titlul va fi afișat în partea de sus. În ambele paragrafe sunt propuse patru surse identice din care este afișat textul cu imaginea mărită. Folosind titlul imaginii, titlul și alt miniaturii și textul ulterior autoscris învelit într-un div.

Titlul este preluat din titlul imaginii mari, semnătura este din textul învelit într-un div.

Am debifat următoarele două elemente. Butonul de închidere - afișează o cruce apropiată în colțul din dreapta sus. Afișează credite - afișează un link discret către site-ul dezvoltatorului.

Am realizat ceea ce ne-am dorit, apariția ferestrei pop-up cu costumele de imagine, să mergem mai departe.

Editarea fișierelor site-ului, integrarea scripturilor

Conectăm propria noastră configurație de script urmând cei trei pași recomandați.

Mai întâi, deschideți fila Publicare din fereastra exemplu, faceți clic pe Da, descărcați arhiva cu propria configurație pe computer făcând clic pe Descărcați o arhivă zip. După aceea, despachetați-l și lăsați-l în pace deocamdată. Copiați conținutul pasului 2 și pasului 3 în fișierul text creat pentru editare ulterioară, închideți fereastra.

Pentru ca scriptul să funcționeze, trebuie să specificăm căile către fișiere direct către acesta, folderul cu grafică și stiluri CSS scriind codul în secțiunea de cap de pe paginile site-ului. Acesta este codul copiat de la Pasul 2, să începem să-l edităm. În cazul meu, arăta așa:

Hei! Se întâmplă așa: intri pe un blog, vezi un ecran și ceea ce este în el nu se vede deloc. Deci crezi ce a vrut să arate autorul acestei postări în ea? Dar există o cale de ieșire - un script pentru a mări imaginea când faceți clic!

Foarte tare lucru, acest scenariu. Vedeți singuri, crește la clic:

(Se poate da clic)

De fapt, există multe efecte diferite de mărire a imaginii într-o postare pe blog, dar acesta este cel mai bun efect după părerea mea.

Cine va beneficia de acest script pentru mărirea imaginilor?

1. În primul rând, acelea care face capturi de ecran cu explicații ... De exemplu, dacă decideți să faceți o captură de ecran voluminoasă pentru articolul dvs., ați pictat pe ceva acolo, pentru a face materialul mai ușor de înțeles, l-ați aruncat în articol, dar pur și simplu nu se potrivește complet pe pagina blogului dvs., astfel încât wordpress-ul se va comprima automat, pentru a nu depăși granițele paginii. Și după compresie, vizibilitatea, lizibilitatea este mult redusă. Am avut asta de mai multe ori, așa că am decis să folosesc acest script pentru a mări o imagine fără a pierde calitatea.
2. Dacă tu doar nu vreau să postez imagini volumetrice în articol ... Se întâmplă că trebuie să afișați mai multe imagini într-un articol, dar nu doriți ca aceste imagini să ocupe mult spațiu, atunci instalarea scriptului este cea mai bună opțiune! Și, în general, dacă nu doriți să plasați imagini volumetrice, atunci acest script este pur și simplu necesar.

Amenda. Acum trebuie să instalăm scriptul pe site-ul nostru. Instalarea are loc în 3 pași:

1. Descărcați scriptul și încărcați-l în directorul rădăcină al site-ului dvs.
2. Instalați codul necesar pe site-ul dvs. web.
3. Aruncăm imaginea în articol și setăm afișarea acesteia.

Deci, să începem.

A doua etapă pe care o avem este instalarea codului de script. Unde sa instalez codul? Poate fi setat în header.php, footer.php, function.php, index.php, dar de obicei am setat în footer.php, înainte de etichetă

, astfel încât codul să fie încărcat ultimul.

Iată codul în sine:

Și iată ce am primit:

(Se poate da clic)

Acum vine partea distractivă.

Pentru ca scriptul să mărească imaginile fără a pierde calitatea, aveți nevoie de:

1. După ce ați încărcat imaginea în articol, trebuie să deschideți "Opțiuni de imagine" și în paragraful „ Legătură" Selectați " Fișier media" .