Zväčšiť obrázok po kliknutí na html. Skript na zväčšenie obrázkov vo WordPress. Inštalácia skriptu na zväčšenie obrázkov

Dobrý deň, milí začínajúci optimalizátori.

Vo WordPress sa používateľ štandardne po kliknutí na obrázok dostane na stránku s obrázkom. Súhlasím - je to veľmi nepohodlné, keď vás náhle vyhodí na inú stránku.

Aby sa obrázok zväčšil priamo na stránke, na ktorej sa nachádza, musíte si na stránku nainštalovať špeciálny skript.

Ako to funguje si môžete pozrieť na obrázku vyššie alebo na obrázkoch v bočnom paneli.

Nájsť ho na internete nie je problém, no bohužiaľ všetky ponuky majú jednu chybičku. Kód skriptu pri kontrole vo validátore zobrazí chybu.

Musel som sa trochu namáhať a napraviť túto situáciu, takže ďalej budeme hovoriť o skripte, ktorý perfektne funguje na všetkých šablónach, a platnom skripte.

Spôsob inštalácie je dostupný aj pre tých, ktorí nevedia nič o skriptoch a všeobecne o programovacích jazykoch.

Zároveň s výborným výsledkom umožňuje zaobísť sa bez pluginu a zahŕňa povinné vyplnenie alt tagu príslušným textom, čo bude mať veľmi dobrý vplyv na optimalizáciu stránky.

Nie je žiadnym tajomstvom, že pluginy spomaľujú rýchlosť načítania, keďže mnohé z nich umiestňujú svoje skripty do hlavového bloku.

A vyplnenie alt tagu často nestačí. Priamo tam, či sa vám to páči alebo nie, budete musieť zadať príslušný text, pretože sa zobrazí ako podpis pod zväčšeným obrázkom.

Ak je obrázkov veľa, môžete nastaviť číslovanie strán.

Ďalšou vlastnosťou je, že skript nezväčšuje všetko za sebou, ale iba tie obrázky, na ktoré ukážete.

Pohodlne? Pohodlne. Veď ak sa obrázok v pôvodnej veľkosti perfektne hodí na stránku, tak prečo ho zväčšovať.

Prejdime k inštalácii.

Zip so skriptom môžete získať zadarmo jednoduchým stiahnutím z môjho disku Yandex. Stiahnuť ▼

Potom ho musíte nahrať do koreňového adresára webu. Základný priečinok je priečinok, ktorý obsahuje wp-admin, wp-content atď.

Stiahnite si zip cez FTP, rozbaľte ho, potom sa v adresári objavia tri súbory a jeden priečinok.

Priečinok zip je potrebné odstrániť. Teraz tiež musíte odstrániť, ak existuje, doplnok, ktorý zväčšuje obrázky.

Ďalší krok je potrebné vykonať v súbore footer.php. môžete bez opustenia servera prejsť cez wp-content - themes - your theme - footer.php.

Alebo môžete prejsť do konzoly lokality, potom Vzhľad - Editor - päta.php alebo päta. A tak a tak je to možné.

V tomto súbore úplne na konci, pred značkou

, musíte vložiť nasledujúci kód:

V troch riadkoch, kde je adresa mojej stránky, ju musíte nahradiť vlastnou a môžete súbor aktualizovať.

S inštaláciou skriptu - hotovo, teraz ako určiť tie obrázky, ktoré je potrebné zväčšiť.

Obrázky načítame ako obvykle, cez nakladač, potom v režime Textového editora nájdeme odkaz na nahraný obrázok.

A pred atribút href napíšeme nasledujúcu triedu:

trieda = "simplebox"

No a to je všetko, obrázok sa kliknutím zväčší a zobrazí v strede. Riešili sme dva problémy naraz.

Samozrejme, existuje veľa spôsobov, ako zväčšiť obrázky. A hlavne používa skripty a pluginy aplikácií. Podľa môjho názoru sú takéto metódy opodstatnené v prípade zdrojov s veľkým množstvom fotografií alebo akýchkoľvek obrázkov. Môj blog taký nie je. A ako obvykle, idem cestou čo najmenšej investície času, vedomostí a zdrojov mojej stránky.

Navrhujem vám spôsob, ako zväčšiť obrázok na stránke bez použitia akýchkoľvek skriptov, ale výlučne pomocou html.

Tento spôsob zväčšovania obrázka na stránke umožní čitateľovi rýchle zobrazenie obrázka, pretože váš web nebude musieť dodatočne sťahovať skripty.

Zväčšenie obrázka na stránke

Metóda 1 - zvýšenie obrázka na webe pri umiestnení kurzora myši

Veľmi jednoduché, no, najjednoduchší spôsob, úprimne. Do vlastností obrázka musíte pridať nasledujúci kód:

Onmouseover = "this.style.width =" veľká šírka obrázka px "" onmouseout = "this.style.width =" malá šírka obrázka px ""

Keď podržíte kurzor myši, obrázok sa zväčší.
Dúfam, že pochopíte, že sa to všetko robí v textovom editore.

Metóda 2 - zväčšenie obrázka na webe kliknutím myši

Metóda je podobná, stačí nahradiť onmouseover za onclick. K vlastnostiam obrázka sa pridá nasledujúci kód:

Štýl = "width:" šírka malého obrázka px; orámovanie: 2px plné čierne; "onclick =" this.style.width = veľká šírka obrázka px "" onmouseout = "this.style.width =" malá šírka obrázka px ""

Úplne to bude vyzerať takto

Tu je výsledok a kód pre obrázok mačičky.
Po kliknutí myšou sa obrázok zväčší na veľkosť pôvodného obrázka alebo na veľkosť, ktorú určíte. Ak chcete zmenšiť veľkosť, teda vrátiť obrázok do pôvodnej veľkosti, stačí kliknúť kdekoľvek na stránku.

Dúfam, že pre vás nebolo ťažké použiť takéto metódy - pomocou html - na zväčšenie obrázka na stránke.

Vo všeobecnosti sa domnievam, že mnohí webmasteri sa neobmedzujú iba na používanie akéhokoľvek enginu a na svojich stránkach používajú html kódy.

Prečítajte si tiež:

2015-10-27T16: 07: 59 + 00: 00 Nádej Skripty a kódy zväčšenie obrázku na stránke, zväčšenie obrázku na stránke

Nadežda Trofimová [e-mail chránený] Blogová stránka správcu

Tiež by vás mohlo zaujímať:

Ako urobiť tieň textu za 5 minút

Dobrý deň, milý čitateľ môjho blogu. V tomto článku sa dozviete, ako vytvoriť tieň textu pomocou css štýlov a html kódu za 5 minút.

Ako vytvoriť tlačidlá hore-dole pre webovú stránku

Tento článok je pokračovaním článku o tom, ako vytvoriť tlačidlo pre webovú stránku.

Ako odstrániť príspevok z domovskej stránky pomocou kódu

Dobrý deň, milý čitateľ môjho blogu. Potreboval som skryť niektoré články z hlavnej stránky. Neodstraňujte ho vôbec z prístupu pre čitateľov, ale odstráňte ...

Odstránenie položiek kategórií z hlavnej stránky a RSS

Pokračujeme v zlepšovaní funkčnosti a vzhľadu stránky. Odstraňujeme nepotrebné záznamy z hlavnej stránky a RSS.

Strúhanka na wordpresse

Zdravím všetkých na stránke. Pokračujeme v zlepšovaní našich blogov, aby sme zarábali peniaze. Myslím, že pre nikoho nie je tajomstvom, že na stránke zohrávajú obrovskú úlohu. Samozrejme, nie každý chápe, ako a po akom čase začnú ovplyvňovať, ale faktom zostáva. Na zlepšenie týchto faktorov musíme zlepšiť použiteľnosť stránky: pridať, vylepšiť dizajn, urobiť ho atraktívnym a jednoduchým. Vykonajte správne spracovanie obrázkov na stránke. Mnohí by chceli vedieť odpoveď na to, ako urobiť obrázok na stránke, keď kliknete na ktorý sa zväčší. Toto zvýšenie je implementované na mojej webovej stránke. Príjemne súhlaste s tým, že si môžete zväčšiť obrázky, vidieť všetku krásu na celej obrazovke.

Dnes sa vám pokúsim odhaliť toto tajomstvo zväčšovania. Vo všeobecnosti možno obrázok zväčšiť niekoľkými akciami:

Môžete ho napríklad zväčšiť podržaním tlačidla myši
Druhou možnosťou by bolo priblíženie pri stlačení.

Samozrejme, ak používate WordPress, tak najjednoduchšou a najjednoduchšou možnosťou by bolo vyhľadať šablónu s funkciou, ktorú potrebujeme, verte, že takýchto šablón je teraz na internete obrovské množstvo. V 95 percentách prípadov teda nájdete presne predlohu so zväčšeným obrázkom. Ale čo ak sa vám práve tento motív páči a chceli by ste zväčšiť obrázok iba na ňom. Alebo dokonca napíšete svoju prvú stránku na kúsok html, o čom samozrejme veľmi pochybujem.

Na zväčšenie obrázku pripájame Java skripty

Konečným výsledkom bude zväčšený obrázok podľa typu. Dobre, toto všetko je filozofia, aby sme zväčšili obrázok, musíme pripojiť knižnicu jQuery. Nepamätám si, ale zdá sa, že v nejakej lekcii som písal o tejto knižnici, ale ak ste zabudli, pripomeniem vám to. Na pripojenie knižnice potrebujete vložte dva kódy.

Malo by byť zrejmé, že existuje veľa knižníc jQuery a v rôznych prípadoch sú pripojené rôzne knižnice.

Ak napíšete svoju stránku v holom html, potom na vloženie obrázka budete potrebovať tento kód

Upozorňujeme, že v tomto prípade budete musieť vložiť obrázok do priečinka s obrázkami a zadať názov obrázka. Nezabudnite, že súbory knižnice skriptov Java by sa mali nachádzať na rovnakom mieste ako hlavná stránka webu, inak k nim stačí napísať inú cestu. Môžete si stiahnuť knižnicu súborov na zväčšenie obrázka na stránke. No a čo je teraz najdôležitejšie, ak chcete svoj obrázok zväčšiť, pridajte k nemu nasledujúce vlastnosti.

Zdravím všetkých čitateľov blogu. Na mojom blogu nie je kolónka s publikovanými článkami úzka. Screenshoty a obrázky je možné umiestniť vo veľkých veľkostiach, aby bolo na nich všetko dobre viditeľné. A predsa, nedávno, keď som začal písať recenziu programu Majento PositionMeter, vytvoreného na kontrolu pozície stránky vo vyhľadávačoch, chcel som zobraziť snímku obrazovky na celej obrazovke.

Samozrejme, nie pre krásu, ale pre návštevníkov blogu, užívateľský komfort. V mojom prasiatku vedomostí leží hotové spoľahlivé riešenie, no poháňaný zvedavosťou som sa rozhodol trochu pogúgliť na internete a nájsť niečo zaujímavé.

Dopadlo to ako v „Krokodílovi Dundee“ – prechádzka sa vliekla. Vypadol z pracovného plánu, porušil všetky limity, ktoré si sám vyčlenil na vyhľadávanie. No Boh ho žehnaj, dúfam, že to nie je márne. Možno bude moja práca pre niekoho užitočná. Do pozornosti dávam dve dobré riešenia na zväčšenie obrázku po stlačení.

Druhé riešenie predvediem na svojom blogu. Bohužiaľ, na rozdiel od Alexandra, budete musieť ako príklad použiť iba snímky obrazovky programu.

Zväčšenie obrázka po kliknutí pomocou Highslide JS

Pomocou skriptu Highslide JS vyvinutého nórskou spoločnosťou Highsoft AS môžete okrem zväčšovania obrázka po kliknutí vytvárať mediálne galérie, vyskakovacie okná fungujúce v html, ajax, iframe a flash. Poďme k akcii. Prejdite na stránku na stiahnutie skriptu http://highslide.com, stiahnite si nový archív a rozbaľte ho.

Nájdite súbor s príponou indexu, otvorte ho pomocou ľubovoľného prehliadača, zobrazí sa okno s príkladmi. Vyberte si ten, ktorého vizuálne efekty sa vám páčia. Existuje päť pripravených možností na konfiguráciu skriptu na zväčšenie obrázka po kliknutí.

Vytvorte nový textový súbor na ploche, skopírujte časti kódu zvýraznené na snímke obrazovky červenými a zelenými štvorčekmi v malej vzdialenosti od seba. Poďme si ich upraviť. Prvý kód budeme musieť umiestniť na stránky nášho webu medzi značky head. Za čo je zodpovedný? Prečítajme si komentáre.

Komentár pod číslom jeden hovorí, že je potrebné zadať cesty k súborom js a css a určite sa musia nachádzať na našom serveri. Komentáre vymažeme, napíšeme cestu, kde sa bude nachádzať adresár so súbormi skriptov. Všetky dvojbodky nahradíme názvom sťahovaného adresára - highslide-4.1.13. A súbor highslide.js nahradíme funkčnejším highslide-full.js. Zrazu v budúcnosti budete chcieť použiť ďalšie žemle Highslide JS. Druhý komentár hovorí, že je dôležité špecifikovať cestu k adresáru s grafikou skriptu. A tu môžete zmeniť nastavenia. Malo by to dopadnúť nejako takto.

< ! --Highslide JS -->

< link rel ="stylesheet" type ="text/css" href ="/highslide-4.1.13/highslide/highslide.css"/>

Teraz je potrebné umiestniť hotový kód do sekcie head pred uzatváraciu značku. Na svojom blogu WordPress som ho umiestnil do súboru footer.php použitej témy pred uzatváraciu značku

.

Pustíme sa do úpravy druhého kódu, ktorý vložíme priamo do textových stránok, aby sme po kliknutí zväčšili obrázok. Pre uľahčenie používania ho privedieme do nasledujúcej podoby:

Pridanie textu do kontextového obrázka

Teraz vyhoďme všetko nepotrebné z adresára highslide-4.1.13.

Nájdite priečinok highslide, otvorte ho a odstráňte všetko okrem priečinka s grafikou a zahrnutých súborov highslide-full.js, highslide.css, highslide-ie6.css. Umiestnite highslide-4.1.13 do koreňového adresára vašej stránky. Scenár je pripravený. Môžete vyplniť obrázky, umiestniť kód skriptu na stránku a vychutnať si efekt zväčšenia obrázka po kliknutí.

Aby skript Highslide JS správne fungoval vo WordPress, musí sa najprv vyriešiť jeden problém. Pri prechode z html editora do vizuálneho zmizne časť kódu skriptu - onclick = "return hs.expand (this)".
Otvorte súbor functions.php témy a pridajte nasledujúci kód nižšie, pred?>.

// funkcia filtra change_mce_options ($ initArray) ($ initArray ["verify_html"] = false; $ initArray ["cleanup_on_startup"] = false; $ initArray ["cleanup"] = false; $ initArray ["forced_root_block"] = false; $ initArray ["validate_children"] = false; $ initArray ["remove_redundant_brs"] = false; $ initArray ["remove_linebreaks"] = false; $ initArray ["force_p_newlines"] = false; $ initArray ["force_br_newlines;"] $ initArray ["fix_table_elements"] = false; $ initArray ["entity"] = "160, nbsp, 38, amp, 60, lt, 62, gt"; return $ initArray;) add_filter ("tiny_mce_before_init", "change_mce_options" );

// filter

function change_mce_options ($ initArray) (

$ initArray ["verify_html"] = false;

$ initArray ["cleanup_on_startup"] = false;

$ initArray ["cleanup"] = false;

$ initArray ["forced_root_block"] = false;

$ initArray ["validate_children"] = false;

$ initArray ["remove_redundant_brs"] = false;

$ initArray ["remove_linebreaks"] = false;

$ initArray ["force_p_newlines"] = false;

$ initArray ["force_br_newlines"] = false;

$ initArray ["fix_table_elements"] = false;

$ initArray ["entity"] = "160, nbsp, 38, amp, 60, lt, 62, gt";

return $ initArray;

add_filter ("tiny_mce_before_init", "change_mce_options");

Zmeny uložíme, problém je vyriešený.

Pre pohodlie používania skriptu na zväčšenie obrázkov po kliknutí môžete do HTML editora WordPress pridať ďalšie tlačidlá.

Ďalšie tlačidlá v html editore pre Highslide JS

Znova otvorte súbor functions.php témy a vložte nasledujúci kód úplne dole, predtým?>.

// Ďalšie tlačidlá html editor add_action ("admin_print_footer_scripts", "add_sheens_quicktags"); funkcie add_sheens_quicktags () (?>

// Dodatočné tlačidlá HTML editor

add_action ("admin_print_footer_scripts", "add_sheens_quicktags");

funkcia add_sheens_quicktags () (

< ? php

Upozorňujeme, že v tlačidle mo1 som nastavil maximálnu povolenú šírku zobrazenia miniatúr pre šírku môjho blogu = "730". Ak potrebujem menšiu miniatúru, jednoducho zmením hodnotu. Nahraďte povolenú šírku svojou hodnotou. Môžete tiež nastaviť výšku.

Uložte, prejdite do textového editora, pozrite si nasledujúce.

Používame tlačidlá div, mo1, mo2, float-l, float-r, požadovaný kód skriptu Highslide JS je teraz možné zobraziť rýchlo a pohodlne. Zostáva napísať cestu k obrázkom, vyplniť nadpis, alt a napísať doplňujúci text k obrázkom.

Pomocou editora Highslide JS si môžete vytvoriť vlastnú konfiguráciu skriptu. Urobil som to len pre svoj blog.

Použitie editora Highslide JS

V ľavom stĺpci otvoreného okna stránky vývojárov prejdite do editora Highslide JS kliknutím na tlačidlo Editor. Otvorí sa pred nami okno – Vitajte v editore Highslide.

Kliknite na zelené tlačidlo Začíname!

Krok za krokom, ako používať editor Highslide JS. Krátke odporúčania.

Štandardne sa otvorí karta Všeobecné.

generál

Jazyk

Celkovo existuje 35 jazykových lokalít. Z toho sú tri postsovietske oblasti. litovský, ruský, ukrajinský. Nie je ťažké urobiť preklad do jazyka záujmu. Ak chcete trochu preložiť, nižšie pochopíte, v ktorom súbore sa to všetko nachádza. Vyberieme si požadovaný jazyk a ideme ďalej.

Príklad načítania

Vyberieme možnosť zobrazenia zväčšenia obrázka po stlačení. Kliknite na tlačidlo so šípkou, vo vyskakovacom okne sa zobrazia možnosti. Zastavíme sa pri tom, čo máme radi. Prví idú len štyria. Zvyšok na iné úlohy - zobrazenie galérie, vyskakovacie okná. Použil som tlačidlo Bez okraja, jednoduché zatvorenie.

Biely zaoblený obrys
Biely okraj a tieň
Bez okrajov, jednoduché tlačidlo zatvorenia
Žiadny obrys, farebné okraje CSS

Ak chcete zobraziť niektorú z možností, najskôr kliknite na obrázok vpravo a potom opakujte efekty. Vyberte si ten, ktorý sa vám páči, a prejdite na ďalšiu kartu. Ďalej vo všetkých nastaveniach najskôr kliknite na obrázok vpravo a potom pomocou zmien v nastaveniach editora sledujeme, ako bude všetko vyzerať vizuálne.

Galéria a HTML

Tieto dva body som preskočil, pretože zatiaľ nie sú zahrnuté v mojich úlohách. Zatiaľ ma zaujíma len zväčšenie obrazu pri stlačení.

Štýl

Miniatúra
Vysvetľujúci štítok

Prispôsobte vzhľad a efekty miniatúry.

Tri nastavenia na výber. Pod miniatúrou môžete zobraziť rady.

Žiadne – žiadna nápoveda, Nižšie uvedený text – s vysvetľujúcim textom, Ikona a text nižšie – s obrázkom a textom. Zdá sa mi, že rady sú zbytočné.

Tlačidlo ohraničenia miniatúr

Kliknutím na toto tlačidlo môžete upraviť hrúbku a farbu okrajov miniatúry.

Štýl štítku

Zaškrtneme náhľad a vyberieme zobrazenie ikony sťahovania. To v prípade, že ste klikli na obrázok a jeho zvýšenie sa neponáhľa na zobrazenie.
Štýly vyskakovacích okien
Pozadie

Tu môžete zmeniť vzhľad vyskakovacieho okna. Zmeňte pozadie titulku obrázka. Zmeňte šírku a farbu okrajov zväčšeného obrázka.
Stmievanie
Aplikujte masku na stlmenie stránky

Ak chcete, aby sa pozadie stránky po kliknutí na obrázok zväčšilo stmavlo, zaškrtnite políčko v tomto nastavení. Kliknutím na Možnosti stmievania upravte možnosti stmievania, vyberte farbu.

Správanie

V správaní prispôsobujeme správanie kontextového okna.
Animácia
Zmiernenie
Štyri možnosti animácie pri zobrazení zväčšeného obrázka.

Tlačidlo pokročilej animácie

Upravte rýchlosť objavenia sa a miznutia zväčšeného obrázka.

Skryť miniatúru pri rozbalení (nie galéria)

Ak pri zväčšovaní obrázka zaškrtnete políčko vedľa tejto položky, samotná miniatúra bude neviditeľná.
Veľkosť a zarovnanie kontextového okna
Upravte veľkosť zväčšujúceho sa okna a jeho zarovnanie.

Zarovnanie

Vyberieme predvolenú možnosť na zarovnanie zväčšeného obrázka. Zvolil som zobrazenie zväčšeného obrázku na stránke - avto.

Tlačidlo pokročilého zarovnania

Kliknutím na toto tlačidlo môžete nastaviť šírku a výšku pre minimálnu, maximálnu a pevnú veľkosť obrázka. Upravte okraje - hore, vpravo, dole, vľavo.

Prekrytia

Pridanie textu do zväčšeného obrázka.
Môj podpis na zväčšenom obrázku sa po kliknutí zobrazí v spodnej časti. Názov sa zobrazí v hornej časti. V oboch odsekoch sú navrhnuté štyri rovnaké zdroje, z ktorých je zobrazený text so zväčšeným obrázkom. Pomocou názvu obrázka, názvu a alt miniatúry a následného vlastnoručne napísaného textu zabaleného do div.

Názov je prevzatý z názvu veľkého obrázka, podpis je z textu zabaleného do div.

Odškrtol som ďalšie dve položky. Tlačidlo Zavrieť – zobrazí krížik na zatvorenie v pravom hornom rohu. Zobraziť kredity – zobrazí diskrétny odkaz na stránku vývojára.

Dosiahli sme, čo sme chceli, vzhľad vyskakovacieho okna s obrázkom vyhovuje, ideme ďalej.

Úprava súborov stránok, integrácia skriptov

Pripájame vlastnú konfiguráciu skriptu podľa troch odporúčaných krokov.

Najprv otvorte v ukážkovom okne záložku Publikovať, kliknite na Áno, stiahnite si archív s vlastnou konfiguráciou do počítača kliknutím na Stiahnuť zip archív. Potom ho rozbaľte a nechajte ho zatiaľ na pokoji. Skopírujte obsah Step2 a Step3 do vytvoreného textového súboru pre ďalšie úpravy, zatvorte okno.

Aby skript fungoval, musíme zadať cesty k súborom priamo k nemu, priečinku s grafikou a štýlom CSS napísaním kódu do sekcie head na stránkach lokality. Toto je kód skopírovaný z kroku 2, začnime ho upravovať. V mojom prípade to vyzeralo takto:

Ahoj! Stáva sa to takto: prejdete na blog, uvidíte obrazovku a to, čo je na nej, vôbec nie je vidieť. Myslíte si teda, čo chcel autor tohto príspevku v ňom ukázať? Existuje však cesta von - skript na zväčšenie obrázka po kliknutí!

Veľmi pekná vec, tento scenár. Presvedčte sa sami, po kliknutí sa zvyšuje:

(možno kliknúť)

V skutočnosti existuje veľa rôznych efektov zväčšenia obrázkov v blogovom príspevku, ale toto je podľa mňa najlepší efekt.

Kto bude mať prospech z tohto skriptu na zväčšovanie obrázkov?

V prvom rade tie kto robí snímky obrazovky s vysvetleniami ... Napríklad, ak sa rozhodnete urobiť pre svoj článok objemnú snímku obrazovky, niečo ste tam namaľovali, aby bol materiál zrozumiteľnejší, hodili ste to do článku, ale jednoducho sa to celé nezmestí na vašu blogovú stránku, takže wordpress sa automaticky skomprimuje, aby neprekročil hranice stránky. A po stlačení je viditeľnosť, čitateľnosť značne znížená. Mal som to viac ako raz, tak som sa rozhodol použiť tento skript na zväčšenie obrázka bez straty kvality.
Ak len nechcete v článku uverejňovať objemové obrázky ... Stáva sa, že potrebujete zobraziť veľa obrázkov v jednom článku, ale nechcete, aby tieto obrázky zaberali veľa miesta, potom je najlepšou voľbou inštalácia skriptu! A vo všeobecnosti, ak nechcete umiestňovať volumetrické obrázky, potom je tento skript jednoducho potrebný.

Dobre. Teraz musíme skript nainštalovať na našu stránku. Inštalácia prebieha v 3 krokoch:

Stiahnite si skript a nahrajte ho do koreňového adresára vašej lokality.
Nainštalujte požadovaný kód na svoj web.
Vhodíme obrázok do článku a nastavíme jeho zobrazenie.

Takže začnime.

Druhá fáza, ktorú máme, je inštalácia kódu skriptu. Kde nainštalovať kód? Dá sa nastaviť v header.php, footer.php, function.php, index.php, ale ja zvyčajne nastavujem footer.php, pred značkou

, aby sa kód načítal ako posledný.

Tu je samotný kód:

A tu je to, čo som dostal:

(možno kliknúť)

Teraz prichádza zábavná časť.

Aby skript zväčšil obrázky bez straty kvality, potrebujete:

1. Po nahraní obrázka do článku je potrebné otvoriť "Možnosti obrázka" a v odseku " Odkaz"vybrať" Mediálny súbor" .