När du trycker på ritningen ökar HTML. Skript för att öka bilderna på WordPress

Naturligtvis finns det ganska många sätt att öka bilderna. Och använder i grunden skript och plug-ins. Enligt min åsikt är sådana metoder motiverade när det gäller resurser med ett stort antal bilder eller några bilder. Min blogg är inte så. Och som vanligt går jag längs den minsta kostnaden för tid, kunskap och resurser på din webbplats. Jag erbjuder dig ett sätt att öka ...

Kanske kommer du också att vara intresserad av:

Hur man gör skugg i text på 5 minuter

Hej, kära läsare av min blogg. I den här artikeln lär du dig hur du skapar på 5 minuter med styles CSS. och hTML-kod Skugga av text.

Hur man gör knappar upp för webbplatsen

Den här artikeln är skriven i fortsättningen av artikeln om hur du gör upp knappen för webbplatsen.

Så här tar du bort posten med huvudsida Med kod

Hej, kära läsare av min blogg. Jag hade behov av att gömma en del av artiklarna från huvudsidan. Ta inte bort alls från åtkomst till läsare och ta bort ...

Ta bort rubriken från huvudsidan och RSS

Vi fortsätter att förbättra funktionaliteten och utseende Webbplats. Vi tar bort onödiga poster från huvudsidan och RSS.

Brödsmulor på WordPress hemsida

Informationen som presenteras i denna artikel är främst inriktad på nybörjare webbansvariga.

Beskrivning

Med JQuery Image Magnify v1.11-skriptet kan du öka bilden på sidan till önskat värde. Öka eller återgå till initialtillstånd Det uppstår när du trycker på musknappen som induceras till bilden. Bilden förbereder sig i ett fall med de nödvändiga dimensionerna och ökar enligt inställningarna i filen jquery.magnifier.js.

Om problem uppstår när du hämtar filer, till exempel via webbläsaren, kopiera länken ( höger knapp Möss → Kopiera länkadress) och ladda ner filen via nedladdningsmästaren.

Efter nedladdning av arkivet, packa upp det i den aktuella mappen på din dator. I mappen jquerimagemagnify ser du:

• bildermapp med sex bilder i JPG-format;
• jS-mappen med skriptfilen jquery.magnifier.js och Magnify.Cur Zoom-markören (inte återspeglas i alla webbläsare!);
• fil med demonstrationsmaterial demo.html.

Öppna den sista webbläsaren du använder och se till att demo-exemplet fungerar.

I det exempel du fått, "JQuery Image Magnify V1.11" fungerar bara när Internet är på, sedan filen senaste versionen Jquery bibliotek - "jquery.min.js" är laddad från Google API-webbplatsen.

Om du vill att allt ska fungera offline, ladda ner och ansluta den senaste versionen av JQuery-biblioteket från den officiella webbplatsen.

Om du redan har ett jquery-bibliotek i den senaste eller senare versionen (vid tidpunkten för offentliggörandet av artikeln - version 3.1.1) eller du använder den fjärranslutna anslutningen av den senaste versionen från jquery-webbplatsen eller Google API, det är självklart det är inte nödvändigt att ansluta den igen.

Installationsanvisningar på webbplatsen (Enkel bild)

Steg 1. Välj önskad bild och ladda ner den till mappen Bilder, som finns i platsen på webbplatsen.

Steg 2. Innehåll JS-mapp Ladda ner mappen med samma namn på webbplatsens rot.

Steg 3. JQuery Connection Code nedan är jquery.magnifier.js java.magnifier.js java script måste läggas till i huvudet eller kroppsdelen på din sida:

Steg 4. Och den här koden måste vara inrymd i kroppsdelen på din sida:

Förklaringar:

Banan till den bildfil du valt.

Bilddimensioner upp till Zooma. Uppvisa dem efter eget gottfinnande.

Enkelt sagt, i kroppsdelen lägger du in den vanliga bildkoden, tilldelar den klass \u003d "förstoring". Om bilden innehåller explicit storlek (bredd och höjd) attribut, så gör det att användaren kan öka bilden av jquery.magnifier.js-skriptfilinställningarna. Om storlekarna inte är angivna, kommer bildens verkliga dimensioner att ligga till grund för en ökning.

Vi ser resultatet:

Variationer med bildplacering

Förklaringar:

Positionering till vänster.

Positionering till höger.

Initiala bildstorlekar kan ändras med hjälp av bredd och höjdattribut.

Jquery.imagemagnify \u003d (Dsettings: (magnifyby: 5, // bildökningsförhållande (standard - 3) Varaktighet: 500, // animationens varaktighet i millisekunder (standard - 500) Imgopacity: 0,2 // graden av opacitet av källbilden när den förstorade bilden täcker den (som standard - 0,2)

Så här tar du bort bildramen?

Jag gjorde specifikt denna fråga i ett separat underavsnitt, eftersom det härrörde från en av besökarna.

För att större bilden har klickat på musen visas musen utan ram, du behöver:

• Öppna filen jquery.magnifier.js. Du kan göra det i någon textredigerare, men jag rekommenderar anteckningsblock ++
• Hitta koden (i anteckningsblock ++ det blir 51 rad)
  Var $ klon \u003d $ Target.Clone (). CSS (position: "Absolut", vänster: 0, topp: 0, synlighet: "dold", gräns: "1px solid grå", markör: "pekare")). Appendto (Dokument. Body)
• I den markerade raden ställer du in gränsvärdet lika med noll, eller ändra gråfärg (grå) på vit (vit) eller någon annan som passar dig på ämnet. Det är allt!

På två sidor. Slutet på sidan 1.

Från sopor och förstådd - det är dags! Det är dags att sätta i en blogg i artiklar bilder så att när du trycker på dem, ökar och visas i originalstorleken.

Med vilken effekten av förstoringen är lämplig för användaren (du), till mig som författaren under lång tid i koder (inställningar) inte hämtas när du sätter i bilder i artiklarna och så att belastningen på bloggen har varit minimal. Jag vill inte använda alla typer av plugins och ladda alla samma MySQL-databas.

Han ansökte om hjälp till pro och de föreslog för mig vad du behöver göra och jag sätter upp bokstavligen på 3 minuter. Jag upprepar, utan användning av plug-ins med auto highslide etc. Låt oss inte dra katten för mig länge ... och jag ska gå till affärer.

Jag försökte mycket av alla slags skript för att öka bilderna, men jag fokuserade på det skript som skapar en sådan effekt. Kolla in exemplet, klicka på bilden till vänster:

Intressant effekt. Klicka på bilden och det öppnas inte i ett nytt fönster (vilket inte är mycket bekvämt) och öppnas på samma sida i en förstorad form, i en vacker ram med ett kors och under bilden är inställd nedan.

Om du gillar den här effekten av att öka bilder, kan du använda den! Jag kommer att skriva om honom nedan.

Jag upprepar i en sådan effekt är helt enkelt nödvändig. Det finns bilder där du behöver se mycket noga för att se något där. Vem har dålig syn, så de kommer inte att se någonting alls. Bildförstoringsskriptet kommer att vara bara förresten!

Så, låt oss börja. Allt är gjort i tre enkla steg:

1. Ladda ner skriptet och kasta det på din värd (server)
2. Lägg till en liten kod till Footer.php-filen
3. Lägg till bilder i bloggartiklar.

Gou! Ladda ner skriptet själv. Vi slänger allt innehåll i roten till din blogg. Blog Root - Det här är huvudkatalogen i bloggen där det finns sådana mappar som WP-admin, WP-innehåll, etc. Mage! Klarade det!

Vi lägger till teman i din blogg till Footer.php-filen till Footer.php-filen. Här är det:

Uppmärksamhet! Byt ut Site.ru till din domän i koden. Lägg till kod till Footer.php före stängningskoden

Mage! Tja, i princip, allt! Nu den mest grundläggande delen! Vi lägger in bilder i artiklarna så att när de trycks in, ökar de, som jag visade ovan på exemplet. Se i allmänhet se. Det är enkelt här, även om det först verkar vara svårt för någon! Jag sätter in bilder som vanligt i posten via knappen i en textredigerare - Lägg till en mediefil:

Okej. Nu är jag bara allt detta (som i bilden ovan) html bildkod i redigeraren jag tar bort och lägger in den här platsen på plats här:

Som ett resultat får vi detta:

Vi ser det ovanstående har vi en länk till bilden av den ursprungliga storleken och under samma bild (samma webbadress), men för att minska den ges storlekar. Förresten, glömmer vi inte optimering, Alt på bilderna är också närvarande. Allt är underbart!

Uppdatering! I kommentarerna till den här artikeln Dmitry shkurin Föreslog en ännu enklare användning av detta skript. Nu i koden behöver du inte hämta:

Det är, när vi kastade skriptet till bloggen Root + lade till en specialkod i Footer.php, behöver vi inte hämta dig för att lägga till en bild i artikeln. Vi gör allt som följer. Som vi brukar lägga till en bild till en artikel via funktionen "Lägg till mediafil". Nu i inställningarna för filvisning, ange länken som "Media File":

stramar naturligtvis storlekarna för att titta på artikeln exakt i artikeln, så blir vi till fliken "Avancerade" och i kolumnen "Förhållande" - till "Uppdatering". Redo!

Allt snabbt, enkelt och ännu mer bekvämt. Dmitry Tack så mycket! Mycket hjälpte!

Allt enkelt! Vem är inte klart? Allt är elementärt här! Den mest coola sak som jag kan bifoga effekten av att öka inte för alla bilder, men bara de som jag vill ge. Om jag till exempel sätter i en bild i en artikel och det behöver inte det minska det så att det kommer in i posten, är effekten av ökningen inte nödvändig!

Det är allt. Använda sig av Eller kanske någon vet hur bättre? Skriv i kommentarerna. Förresten kan den här skriften användas inte bara på bloggen, men också på olika ensidiga webbplatser! Tja, alla, hittills!

Med vänliga hälsningar, Alexander Borisov

Hej kära nybörjareoptimierare.

I WordPress, som standard, när du klickar på bilden, översätts användaren till sidan. Enig - det här är mycket obekväma när du plötsligt rullar över en annan sida.

För att bilden ska kunna öka direkt på den sidan där det är nödvändigt att installera ett speciellt skript på webbplatsen.

Som det fungerar kan du se bilden ovan eller i bilderna i sidfältet.

Det är inte ett problem att hitta det på internet, men tyvärr har alla erbjudanden en fel. Skriptkoden, när du checkar in validatorn, ger ett fel.

Jag var tvungen att spänna lite och fixa den här situationen, så då kommer det att handla om den välbefinnande på alla mallar och ett giltigt skript.

Metoden för installationen är tillgänglig även för dem som inte vet om skript, och i allmänhet om programmeringsspråk.

Samtidigt tillåter han med ett utmärkt resultat dig att göra utan plug-in och innebär den obligatoriska fyllningen av ALT-taggen, som motsvarar texten, och det blir mycket bra att optimera webbplatsen.

Det är ingen hemlighet att plugins hämmar nedladdningshastigheten, eftersom många av dem placerar sina skript i huvudblocket.

Och fylla alt-taggen, ofta bara genomgått. Omedelbart vill du inte ha, men du måste ange lämplig text, eftersom det kommer att visas som en signatur under en förstorad bild.

Du kan helt enkelt ange numreringen på sidan om det finns många bilder.

Ett annat knep är att skriptet ökar inte allt i rad, men bara de bilder som du anger.

Bekvämt? Bekvämt. När allt kommer omkring, om bilden i den ursprungliga storleken passar perfekt på sidan, varför öka den.

Gå till installationen.

Du kan få en zip med ett skript helt gratis genom att bara ladda ner det från min Yandex-skiva. Ladda ner

Därefter måste det kastas i roten på platsen. Kungmappen är en mapp där du är WP-admin, WP-innehåll, och så vidare.

Genom FTP laddar du zip, packa upp, varefter tre filer visas i katalogen och en mapp.

Du måste ta bort zip-mappen. Också, nu måste du ta bort om det var en plugin som ökade bilden.

Nästa åtgärd måste du göra i filen Footer.php. Du kan, utan att lämna servern, gå igenom WP-content - teman - ditt tema-footer.php.

Och du kan gå till sajtkonsolen, då är utseendet redaktören - footer.php eller källare. Och så är det möjligt.

I den här filen, i slutet, före taggen, Du måste infoga följande kod:

I tre rader, där adressen till min webbplats är värt, måste du ersätta den med din egen, och du kan uppdatera filen.

Med installationen av skriptet - färdig, nu, hur du anger de bilder du vill öka.

Vi laddar bilder som vanligt via bootloader, sedan i redigeringsläget, hittar vi en länk till den nedladdade bilden.

Och före HREF-attributet, föreskriver vi följande klass:

klass \u003d "SimpleBox"

Tja, nu allt, kommer bilden att öka när man klickar och visas i mitten. Vi bestämde oss för två frågor på en gång.

Hej alla till webbplatsen. Vi fortsätter att förbättra våra bloggar för resultat. Jag tycker att det inte är hemligt att platsen spelar en stor roll. Naturligtvis förstår inte alla hur och vilken tid de börjar påverka, men faktum är fortfarande ett faktum. För att förbättra dessa faktorer måste vi förbättra användbarheten på webbplatsen: Lägg till, förbättra designen, gör det attraktivt och enkelt. Gör rätt bearbetning av bilder på webbplatsen. Många skulle vilja veta svaret på hur man gör en bild på webbplatsen när du klickar på vilken den har ökat. Denna ökning är implementerad på min webbplats. Höjligen ganska trevligt att du kan förstora bilder, se all skönhet i helskärm.

Idag försöker jag öppna denna hemlighet till dig. I allmänhet kan en bild ökas med flera åtgärder:

• Till exempel kan du förstora den när du svänger musknappen
• Det andra alternativet kan vara en ökning när du trycker på

Naturligtvis, om du använder WordPress, kommer det enklaste och lätta alternativet att vara sökandet efter mallen med den funktion du behöver, tro mig på internet nu ett stort antal sådana. Så i 95 procent av händelserna hittar du ett mönster med en ökning av bilden. Men vad ska du göra om du gillar det här inämnt och du vill bara göra en ökning av bilden på den. Eller du skriver i allmänhet på HTML-arket din första webbplats, i det jag säkert tvivlar på.

Vi ansluter Java-skript för att förstora bilder

Det slutliga resultatet blir en förstorad bild, efter typ. Okej, allt detta är filosofi för att öka bilden. Vi måste ansluta jquerybiblioteket. Jag kommer inte ihåg, men det verkar vara i någon lektion som jag skrev om det här biblioteket, men om du glömmer - påminna dig. För att ansluta biblioteket måste du Webbplatsen sätter i två koder.

Det bör förstås att jquery bibliotek är ganska många och olika bibliotek är anslutna i olika fall.

Om du skriver din webbplats på HTML-målet, så att du ska infoga bilden behöver du den här koden.

Observera att i det här fallet måste du sätta din bild i mappen Images och ange ditt namn för bilden. Glöm inte att filerna i Yava-skriptbiblioteket du måste ha där var som helst där och huvudsidan på webbplatsen, annars skriver du bara ett annat sätt till dem. Ladda ner filbiblioteket för att förstora bilderna på webbplatsen, du kan. Tja, det viktigaste nu, om du vill öka din bild, skriv sedan följande egenskaper till den.