Žinoma, yra daug būdų, kaip padidinti vaizdus. Ir daugiausia naudojami scenarijai ir papildiniai. Mano nuomone, tokie metodai yra pateisinami ištekliais su didžiulė suma nuotraukos ar bet kokios nuotraukos. Mano tinklaraštis ne toks. Ir, kaip įprasta, savo svetainėje einu mažiausiai laiko, žinių ir išteklių sunaudodamas keliu.
Siūlau jums būdą, kaip padidinti svetainės vaizdus nenaudojant jokių scenarijų, bet tik su naudojant html.
Šis interneto svetainės vaizdo padidinimo būdas leis skaitytojui greitai pamatyti paveikslėlį, nes Jūsų svetainei nereikės papildomai įkelti scenarijų.
Vaizdo padidinimas svetainėje 1 būdas – užvedus žymeklį padidinkite vaizdą svetainėjeLabai paprasta, gerai paprasčiausias būdas, sąžiningai. Prie vaizdo ypatybių turite pridėti šį kodą:
Onmouseover="this.style.width="Didelis vaizdo plotis px"" onmouseout="this.style.width="Mažas vaizdo plotis px""
Kai užvedate pelės žymeklį, vaizdas padidėja.
Tikiuosi, jūs suprantate, kad visa tai daroma teksto rengyklėje.
Metodas panašus, tereikia onmouseover pakeisti į onclick. Šis kodas pridedamas prie vaizdo savybių:
Style="width: "mažo vaizdo pločio reikšmė px; border:2px solid black;" onclick="this.style.width=didelis vaizdo plotis px"" onmouseout="this.style.width="mažas vaizdo plotis px""
Tai visiškai atrodys taip
Čia yra pūlingo paveikslėlio rezultatas ir kodas.
Spustelėjus pele, vaizdas padidinamas iki pradinio vaizdo dydžio arba jūsų nurodyto dydžio. Norėdami sumažinti dydį, ty grąžinti paveikslėlį į pradinį dydį, tiesiog spustelėkite bet kurią puslapio vietą.
Tikiuosi, kad jums nebuvo sunku naudoti tokius metodus - naudojant html - norėdami padidinti svetainės vaizdus.
Apskritai manau, kad daugelis žiniatinklio valdytojų neapsiriboja tik bet kokio variklio naudojimu ir savo svetainėse naudoja html kodus.
Taip pat skaitykite:
2015-10-27T16:07:59+00:00 Nadezhda Scenarijai ir kodai, didinant vaizdus svetainėje, didinant vaizdus svetainėjeŽinoma, yra daug būdų, kaip padidinti vaizdus. Ir daugiausia naudojami scenarijai ir papildiniai. Mano nuomone, tokie metodai yra pateisinami, kai ištekliai turi daug nuotraukų ar bet kokių nuotraukų. Mano tinklaraštis ne toks. Ir, kaip įprasta, savo svetainėje einu mažiausiai laiko, žinių ir išteklių sunaudodamas keliu. Siūlau jums būdą padidinti...
Nadežda Trofimova [apsaugotas el. paštas] Administratoriaus tinklaraščio svetainė Galbūt jus taip pat domina:
Kaip padaryti teksto šešėlį per 5 minutes
Sveiki, mielas mano tinklaraščio skaitytojau. Šiame straipsnyje sužinosite, kaip sukurti per 5 minutes naudojant css stiliai Ir html kodas teksto šešėlis.
Kaip sukurti svetainės mygtukus
Šis straipsnis parašytas kaip straipsnio apie tai, kaip sukurti svetainės mygtuką Atgal į viršų, tęsinys.
Kaip pašalinti įrašą iš pagrindinis puslapis naudojant kodą
Sveiki, mielas mano tinklaraščio skaitytojau. Man reikėjo paslėpti kai kuriuos straipsnius pagrindiniame puslapyje. Ne visai pašalinti jį iš skaitytojų prieigos, o pašalinti...
Kategorijų įrašų pašalinimas iš pagrindinio puslapio ir RSS
Mes ir toliau tobuliname funkcionalumą ir išvaizda svetainę. Pašaliname nereikalingus įrašus iš pagrindinio puslapio ir RSS.
„WordPress“ svetainės apžvalgos
Šiame straipsnyje pateikta informacija visų pirma skirta pradedantiesiems žiniatinklio valdytojams.
Dviejuose puslapiuose. Puslapis 1. Į kitą >>> AprašymasScenarijus „Jquery Image Magnify v1.11“ leidžia padidinti bet kurį paveikslėlį puslapyje iki reikiamo dydžio. Padidinkite arba grįžkite į pradinė būsenaįvyksta, kai pelės mygtukas paspaudžiamas virš vaizdo. Paveikslėlis paruošiamas viena reikiamų matmenų kopija ir padidinamas pagal jquery.magnifier.js failo nustatymus.
Jei kyla problemų atsisiunčiant failus, pavyzdžiui, per naršyklę, nukopijuokite nuorodą ( dešinysis mygtukas pelė → nukopijuokite nuorodos adresą) ir atsisiųskite failą naudodami „Download Master“.
Atsisiuntę archyvą išpakuokite jį į dabartinį kompiuterio aplanką. Aplanke jQueryImageMagnify pamatysite:
- vaizdų aplankas su šešiais vaizdais jpg formatu;
- js aplanką su java scenarijaus failu jquery.magnifier.js ir didinimo žymeklio failu magnify.cur (atspindi ne visose naršyklėse!);
- failas su demonstracine medžiaga demo.html.
Atidarykite pastarąjį savo naudojamoje naršyklėje ir įsitikinkite, kad demonstracinė versija veikia.
Gautame pavyzdyje „Jquery Image Magnify v1.11“ veiks tik tada, kai įjungtas internetas, nes failas Naujausia versija jQuery bibliotekos – „jquery.min.js“ atsisiunčiama iš „Google“ API svetainės.
Jei norite, kad viskas veiktų atskirai, atsisiųskite ir prijunkite naujausią jQuery bibliotekos versiją iš oficialios svetainės.
Jei jau turite prijungtą naujausią ar naujesnę jQuery bibliotekos versiją (straipsnio paskelbimo metu - 3.1.1 versija) arba naudojate nuotolinis ryšys naujausia versija iš jQuery svetainės arba Google API, žinoma, neturėtumėte jos vėl prijungti.
Diegimo instrukcijos svetainėje (vienas vaizdas)1 veiksmas. Pasirinkite norimą vaizdą ir įkelkite jį į vaizdų aplanką, kuris yra svetainės šakniniame aplanke.
2 veiksmas. Įkelkite js aplanko turinį į to paties pavadinimo aplanką, esantį svetainės šaknyje.
3 veiksmas. Šis kodas jQuery ir Java scenarijui jquery.magnifier.js sujungti turi būti įtrauktas į puslapio antraštę arba turinį:
4 veiksmas. Šis kodas turi būti įdėtas į jūsų puslapio turinį:
Paaiškinimai:
Kelias į pasirinktą vaizdo failą.
Vaizdo matmenys prieš padidinimą. Rodykite juos savo nuožiūra.
Paprasčiau tariant, kūno dalyje įterpiate įprastą vaizdo kodą, priskirdami jį class="magnify" . Jei paveikslėlyje yra aiškūs dydžio atributai (plotis ir aukštis), tai leidžia vartotojui padidinti vaizdą pagal jquery.magnifier.js scenarijaus failo nustatymus. Jei matmenys nenurodyti, didinimo pagrindas bus tikrieji vaizdo matmenys.
Pažiūrėkime rezultatą: Norėdami padidinti / sumažinti, spustelėkite paveikslėlį Variacijos su vaizdo išdėstymu
Paaiškinimai:
Padėtis kairėje.
Padėtis dešinėje.
Pradinius vaizdo matmenis galima pakeisti naudojant pločio ir aukščio atributus.
Galimi nustatymai faile jquery.magnifier.js
JQuery.imageMagnify=( dsettings: ( magnifyby: 5, //vaizdo padidinimo koeficientas (numatytasis - 3) trukmė: 500, // animacijos trukmė milisekundėmis (numatytasis - 500) nepermatomumas: 0,2 //pradinio vaizdo neskaidrumo laipsnis, kai padidintas vaizdas jį dengia (numatytasis – 0,2)
Kaip nuimti paveikslo rėmelį?
Šį klausimą konkrečiai pateikiau atskirame poskyryje, nes jis kilo iš vieno iš svetainės lankytojų.
Kad padidinta nuotrauka būtų rodoma be rėmelio spustelėjus pelę, reikia:
- Atidarykite failą jquery.magnifier.js. Tai galite padaryti naudodami bet kurį teksto rengyklę, bet aš rekomenduoju Notepad ++
- Raskite kodo skyrių (Notepad ++ jis bus 51 eilutėje)
var $clone=$target.clone().css((pozicija: "absoliutus", kairėn: 0, viršuje: 0, matomumas: "paslėptas", kraštinė: "1 piks. vientisa pilka" , žymeklis: "žymiklis")). appendTo(document.body) - Žymekliu paryškintoje eilutėje nustatykite kraštinės reikšmę į nulį arba pakeiskite pilką spalvą į baltą arba bet kurią kitą spalvą, atitinkančią jūsų temą. Tai viskas!
Dviejuose puslapiuose. 1 puslapio pabaiga.
Iš šiukšlių supratau - LAIKAS! Pats laikas į savo tinklaraščio straipsnius įterpti nuotraukas, kad jas spustelėjus jos padidėtų ir būtų rodomos pradinio dydžio.
Be to, padidinimo efektas turėtų būti patogus vartotojui (jums), kad man, kaip autoriui, nereikėtų ilgai vargti su kodais (nustatymais) įterpiant vaizdus į straipsnius ir kad būtų apkrauta dienoraštis yra minimalus. Nenoriu naudoti visokių įskiepių ir krauti tos pačios Mysql duomenų bazės.
Kreipiausi pagalbos į profesionalus ir jie man pasakė, ką reikia padaryti, ir aš viską sutvarkiau per 3 minutes. Kartoju, nenaudojant jokių priedų, tokių kaip „Auto Highslide“ ir kt. Netempkime katės per ilgai... ir eikime prie esmės.
Išbandžiau daugybę skirtingų vaizdo didinimo scenarijų parinkčių, bet apsistojau ties scenariju, kuris sukuria šį efektą. Pažvelkite į pavyzdį, spustelėkite paveikslėlį kairėje:
Įdomus efektas. Paspaudžiame paveikslėlį ir jis neatsidaro naujame lange (o tai labai nepatogu), o atsidaro tame pačiame puslapyje padidinta forma, gražiame rėmelyje su kryželiu ir apačioje yra nuotraukos aprašymas.
Jei jums patinka šis vaizdų padidinimo efektas, galite jį naudoti! Apie tai parašysiu žemiau.
Kartoju, toks poveikis tiesiog būtinas. Ten yra vaizdų, į kuriuos reikia labai atidžiai įsižiūrėti, kad ką nors pamatytum. Tie, kurie turi prastą regėjimą, išvis nieko nematys. Vaizdo padidinimo scenarijus pravers!
Taigi, pradėkime. Viskas atliekama trimis paprastais žingsniais:
1. Atsisiųskite scenarijų ir įkelkite jį į savo prieglobą (serverį)
2. Pridėkite nedidelį kodą į footer.php failą
3. Pridėkite paveikslėlių prie tinklaraščio straipsnių.
GOW! Atsisiųskite patį scenarijų. Visą turinį įkeliame į savo tinklaraščio šaknį. Tinklaraščio šaknis yra pagrindinis tinklaraščio katalogas, kuriame yra tokie aplankai kaip wp-admin, wp-content ir kt. Žarnynas! Jie tai padarė!
Antras žingsnis – pridėti specialų kodą į savo tinklaraščio temos footer.php failą. Štai jis:
Dėmesio! Kode pakeiskite site.ru savo domenu. Turite pridėti kodą footer.php prieš baigiamąją žymą
Žarnynas! Na, iš esmės viskas! Dabar pagrindinė dalis! Į straipsnius įterpsime paveikslėlius, kad spustelėjus jie padidėtų, kaip parodžiau aukščiau esančiame pavyzdyje. Apskritai, žiūrėk. Čia viskas paprasta, nors iš pradžių kai kam gali pasirodyti sunku! Į įrašą įterpiu paveikslėlius kaip įprasta per teksto rengyklės mygtuką - Pridėti medijos failą:
GERAI. Dabar tiesiog ištrinu visą šį (kuris yra aukščiau esančiame paveikslėlyje) vaizdo html kodą redaktoriuje, o į jo vietą įdedu šį:
Kaip rezultatas, mes gauname tai:
Matome, kad viršuje yra nuoroda į pradinio dydžio vaizdą, o apačioje yra tas pats vaizdas (tas pats url), tačiau jam buvo suteikti matmenys, kad jis būtų mažesnis. Beje, nepamirštame ir optimizavimo, alt taip pat yra vaizde. Viskas šaunu!
ATNAUJINTI! Šio straipsnio komentaruose Dmitrijus Škurinas pasiūlė dar paprastesnį šio scenarijaus naudojimo variantą. Dabar jums visiškai nereikia sukti kodo:
Tai yra, kai įkėlėme scenarijų į tinklaraščio šaknį + pridėjome specialų kodą į footer.php, mums nebereikia nieko tvarkyti, kad pridėtume paveikslėlį prie straipsnio. Viską darome taip. Kaip įprasta, prie straipsnio pridedame paveikslėlį naudodami funkciją „Pridėti medijos failą“. Dabar failo rodymo parametruose nurodome nuorodą kaip „medijos failą“:
Natūralu, kad mes pakoreguojame matmenis taip, kad paveikslėlis tiksliai tilptų į straipsnį, tada eikite į skirtuką „Išplėstinė“ ir stulpelyje „Ryšiai“ parašykite - „Atnaujinti“. Pasiruošę!
Viskas greita, paprasta ir dar patogiau. Dmitrijus labai ačiū! Labai naudingas!
Tai paprasta! Kas ko nesupranta? Čia viskas elementaru! Šaunu yra tai, kad padidinimo efektą galiu suteikti ne visiems vaizdams, o tik tiems, kuriuos noriu suteikti. Jei, pavyzdžiui, įterpiu paveikslėlį į straipsnį ir man nereikia jos sumažinti, kad tilptų į įrašą, tada nereikia kurti padidinimo efekto!
Viskas. Panaudok tai. O gal kas žino geresnį būdą? Rašyk komentaruose. Beje, šį scenarijų galima naudoti ne tik tinklaraštyje, bet ir įvairiose vieno puslapio svetainėse! Na, viskas, iki visų!
Pagarbiai, Aleksandras Borisovas
Sveiki, mieli pradedantieji optimizuotojai.
Pagal numatytuosius nustatymus „WordPress“ spustelėjus vaizdą vartotojas nukreipiamas į vaizdo puslapį. Sutikite – labai nepatogu, kai staiga esi perkeltas į kitą puslapį.
Kad vaizdas būtų padidintas tiesiai puslapyje, kuriame jis yra, svetainėje turite įdiegti specialų scenarijų.
Kaip tai veikia, galite pamatyti aukščiau esančiame paveikslėlyje arba nuotraukose šoninėje juostoje.
Rasti jį internete nėra problema, deja, visi pasiūlymai turi vieną trūkumą. Scenarijaus kodas, patikrintas tikrinimo priemonėje, sukelia klaidą.
Turėjau šiek tiek pasitempti ir ištaisyti šią situaciją, todėl toliau bus scenarijus, kuris puikiai veikia visuose šablonuose ir galioja.
Jo įdiegimo būdas yra prieinamas net tiems, kurie nieko nežino apie scenarijus ir programavimo kalbas apskritai.
Tuo pačiu, su puikiais rezultatais, tai leidžia apsieiti be papildinio ir reikalauja privalomo alt žymės užpildymo atitinkamu tekstu, o tai turės labai gerą poveikį svetainės optimizavimui.
Ne paslaptis, kad papildiniai sulėtina įkėlimo greitį, nes daugelis jų įdeda savo scenarijus į galvos bloką.
Ir užpildyti alt žymą dažnai tiesiog per daug laiko. Čia pat, nori ar ne, turėsi įvesti atitinkamą tekstą, nes po padidintu paveiksliuku jis atsiras kaip parašas.
Jei vaizdų yra daug, galite tiesiog nustatyti numeraciją pagal puslapius.
Kitas bruožas yra tai, kad scenarijus padidina ne viską, o tik tuos vaizdus, kurius rodote.
Patogus? Patogus. Galų gale, jei paveikslėlis originalaus dydžio puikiai tinka puslapyje, kam tada jį didinti.
Pereikime prie diegimo.
Zip su scenarijumi galite gauti visiškai nemokamai, tiesiog atsisiųsdami jį iš mano „Yandex“ disko. parsisiųsti
Po to turite įkelti jį į svetainės šaknį. Pagrindinis aplankas yra aplankas, kuriame yra wp-admin, wp-content ir pan.
Atsisiunčiame zip per FTP, išpakuojame, po to kataloge atsiranda trys failai ir vienas aplankas.
ZIP aplanką reikia ištrinti. Be to, dabar turite pašalinti, jei buvo, papildinį, kuris padidina vaizdus.
Kitas veiksmas turi būti atliktas footer.php faile. Galite pereiti per wp-content - themes - Your theme - footer.php neišeidami iš serverio.
Arba galite eiti į svetainės konsolę, tada Išvaizda – redaktorius – footer.php arba Footer. Ir taip ir taip galima.
Šiame faile, pačioje pabaigoje, prieš žymą, reikia įterpti šį kodą:
(funkcija())(
var boxes=,els,i,l;
if(document.querySelectorAll)(
els=document.querySelectorAll("a");
Box..css");
Box..js",funkcija())(
simplebox.init();
for(i=0,l=els.ilgis;i
