Desigur, există multe modalități de a mări imaginile. Și în principal este folosită utilizarea de scripturi și pluginuri. După părerea mea, astfel de metode sunt justificate în cazul resurselor cu o sumă imensă fotografii sau orice poze. Blogul meu nu este asa. Și, ca de obicei, urmez calea celei mai mici cheltuieli de timp, cunoștințe și resurse pe site-ul meu.
Vă ofer o modalitate de a mări imaginile de pe site fără a folosi niciun script, dar exclusiv cu folosind html.
Această metodă de mărire a unei imagini pe un site web va permite cititorului să vadă rapid imaginea, deoarece site-ul dvs. nu va trebui să încarce suplimentar scripturi.
Mărirea imaginii de pe site Metoda 1 – măriți imaginea de pe site atunci când treceți cursorulFoarte simplu, bine cel mai simplu mod, sincer. Trebuie să adăugați următorul cod la proprietățile imaginii:
Onmouseover="this.style.width="Lățimea imaginii mari px"" onmouseout="this.style.width="Lățimea imaginii mici px""
Când treceți cursorul mouse-ului, imaginea se mărește.
Sper că înțelegeți că toate acestea se fac într-un editor de text.
Metoda este similară, trebuie doar să înlocuiți onmouseover cu onclick. Următorul cod este adăugat la proprietățile imaginii:
Style="width: "valoarea lățimii imaginii mici px; border:2px solid black;" onclick="this.style.width=large image width px"" onmouseout="this.style.width="small image width px""
Va arăta complet așa
Iată rezultatul și codul pentru imaginea păsăricii.
Când faceți clic cu mouse-ul, imaginea este mărită la dimensiunea imaginii originale sau la dimensiunea pe care o specificați. Pentru a reduce dimensiunea, adică a readuce imaginea la dimensiunea inițială, trebuie doar să faceți clic oriunde pe pagină.
Sper că nu v-a fost greu să utilizați astfel de metode - folosind html - pentru a mări imaginile de pe site.
În general, cred că mulți webmasteri nu se limitează la a folosi pur și simplu orice motor și folosesc coduri html pe site-urile lor.
Citeste si:
2015-10-27T16:07:59+00:00 Nadezhda Scripturi si coduri marirea imaginilor pe site, marirea imaginilor pe siteDesigur, există multe modalități de a mări imaginile. Și în principal este folosită utilizarea de scripturi și pluginuri. În opinia 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, urmez calea celei mai mici cheltuieli de timp, cunoștințe și resurse pe site-ul meu. Vă ofer o modalitate de a crește...
Nadezhda Trofimova [email protected] Site-ul blog al administratorului Ați putea fi, de asemenea, interesat de:
Cum să faci o umbră de text în 5 minute
Bună, dragă cititoare a blogului meu. În acest articol veți învăța cum să creați în 5 minute folosind stiluri cssȘi cod html umbra textului.
Cum se creează butoanele sus în jos pentru un site web
Acest articol este scris ca o continuare a articolului despre cum să faci un buton înapoi în sus pentru un site web.
Cum să eliminați o intrare din pagina principala folosind cod
Bună, dragă cititoare a blogului meu. Trebuia să ascund câteva articole de pe pagina principală. Nu pentru a-l elimina complet de la acces pentru cititori, ci pentru a elimina...
Eliminam intrările din categorii de pe pagina principală și RSS
Continuăm să îmbunătățim funcționalitatea și aspect site-ul. Eliminam postările inutile de pe pagina principală și RSS.
Pesmet pe un site WordPress
Informațiile prezentate în acest articol se adresează în primul rând webmasterilor începători.
Pe două pagini. Pagina 1. La următorul >>> DescriereScriptul „Jquery Image Magnify v1.11” vă permite să măriți orice imagine de pe pagină la dimensiunea necesară. Creșteți sau reveniți la starea originară apare atunci când butonul mouse-ului este apăsat peste imagine. Imaginea este pregătită într-o singură copie cu dimensiunile necesare și este mărită în conformitate cu setările din fișierul jquery.magnifier.js.
Dacă aveți probleme la descărcarea fișierelor, de exemplu, printr-un browser, copiați linkul ( butonul corect mouse → copiați adresa linkului) și descărcați fișierul prin Download Master.
După descărcarea arhivei, despachetați-o în folderul curent de pe computer. În folderul jQueryImageMagnify veți vedea:
- un folder de imagini cu șase imagini în format jpg;
- js cu fișierul script java jquery.magnifier.js și fișierul cursor de mărire magnify.cur (nu se reflectă în toate browserele!);
- fișier cu material demonstrativ demo.html.
Deschideți-l pe acesta din urmă în browserul pe care îl utilizați și asigurați-vă că demonstrația funcționează.
În exemplul primit, „Jquery Image Magnify v1.11” va funcționa numai când internetul este pornit, deoarece fișierul ultima versiune Biblioteci jQuery - „jquery.min.js” este descărcat de pe site-ul Google API.
Dacă doriți ca totul să funcționeze independent, descărcați și conectați cea mai recentă versiune a bibliotecii jQuery de pe site-ul oficial.
Dacă aveți deja conectată cea mai recentă sau mai recentă versiune a bibliotecii jQuery (la momentul publicării articolului - versiunea 3.1.1) sau utilizați conexiune la distanță cea mai recentă versiune de pe site-ul jQuery sau Google API, desigur, nu ar trebui să o conectați din nou.
Instrucțiuni de instalare pe site (imagine unică)Pasul 1. Selectați imaginea dorită și încărcați-o în folderul imagini, care se află în folderul rădăcină al site-ului.
Pasul 2. Încărcați conținutul folderului js în folderul cu același nume din rădăcina site-ului.
Pasul 3. Următorul cod pentru conectarea jQuery și scriptul Java jquery.magnifier.js trebuie adăugat la secțiunea de cap sau de corp a paginii dvs.:
Pasul 4. Și acest cod trebuie plasat în secțiunea body a paginii dvs.:
Explicatii:
Calea către fișierul imagine pe care l-ați selectat.
Dimensiunile imaginii înainte de mărire. Afișați-le la propria discreție.
Mai simplu spus, în secțiunea de corp introduceți codul obișnuit al imaginii, atribuindu-i class="magnify" . Dacă imaginea conține atribute de dimensiune explicite (lățime și înălțime), atunci acest lucru permite utilizatorului să mărească imaginea conform setărilor fișierului script jquery.magnifier.js. Dacă dimensiunile nu sunt indicate, atunci dimensiunile reale ale imaginii vor fi baza pentru mărire.
Să vedem rezultatul: Pentru a mări/micșora, faceți clic pe imagine Variații cu plasarea imaginii
Explicatii:
Pozitionare in stanga.
Pozitionare in dreapta.
Dimensiunile originale ale imaginii pot fi modificate folosind atributele lățime și înălțime.
Setări posibile în fișierul jquery.magnifier.js
JQuery.imageMagnify=( dsettings: ( magnifyby: 5, //factor de mărire a imaginii (implicit - 3) durată: 500, // durata animației în milisecunde (implicit - 500) imgopacity: 0,2 //grad de opacitate a imaginii originale când imaginea mărită o acoperă (implicit - 0,2)
Cum să scoți o ramă de imagine?
Am pus această întrebare în mod special într-o subsecțiune separată, deoarece a apărut de la unul dintre vizitatorii site-ului.
Pentru ca imaginea mărită să fie afișată fără cadru după ce faceți clic pe mouse, trebuie să:
- Deschideți fișierul jquery.magnifier.js. Puteți face acest lucru în orice editor de text, dar vă recomand Notepad++
- Găsiți o secțiune de cod (în Notepad++ va fi pe linia 51)
var $clone=$target.clone().css((poziție:"absolut", stânga:0, sus:0, vizibilitate:"ascuns", chenar:"1px solid gri" , cursor:"pointer")). appendTo(document.body) - În linia evidențiată cu un marcator, setați valoarea marginii la zero sau schimbați culoarea gri în alb sau orice altă culoare care se potrivește temei dvs. Asta e tot!
Pe două pagini. Sfârșitul paginii 1.
Din gunoaie mi-am dat seama - E VORUL! Este timpul să inserați imagini în articolele de pe blogul dvs., astfel încât atunci când faceți clic pe ele, acestea să se mărească și să fie afișate în dimensiunea lor originală.
Mai mult decât atât, efectul de mărire ar trebui să fie convenabil pentru utilizator (dvs.), astfel încât eu, ca autor, să nu trebuiască să mă joc de coduri (setări) pentru o lungă perioadă de timp când inserez imagini în articole și astfel încât încărcarea pe blogul este minim. Nu vreau să folosesc tot felul de pluginuri și să încarc aceeași bază de date Mysql.
Am apelat la profesioniști pentru ajutor și mi-au spus ce trebuie făcut și am pus totul la punct în literalmente 3 minute. Repet, fără a folosi niciun plugin precum Auto Highslide etc. Să nu târăm pisica prea mult timp... și să trecem la subiect.
Am încercat multe opțiuni diferite pentru scripturile de mărire a imaginii, dar m-am hotărât pe scriptul care creează acest efect. Priviți exemplul, faceți clic pe imaginea din stânga:
Efect interesant. Facem clic pe imagine și nu se deschide într-o fereastră nouă (ceea ce este foarte incomod), ci se deschide pe aceeași pagină într-o formă mărită, într-un cadru frumos cu cruce și mai jos este o descriere a imaginii.
Dacă vă place acest efect de mărire a imaginilor, îl puteți folosi! Despre asta voi scrie mai jos.
Repet, un astfel de efect este pur și simplu necesar. Există imagini acolo pe care trebuie să le priviți foarte atent pentru a vedea ceva acolo. Cei care au o vedere slabă nu vor vedea absolut nimic. Un script de mărire a imaginii va fi util!
Deci, să începem. Totul se face în TREI pași simpli:
1. Descărcați scriptul și încărcați-l pe găzduire (server)
2. Adăugați un mic cod în fișierul footer.php
3. Adăugați imagini la articolele de pe blog.
GOW! Descărcați scriptul în sine. Încărcăm tot conținutul la rădăcina blogului nostru. Rădăcina blogului este directorul principal al blogului în care se află foldere precum wp-admin, wp-content etc. Intestin! Au reusit!
Al doilea pas este să adăugați cod special în fișierul footer.php al temei blogului dvs. Aici era:
Atenţie! În cod, înlocuiți site.ru cu domeniul dvs. Trebuie să adăugați codul în footer.php înainte de eticheta de închidere
Intestin! Ei bine, practic asta este! Acum pentru partea principală! Vom insera imagini în articole, astfel încât atunci când faceți clic, acestea se vor mări, așa cum am arătat mai sus în exemplu. În general, uite. Totul este simplu aici, deși la început poate părea dificil pentru unii! Inserez imagini ca de obicei în postare prin butonul din editorul de text - Adaugă fișier media:
BINE. Acum doar șterg tot acest cod html (care este în poza de mai sus) al imaginii în editor, iar în locul lui îl introduc pe acesta:
Ca rezultat, obținem asta:
Vedem că mai sus avem un link către o imagine de dimensiunea originală, iar mai jos este aceeași imagine (aceeași url), dar i s-au dat dimensiuni pentru a o micșora. Apropo, nu uităm nici de optimizare, alt este prezent și în imagine. Totul este misto!
ACTUALIZAȚI! În comentariile la acest articol, Dmitry Shkurin a sugerat o opțiune și mai ușoară pentru utilizarea acestui script. Acum nu mai trebuie să modificați codul deloc:
Adică, atunci când am încărcat scriptul la rădăcina blogului + am adăugat un cod special la footer.php, nu mai trebuie să ne chinuim cu nimic pentru a adăuga o poză la articol. Facem totul după cum urmează. Ca de obicei, adăugăm o imagine la articol folosind funcția „Adăugați fișier media”. Acum, în parametrii de afișare a fișierului, specificăm linkul ca „fișier media”:
Desigur, ajustăm dimensiunile astfel încât imaginea să se încadreze exact în articol, apoi mergem la fila „Avansat” și în coloana „Relație” scrieți - „Actualizare”. Gata!
Totul este rapid, simplu și chiar mai convenabil. Dmitry, mulțumesc frumos! De mare ajutor!
E simplu! Cine nu intelege ce? Totul este elementar aici! Lucrul tare este că pot da efectul de mărire nu tuturor imaginilor, ci doar celor cărora vreau să le dau. Dacă, de exemplu, inserez o imagine într-un articol și nu trebuie să o reduc pentru a se potrivi în postare, atunci nu este necesar să creez un efect de mărire!
Asta este. Foloseste-l. Sau poate cineva știe o modalitate mai bună? Scrieți în comentarii. Apropo, acest script poate fi folosit nu numai pe un blog, ci și pe diverse site-uri de o singură pagină! Ei bine, asta e, la revedere tuturor!
Cu stima, Alexandru Borisov
Bună ziua dragi optimizatori începători.
În WordPress, în mod implicit, atunci când dați clic pe o imagine, utilizatorul este dus la pagina de imagine. De acord - este foarte incomod când ești brusc transferat pe o altă pagină.
Pentru ca imaginea să se mărească direct pe pagina pe care se află, trebuie să instalați un script special pe site.
Puteți vedea cum funcționează în poza de mai sus sau în imaginile din bara laterală.
Găsirea lui pe Internet nu este o problemă, dar, din păcate, toate ofertele au un singur defect. Codul de script, când este verificat în validator, produce o eroare.
A trebuit să mă încordez puțin și să corectez această situație, așa că ceea ce urmează va fi un script care funcționează perfect pe toate șabloanele și este valabil.
Metoda de instalare este accesibilă chiar și celor care nu știu nimic despre scripturi și limbaje de programare în general.
În același timp, cu rezultate excelente, vă permite să faceți fără un plugin și necesită completarea obligatorie a etichetei alt cu textul corespunzător, iar acest lucru va avea un efect foarte bun asupra optimizării site-ului.
Nu este un secret pentru nimeni că pluginurile încetinesc viteza de încărcare, deoarece multe dintre ele își plasează scripturile în blocul principal.
Și completarea etichetei alt este adesea pur și simplu prea mult timp. Chiar acolo, indiferent dacă vă place sau nu, va trebui să introduceți textul corespunzător, deoarece va apărea ca semnătură sub imaginea mărită.
Puteți seta pur și simplu numerotarea după pagină dacă există o mulțime de imagini.
O altă caracteristică este că scriptul nu mărește totul, ci doar acele imagini către care indicați.
Confortabil? Confortabil. La urma urmei, dacă o imagine în dimensiunea inițială se potrivește perfect pe pagină, atunci de ce să o mărești.
Să trecem la instalare.
Puteți obține zip-ul cu scriptul complet gratuit, pur și simplu descărcându-l de pe discul meu Yandex. Descarca
După aceea, trebuie să-l încărcați la rădăcina site-ului. Dosarul de bază este folderul care conține wp-admin, wp-content și așa mai departe.
Descărcăm zip-ul prin FTP, îl despachetăm, după care în director apar trei fișiere și un folder.
Dosarul zip trebuie șters. De asemenea, acum trebuie să eliminați, dacă a existat, un plugin care mărește imaginile.
Următoarea acțiune trebuie făcută în fișierul footer.php. Puteți trece prin wp-content - teme - Tema dvs. - footer.php fără a părăsi serverul.
Sau poți accesa consola site-ului, apoi Aspect - Editor - footer.php sau Footer. Și așa și așa este posibil.
În acest fișier, la sfârșit, înainte de etichetă, trebuie să introduceți următorul cod:
(funcţie())(
var boxes=,els,i,l;
if(document.querySelectorAll)(
els=document.querySelectorAll("a");
Box..css");
Box..js",function())(
simplebox.init();
for(i=0,l=els.length;i
