Ha rákattint, a kép html-ként növekszik. Szkript a képek nagyításához a WordPressen

Természetesen a képek nagyításának számos módja van. És főleg szkripteket és beépülő modulokat használ. Véleményem szerint az ilyen módszerek indokoltak a hatalmas számú fotóval vagy bármilyen képpel rendelkező források esetében. A blogom nem ilyen. És szokásom szerint a legkevesebb idő, tudás és erőforrás befektetés útján járok el. Javaslom a növekedés egyik módját ...

Ön is érdekelheti:

Hogyan készítsünk szöveges árnyékot 5 perc alatt

Helló kedves blogom olvasója. Ebben a cikkben megtudhatja, hogyan készíthet 5 perc alatt a használatával css stílusok és html kód szöveg árnyéka.

Hogyan készítsünk felfelé mutató gombokat egy webhelyhez

Ez a cikk folytatja azt a cikket, amely arról szól, hogyan készíthetünk egy up gombot egy webhelyhez.

Hogyan lehet eltávolítani egy bejegyzést a honlap kóddal

Helló kedves blogom olvasója. Szükségem volt arra, hogy néhány cikket elrejtsek a főoldalról. Egyáltalán ne távolítsa el az olvasók hozzáférése elől, de távolítsa el ...

Távolítsa el a kategória bejegyzéseket a főoldalról és az RSS-ről

Tovább javítjuk a funkcionalitást és kinézet webhely. Eltávolítjuk a felesleges bejegyzéseket a főoldalról és az RSS-ről.

Zsemlemorzsa a wordpressen

A cikkben bemutatott információk elsősorban a kezdő webmestereknek szólnak.

Leírás

A "Jquery Image Magnify v1.11" szkript lehetővé teszi az oldal bármely képének a kívánt méretre történő nagyítását. Növelje vagy térjen vissza ide kezdeti állapot akkor fordul elő, amikor az egérgombot a kép fölé nyomják. A képet egy példányban készítik el a szükséges méretekkel, és a jquery.magnifier.js fájl beállításainak megfelelően nagyítják.

Ha problémái vannak a fájlok letöltésével, például egy böngésző segítségével, másolja a linket ( jobb gomb egér → linkcím másolása), és töltse le a fájlt a Download Master segítségével.

Az archívum letöltése után csomagolja ki a számítógép aktuális mappájába. A jQueryImageMagnify mappában a következőket fogja látni:

• képek mappa hat képpel JPG formátumban;
• js mappa a jquery.magnifier.js java script fájllal és a magnify.cur kurzorfájllal (nem minden böngészőben jelenik meg!);
• fájl demo anyaggal demo.html.

Nyissa meg az utóbbit a használt böngészőben, és ellenőrizze, hogy a bemutató működik-e.

A kapott példában a "Jquery Image Magnify v1.11" csak akkor működik, ha az internet be van kapcsolva, mivel a fájl legújabb verzió jQuery könyvtárak - A "jquery.min.js" letöltése a Google API webhelyéről történik.

Ha azt szeretné, hogy minden önállóan működjön, töltse le és kapcsolja össze a jQuery könyvtár legújabb verzióját a hivatalos webhelyről.

Ha már rendelkezik a legújabb vagy újabb jQuery könyvtárral (a cikk megjelenésekor - a 3.1.1-es verzió), vagy a jQuery webhelyének vagy a Google API-jának távoli kapcsolatát használja, akkor természetesen érdemes ne csatlakoztassa újra.

Webhely-telepítési utasítások (egyetlen kép)

1. lépés Válassza ki a kívánt képet, és töltse fel a képek mappába, amely a webhely gyökérmappájában található.

2. lépés. Töltse fel a js mappa tartalmát az azonos nevű mappába a webhely gyökérkönyvtárában.

3. lépés. A következő jQuery kapcsolati kódot és a jquery.magnifier.js java parancsfájlt hozzá kell adni az oldal fej- vagy törzsrészéhez:

4. lépés. Ezt a kódot az oldal törzsrészében kell elhelyezni:

Magyarázat:

A választott képfájl elérési útja.

Képméretek nagyítás előtt. Jelenítse meg őket, ahogy jónak látja.

Egyszerűen fogalmazva, a törzs szakaszban be kell illeszteni a normál képkódot a class \u003d "magnify" hozzárendelésével. Ha a kép explicit méretattribútumokat (szélesség és magasság) tartalmaz, akkor ez lehetővé teszi a felhasználó számára, hogy a képet a jquery.magnifier.js szkriptfájl beállításainak megfelelően nagyítsa. Ha a méretek nincsenek megadva, akkor a kép tényleges méretei lesznek a nagyítás alapja.

Lássuk az eredményt:

Képelhelyezési variációk

Magyarázat:

Helyezés a bal oldalon.

Helyes pozícionálás.

A kép eredeti méretei a szélesség és a magasság attribútumokkal módosíthatók.

JQuery.imageMagnify \u003d (dsettings: (nagyítás: 5, // képnagyítási arány (alapértelmezett - 3) időtartam: 500, // az animáció időtartama milliszekundumban (alapértelmezés szerint 500) imgopacity: 0,2 // az eredeti kép átlátszatlansága, amikor a nagyított kép eltakarja (alapértelmezett - 0,2)

Hogyan lehet eltávolítani a képkeretet?

Ezt a kérdést szándékosan külön alfejezetbe helyeztem, mivel az egyik látogatótól származott.

Ahhoz, hogy a megnagyított kép az egérrel való kattintás után keret nélkül jelenjen meg, a következőkre van szükség:

• Nyissa meg a jquery.magnifier.js fájlt. Ezt bármely szövegszerkesztőben megteheti, de én a Notepad ++ programot ajánlom
• Keressen egy darab kódot (a Notepad ++ alkalmazásban az 51. sor lesz)
  var $ clone \u003d $ target.clone (). css ((pozíció: "abszolút", bal: 0, felső: 0, láthatóság: "rejtett", szegély: "1 kép egyszínű szürke", kurzor: "mutató")). appendTo (document.body)
• A jelölővel kijelölt sorban állítsa a határértéket nulla értékre, vagy változtassa meg a szürke (szürke) színt fehérre (fehér) vagy bármely más, a témának megfelelőt. Ez minden!

Két oldal. 1. oldal vége.

A törmelékből és rájött - IDŐ! Itt az ideje, hogy a blogba beillesztett képeket cikkekbe illessze be, így amikor rájuk kattint, azok kinagyulnak és eredeti méretben jelennek meg.

Sőt, hogy a nagyítási hatás kényelmes legyen a felhasználó (te) számára, így én, mint szerző, sokáig nem piszkálok kódokban (beállításokban), amikor képeket helyezek el a cikkekbe, és hogy a blog terhelése minimális. Nem akarok mindenféle plugint használni, és ugyanazt a Mysql adatbázist betölteni.

A szakemberekhez fordultam segítségért, és elmondták, mit kell tennem, és mindent beállítottam mindössze 3 perc alatt. Ismét, olyan pluginok használata nélkül, mint az Auto Highslide stb. Ne húzzuk sokáig nekem a macskát ... és kezdjünk hozzá az üzlethez.

A szkriptek sokféle változatát kipróbáltam a képek nagyításához, de arra a szkriptre koncentráltam, amely ezt a hatást létrehozza. Nézzen meg egy példát, kattintson a bal oldali képre:

Érdekes hatás. A képre kattintunk, és nem új ablakban nyílik meg (ami nagyon kényelmetlen), hanem ugyanazon az oldalon kinagyított formában nyílik, gyönyörű kereszttel keretben, és a kép leírása helyébe lép.

Ha tetszik a képek nagyításának ez a hatása, használhatja! Az alábbiakban írok róla.

Ez a hatás itt is egyszerűen szükséges. Vannak képek, amelyeken nagyon alaposan meg kell nézni, hogy valamit láthasson ott. Akinek gyenge a látása, egyáltalán nem lát semmit. Hasznos lesz egy képnagyító szkript!

Tehát kezdjük. Minden HÁROM egyszerű lépésben történik:

1. Töltse le a szkriptet és töltse fel a tárhelyére (szerverre)
2. Adjon hozzá egy kis kódot a footer.php fájlhoz
3. Vegyen fel képeket a blog cikkei közé.

GOW! Töltse le magát a szkriptet... Az összes tartalmat a blogunk gyökerébe dobjuk. A bloggyökér a fő blogkönyvtár, ahol olyan mappák találhatók, mint a wp-admin, a wp-content stb. Belek! Megcsinálták!

A második lépés egy speciális kód hozzáadása a blogtéma footer.php fájljához. Itt van:

Figyelem! A kódban cserélje le a site.ru fájlt a domainjére. Hozzá kell adnia a footer.php fájlhoz a záró címke előtt

Belek! Nos, alapvetően mindent! Most a legalapvetőbb részről! Képeket beszúrunk a cikkekbe, hogy rájuk kattintva növekedjenek, amint azt fentebb egy példával bemutattam. Általában lásd. Itt minden egyszerű, bár eleinte nehéznek tűnik valakinek! Képeket szokás szerint illesztek be a bejegyzésbe a szövegszerkesztő gombján keresztül - Adathordozó hozzáadása:

Oké. Most csak törölöm mindezt (ami a fenti képen van) a kép html kódját a szerkesztőből, és ezt illesztem be a helyére:

Ennek eredményeként ezt kapjuk:

Látjuk, hogy fent van egy link egy eredeti méretű képhez, alul pedig ugyanaz a kép (ugyanaz az URL), de a méret csökkentése érdekében. Egyébként az optimalizálásról sem feledkezünk meg, a képnek is van altja. Minden klassz!

FRISSÍTÉS! A cikkhez fűzött megjegyzésekben Dmitrij Shkurin a szkript használatának még egyszerűbb módját javasolta. Most már egyáltalán nem kell belemélyednie a kódba:

Vagyis amikor betesszük a szkriptet a blog gyökerébe + egy speciális kódot adunk a footer.php fájlhoz, már nem kell semmit választanunk ahhoz, hogy képet adjunk a cikkhez. Mindent a következőképpen csinálunk. Szokás szerint képet adunk a cikkhez a „Médiafájl hozzáadása” funkcióval. Most a fájlmegjelenítési paraméterekben adja meg a linket - "média fájl":

természetesen úgy állítjuk be a méreteket, hogy a kép pontosan illeszkedjen a cikkbe, majd lépjünk a "További" fülre, és az "Attitűd" oszlopba írjuk - - "Frissítés". Kész!

Minden gyors, egyszerű és még kényelmesebb. Dmitry, köszönöm szépen! Nagyon hasznos!

Ez ennyire egyszerű! Ki mit nem ért? Itt minden elemi! Az a jó, hogy nem minden képnek tudom adni a nagyítás hatását, hanem csak azoknak, amelyeket szeretnék adni. Ha például beillesztek egy képet egy cikkbe, és nem szükséges csökkentenem, hogy beleférjen a bejegyzésbe, akkor nem szükséges nagyítási hatást létrehozni!

Ez az. Használd. Vagy esetleg valaki tud egy jobb módot? Írj a megjegyzésekbe. Egyébként ez a szkript nemcsak blogon, hanem különféle egyoldalas webhelyeken is használható! Rendben, viszlát mindenkit!

Üdvözlettel: Alekszandr Boriszov

Helló kedves kezdő optimalizálók.

A WordPress programban alapértelmezés szerint egy képre kattintva a felhasználó a képoldalra kerül. Egyetértek - nagyon kényelmetlen, ha hirtelen egy másik oldalra dobnak.

Ahhoz, hogy a kép közvetlenül azon az oldalon növekedjen, amelyen található, egy speciális szkriptet kell telepítenie a webhelyre.

A fenti képen vagy az oldalsáv képein láthatja, hogyan működik.

Az interneten történő megtalálása nem jelent problémát, de sajnos minden ajánlatnak van egy hibája. Ha a szkript kódja az ellenőrzőben ellenőrzi, hibát ad.

Kicsit meg kellett erőlködnöm és kijavítanom ezt a helyzetet, hogy tovább beszéljünk egy szkriptről, amely minden sablonon jól működik, és egy érvényes szkriptről.

A telepítés módja még azok számára is elérhető, akik semmit sem tudnak a szkriptekről és általában a programozási nyelvekről.

Ugyanakkor kiváló eredménnyel lehetővé teszi, hogy plugin nélkül is boldoguljon, és magában foglalja az alt tag kötelező kitöltését a megfelelő szöveggel, és ez nagyon jó hatással lesz a webhely optimalizálására.

Nem titok, hogy a bővítmények lelassítják a letöltési sebességet, mivel sokan közülük a fejblokkba helyezik a szkripteket.

Az alt címke kitöltése pedig gyakran nem elegendő idő. Ha tetszik, ha nem, rögtön be kell írnia a megfelelő szöveget, mivel ez aláírásként jelenik meg a kibővített kép alatt.

Csak beállíthatja az oldalszámozást, ha sok kép van.

Egy másik jellemző, hogy a szkript nem nagyít mindent egymás után, hanem csak azokat a képeket, amelyekre mutat.

Kényelmesen? Kényelmesen. Végül is, ha a kép eredeti méretében tökéletesen illeszkedik az oldalra, akkor miért kell nagyítani.

Térjünk át a telepítésre.

Ingyenesen letölthet egy ZIP-t egy szkript segítségével, ha egyszerűen letölti a Yandex lemezről. Letöltés

Ezt követően fel kell töltenie a webhely gyökérkönyvtárába. Az alapmappa az a mappa, amely wp-admin, wp-content stb.

Töltse le a zip-t FTP-n keresztül, bontsa ki, majd három fájl és egy mappa jelenik meg a könyvtárban.

A zip mappát törölni kell. Ezenkívül el kell távolítania a képeket nagyító plugint, ha van ilyen.

A következő lépést a footer.php fájlban kell elvégezni. a szerver elhagyása nélkül áttekintheti a wp-content - themes - a saját témáját - footer.php.

Vagy keresse fel a webhelykonzolt, majd a Megjelenés - Szerkesztő - footer.php vagy a Lábléc elemet. És így és így lehetséges.

Ebben a fájlban a legvégén, a címke előtt, be kell írnia a következő kódot:

Három sorban, ahol a webhelyem címe van, ki kell cserélnie a sajátjával, és frissítheti a fájlt.

A szkript telepítésével befejeződött, most hogyan lehet meghatározni azokat a képeket, amelyeket meg kell nagyítani.

A képeket a szokásos módon töltjük be a betöltőn keresztül, majd Szövegszerkesztő módban megtaláljuk a feltöltött kép linkjét.

A href attribútum előtt pedig a következő osztályt írjuk:

class \u003d "simplebox"

Nos, most ennyi, a kép kinagyul, ha rákattint és megjelenik a közepén. Két kérdést egyszerre oldottunk meg.

Üdvözlet mindenkinek az oldalon. Folyamatosan fejlesztjük blogjainkat, hogy pénzt keressünk. Azt hiszem, nem titok, hogy hatalmas szerepet játszanak az oldalon. Természetesen nem mindenki érti, hogyan és milyen idő után kezdenek befolyásolni, de a tény továbbra is fennáll. Ezen tényezők javítása érdekében javítanunk kell az oldal használhatóságát: hozzá kell adni, javítani kell a dizájnt, vonzóvá és egyszerűvé kell tenni. Végezze el a képek megfelelő feldolgozását a webhelyen. Sokan szeretnék tudni a választ arról, hogyan készítsünk képet az oldalon, amikor rákattintunk, amelyre kinagyítottuk. Ez a növekedés a webhelyemen valósul meg. Elég kellemesen állapodjon meg, hogy kinagyíthassa a képeket, az összes szépséget teljes képernyőn láthassa.

Ma megpróbálom felfedni előtted a nagyításnak ezt a titkát. Általában a kép több művelettel bővíthető:

• Például megnövelheti az egér gombját
• A második lehetőség a nagyítás, ha megnyomja

Természetesen, ha WordPress-t használ, akkor a legegyszerűbb és legegyszerűbb megoldás az, ha megtalálunk egy sablont a szükséges funkcióval, hidd el, az interneten ma már rengeteg ilyen van. Tehát az esetek 95 százalékában pontosan sablont talál nagyított képpel. De mi van, ha tetszik ez a téma, és csak rajta szeretné kinagyítani a képet. Vagy megírod az első webhelyedet egy darab html-re, amiben bizony nagyon kétlem.

A kép nagyításához Java szkripteket kötünk össze

A végeredmény megnövelt kép lesz, típusonként. Oké, mindez filozófia, a kép nagyításához meg kell csatlakoztatnunk a jQuery könyvtárat. Nem emlékszem, de úgy tűnik, hogy néhány órában írtam erről a könyvtárról, de ha elfelejtetted, emlékeztetlek. A könyvtár csatlakoztatásához meg kell Helyezzen be két kódot.

Meg kell érteni, hogy sok a jQuery könyvtár, és különböző esetekben különböző könyvtárak vannak összekapcsolva

Ha puszta html-be írja a webhelyét, akkor egy kép beszúrásához szüksége van erre a kódra

Felhívjuk figyelmét, hogy ebben az esetben be kell helyeznie a képét a Képek mappába, és meg kell adnia a kép nevét. Ne felejtsük el, hogy a Java szkriptkönyvtár fájljainak ugyanabban a helyen kell lenniük, mint a webhely főoldalának, különben csak írjon nekik egy másik elérési utat. A fájl nagyításához letöltheti a könyvtárat. Nos, és ami a legfontosabb most, ha meg akarja nagyítani a képet, akkor adja hozzá a következő tulajdonságokat.