Kad se klikne, slika postaje html. Skripta za povećanje slika na WordPressu

Naravno, postoji mnogo načina za uvećanje slika. I uglavnom koristi skripte i dodatke. Po mom mišljenju, takve metode su opravdane u slučaju resursa s ogromnim brojem fotografija ili bilo kakvih slika. Moj blog nije takav. I, kao i obično, idem putem najmanje ulaganja vremena, znanja i resursa svoje stranice. Predlažem vam način da povećate ...

Možda će vas takođe zanimati:

Kako napraviti sjenu teksta za 5 minuta

Pozdrav dragi čitaoče mog bloga. U ovom ćete članku naučiti kako za 5 minuta stvoriti sjenku teksta pomoću css stilova i html koda.

Kako napraviti tipke gore-dolje za web stranicu

Ovaj je članak nastavak članka o tome kako napraviti gumb za povećanje web stranice.

Kako ukloniti post sa početne stranice pomoću koda

Pozdrav dragi čitaoče mog bloga. Bilo je potrebno da sakrijem neke članke sa glavne stranice. Uopće ga ne uklanjajte iz pristupa za čitače, ali uklonite ...

Uklonite unose u kategoriji s glavne stranice i RSS-a

Nastavljamo da poboljšavamo funkcionalnost i izgled stranice. Uklanjamo nepotrebne unose sa glavne stranice i RSS-a.

Mrvice na wordpressu

Informacije predstavljene u ovom članku prvenstveno su namijenjene webmasterima početnicima.

Opis

Skripta "Jquery Image Magnify v1.11" omogućava vam da povećate bilo koju sliku na stranici do potrebne veličine. Povećanje ili povratak u prvobitno stanje događa se kada se pritisne taster miša preko slike. Slika je pripremljena u jednom primjerku potrebnih dimenzija i uvećana u skladu s postavkama u datoteci jquery.magnifier.js.

Ako imate problema s preuzimanjem datoteka, na primjer putem pregledača, kopirajte vezu (desni taster miša → kopirajte adresu veze) i preuzmite datoteku putem Download Master-a.

Nakon preuzimanja arhive, raspakujte je u trenutnu mapu na računaru. U mapi jQueryImageMagnify vidjet ćete:

• direktorijum slika sa šest slika u jpg formatu;
• js mapa s datotekom skripte jquery.magnifier.js java i datotekom kursora magnify.cur (ne odražava se u svim pregledačima!);
• datoteka sa demo materijalom demo.html.

Otvorite potonji u pregledniku koji koristite i provjerite radi li demonstracija.

U primjeru koji ste dobili, "jquery Image Magnify v1.11" će raditi samo kad je Internet uključen, jer se najnovija datoteka biblioteke jQuery, "jquery.min.js", preuzima sa web lokacije Google API.

Ako želite da sve funkcionira autonomno, preuzmite i uključite najnoviju verziju jQuery biblioteke sa službene stranice.

Ako ste već povezali najnoviju ili noviju biblioteku jQuery (u trenutku objavljivanja članka - verzija 3.1.1) ili koristite daljinsku vezu najnovije verzije sa web lokacije jQuery ili Google API-ja, naravno, ne biste je trebali ponovo povezati.

Upute za instalaciju web stranice (jedna slika)

Korak 1. Odaberite željenu sliku i prenesite je u mapu sa slikama koja se nalazi u osnovnoj mapi web lokacije.

Korak 2. Prenesite sadržaj mape js u istoimenu mapu u korijenu web stranice.

Korak 3. Sljedeći kôd veze jQuery i Java skripta jquery.magnifier.js trebaju se dodati u odjeljak glave ili tijela vaše stranice:

Korak 4. I ovaj kod mora biti smješten u odjeljak tijela vaše stranice:

Objašnjenja:

Put do datoteke slike po vašem izboru.

Veličine slika prije uvećanja. Prikažite ih onako kako vam odgovara.

Jednostavno rečeno, u odjeljak tijela ubacujete uobičajeni kod slike dodjeljujući mu class \u003d "magnify". Ako slika sadrži eksplicitne atribute veličine (širina i visina), tada to omogućava korisniku da poveća sliku u skladu s postavkama u datoteci skripte jquery.magnifier.js. Ako dimenzije nisu određene, stvarne dimenzije slike bit će osnova za povećanje.

Pogledajmo rezultat:

Varijacije postavljanja slika

Objašnjenja:

Pozicioniranje na lijevoj strani.

Pravo pozicioniranje.

Izvorne dimenzije slike mogu se mijenjati pomoću atributa širine i visine.

JQuery.imageMagnify \u003d (dsettings: (magnifyby: 5, // omjer povećanja slike (zadano - 3) trajanje: 500, // trajanje animacije u milisekundama (zadano - 500) nepropusnost: 0,2 // stupanj neprozirnosti izvorne slike kada je zumirana slika pokriva (zadana vrijednost je 0,2)

Kako ukloniti okvir slike?

Namjerno sam ovo pitanje smjestio u zaseban pododjeljak, jer je poteklo od jednog od posjetitelja stranice.

Da bi se uvećana slika nakon klika miša prikazala bez okvira, potrebno je:

• Otvorite datoteku jquery.magnifier.js. To možete učiniti u bilo kojem uređivaču teksta, ali ja preporučujem Notepad ++
• Pronađite komad koda (u Notepadu ++ bit će na liniji 51)
  var $ clone \u003d $ target.clone (). css ((pozicija: "apsolutno", lijevo: 0, vrh: 0, vidljivost: "skriveno", obrub: "1px sivo", kursor: "pokazivač")). appendTo (document.body)
• U retku označenom markerom postavite vrijednost obruba na nulu ili promijenite boju sive (sive) u bijelu (bijelu) ili bilo koju drugu koja odgovara vašoj temi. To je sve!

Dvije stranice. Kraj stranice 1.

Iz ruševina i shvatio - VRIJEME! Vrijeme je da slike umetnete u članke na blogu, tako da se, kada ih kliknete, uvećaju i prikažu u izvornoj veličini.

Štoviše, kako bi efekt povećanja bio prikladan za korisnika (vas), tako da se ja kao autor dugo ne motam po kodovima (postavkama) prilikom umetanja slika u članke i da opterećenje bloga bude minimalno. Ne želim koristiti sve vrste dodataka i učitavati istu Mysql bazu podataka.

Obratio sam se profesionalcima za pomoć, rekli su mi šta da radim i sve sam namjestio za samo 3 minute. Opet, bez upotrebe dodataka poput Auto Highslide itd. Ne vucimo mačku dugo ... i prijeđimo na posao.

Isprobao sam mnogo različitih varijanti skripti za uvećanje slika, ali fokusirao sam se na skriptu koja stvara ovaj efekt. Pogledajte primjer, kliknite na sliku s lijeve strane:

Zanimljiv efekt. Kliknemo na sliku i ona se ne otvara u novom prozoru (što je vrlo nezgodno), već se otvara na istoj stranici u uvećanom obliku, u prekrasnom okviru s križem i ispod je zamijenjen opis slike.

Ako vam se sviđa ovaj efekt povećanja slika, onda ga možete koristiti! O njemu ću pisati u nastavku.

I ovdje je ovaj efekat jednostavno neophodan. Postoje slike na kojima trebate pažljivo pogledati da biste tamo nešto vidjeli. Oni koji imaju slab vid neće vidjeti ništa. Dobro će vam doći skripta za povećanje slike!

Pa, počnimo. Sve se radi u TRI jednostavna koraka:

1. Preuzmite skriptu i prenesite je na svoj hosting (server)
2. Dodajte mali kôd u datoteku footer.php
3. Dodajte slike u članke bloga.

GOW! Preuzmite sam skriptu... Sav sadržaj spuštamo u korijen našeg bloga. Korijen bloga glavni je direktorij bloga u kojem se nalaze mape poput wp-admin, wp-content itd. Gut! Uspjeli su!

Drugi korak je dodavanje posebnog koda u datoteku footer.php teme vašeg bloga. Evo ga:

Pažnja! U kodu zamijenite site.ru svojom domenom. Morate dodati kôd u footer.php prije završne oznake

Gut! Pa, u osnovi sve! Sada najosnovniji dio! U članke ćemo umetnuti slike tako da se, kad se na njih klikne, povećaju, kao što sam gore pokazao na primjeru. Općenito, vidi. Ovdje je sve jednostavno, iako će se isprva nekome činiti teško! Umetnem slike kao i obično u post putem dugmeta u uređivaču teksta - Dodaj medij:

U redu. Sada samo izbrišem sav ovaj (što je na slici gore) HTML html kod u editoru i umetnem ovaj na njegovo mjesto:

Kao rezultat, dobili smo ovo:

Vidimo da na vrhu imamo vezu do slike izvorne veličine, a na dnu ista slika (isti url), ali radi smanjenja veličine. Inače, takođe ne zaboravimo na optimizaciju, slika takođe ima alt. Sve je u redu!

UPDATE! U komentarima na ovaj članak Dmitrij Škurin predložio još lakši način korištenja ove skripte. Sada uopće ne trebate kopati po kodu:

Odnosno, kada smo bacili skriptu u korijen bloga + dodali poseban kôd u footer.php, više ne trebamo ništa birati da bismo članku dodali sliku. Sve radimo kako slijedi. Kao i obično, članku dodajemo sliku pomoću funkcije „Dodaj medijsku datoteku“. Sada, u parametrima prikaza datoteke, navedite vezu kao - "medijska datoteka":

prirodno prilagođavamo veličine tako da se slika tačno uklapa u članak, a zatim idemo na karticu "Dodatno" i u kolonu "Stav" napišite - - "Ažuriraj". Gotovo!

Sve je brzo, jednostavno i još povoljnije. Dmitri, hvala ti puno! Vrlo korisno!

To je tako jednostavno! Ko ne razumije šta? Ovdje je sve osnovno! Cool stvar je što ne mogu dati efekat uvećanja svim slikama, već samo onima koje želim dati. Ako, na primjer, umetnem sliku u članak i ne trebam je smanjivati \u200b\u200bkako bi stala u post, tada nije potrebno stvarati efekt povećanja!

To je to. Iskoristi ga. Ili možda neko zna bolji način? Napišite u komentarima. Inače, ova skripta se može koristiti ne samo na blogu, već i na raznim web lokacijama s jednom stranicom! U redu, pozdrav svima!

Srdačan pozdrav, Aleksandre Borisov

Pozdrav dragi optimisti optimisti.

U WordPressu, korisnik se prema zadanim postavkama klikom na sliku preusmjerava na stranicu slike. Slažete se - vrlo je nezgodno kada vas iznenada odbaci na drugu stranicu.

Da bi se slika povećala direktno na stranici na kojoj se nalazi, morate instalirati posebnu skriptu na web lokaciju.

Možete vidjeti kako to funkcionira na gornjoj slici ili na slikama na bočnoj traci.

Pronaći ga na Internetu nije problem, ali nažalost sve ponude imaju jednu manu. Kod skripte, kada se provjeri u validatoru, daje grešku.

Morao sam se malo naprezati i popraviti ovu situaciju, tako da ćemo dalje razgovarati o skripti koja dobro funkcionira na svim predlošcima i valjanoj skripti.

Način instalacije dostupan je čak i onima koji ne znaju ništa o skriptama, i općenito o programskim jezicima.

U isto vrijeme, s izvrsnim rezultatom, omogućuje vam i bez dodatka i uključuje obavezno popunjavanje alt oznake odgovarajućim tekstom, a to će imati vrlo dobar učinak na optimizaciju web mjesta.

Nije tajna da dodaci usporavaju brzinu preuzimanja, jer mnogi od njih stavljaju svoje skripte u blok glave.

A popunjavanje alt oznake često jednostavno nema dovoljno vremena. Tamo ćete, htjeli ili ne, morati unijeti odgovarajući tekst, jer će on biti prikazan kao potpis ispod povećane slike.

Možete postaviti numeriranje stranica ako ima mnogo slika.

Druga karakteristika je da skripta ne povećava sve, već samo one slike na koje pokažete.

Pogodno? Prikladno. Uostalom, ako se slika u izvornoj veličini savršeno uklapa u stranicu, zašto je onda povećavati.

Prijeđimo na instalaciju.

Zip sa skriptom možete dobiti besplatno preuzimanjem s mog Yandex diska. Skinuti

Nakon toga, morate ga otpremiti u korijen web stranice. Osnovna mapa je mapa koja sadrži wp-admin, wp-content i tako dalje.

Preuzmite zip putem FTP-a, raspakirajte ga, nakon čega se u direktoriju pojavljuju tri datoteke i jedna mapa.

Zip mapa mora biti izbrisana. Takođe, sada morate ukloniti, ako postoji, dodatak koji uvećava slike.

Sljedeći korak treba obaviti u datoteci footer.php. možete proći kroz wp-content - teme - vašu temu - footer.php bez napuštanja servera.

Ili možete otići na konzolu stranice, a zatim Izgled - Uređivač - footer.php ili Podnožje. I tako i tako je moguće.

U ovoj datoteci, na samom kraju, prije oznake, trebate umetnuti sljedeći kod:

U tri retka, gdje je adresa moje stranice, morate je zamijeniti svojom i možete ažurirati datoteku.

Instalacijom skripte - završeno, sada kako odrediti one slike koje treba povećati.

Učitavamo slike kao i obično, kroz loader, a zatim u modu Text editor pronalazimo vezu do učitane slike.

I prije atributa href, pišemo sljedeću klasu:

class \u003d "simplebox"

E, sad je to to, slika će se povećati kad se klikne i prikaže u centru. Riješili smo dva problema odjednom.

Pozdrav svima na stranici. Nastavljamo da poboljšavamo naše blogove kako bismo zaradili. Mislim da nije tajna da oni igraju veliku ulogu na web mjestu. Naravno, ne razumiju svi kako i nakon kojeg vremena počinju utjecati, ali činjenica ostaje. Da bismo poboljšali ove faktore, moramo poboljšati upotrebljivost web stranice: dodati, poboljšati dizajn, učiniti ga atraktivnim i jednostavnim. Napravite ispravnu obradu slika na web lokaciji. Mnogi bi željeli znati odgovor o tome kako napraviti sliku na web mjestu kada kliknu na koje se povećalo. Ovo povećanje provedeno je na mojoj web stranici. Dovoljno se složite da možete povećati slike, vidjeti svu ljepotu preko cijelog zaslona.

Danas ću vam pokušati otkriti ovu tajnu povećanja. Općenito, sliku možete povećati pomoću nekoliko radnji:

• Na primjer, možete ga povećati držanjem tipke miša
• Druga opcija bi bila zumiranje kada se pritisne

Naravno, ako koristite WordPress, tada bi najjednostavnija i najjednostavnija opcija bila traženje predloška s funkcijom koja nam je potrebna, vjerujte mi da na internetu postoji ogroman broj takvih predložaka. Tako ćete u 95 posto slučajeva pronaći upravo predložak sa uvećanom slikom. Ali što ako vam se sviđa ova određena tema i želite povećati sliku samo na njoj. Ili čak i svoju prvu stranicu napišete na komadu html-a, u što naravno sumnjam.

Povezujemo Java skripte da bismo povećali sliku

Konačni rezultat će biti povećana slika, prema tipu. U redu, sve je ovo filozofija, da bismo povećali sliku trebamo povezati jQuery biblioteku. Ne sjećam se, ali čini se da sam u nekoj lekciji napisao o ovoj biblioteci, ali ako ste zaboravili, podsjetit ću vas. Da biste povezali biblioteku, trebate stranica ubacite dva koda.

Treba shvatiti da postoji puno jQuery biblioteka i da su u različitim slučajevima različite biblioteke povezane

Ako svoju web stranicu pišete u golom html-u, za umetanje slike potreban vam je ovaj kod

Imajte na umu da ćete u ovom slučaju svoju sliku morati staviti u mapu sa slikama i navesti ime slike. Ne zaboravite da bi se datoteke biblioteke Java skripti trebale nalaziti na istom mjestu kao i glavna stranica web stranice, inače samo napišite drugačiji put do njih. Možete preuzeti biblioteku datoteka da biste povećali sliku na web lokaciji. Pa, i što je najvažnije sada, ako želite povećati svoju sliku, dodajte joj sljedeća svojstva.