Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här addar du till förstoringszoom för images i WordPress

Vill du add to en Amazon-liknande förstoringszoom för images i WordPress?

Genom att lägga till en zoomfunktion kan användarna se detaljer som de inte skulle se i en normalstor image.

I den här artikeln visar vi hur du enkelt kan add to förstoringszoom för images i WordPress.

How to add magnifying zoom for images in WordPress

Varför add to en förstoringszoom för images?

Genom att lägga till en förstorande zoomfunktion på din website i WordPress kan besökarna se de invecklade detaljerna i bilderna på ett tydligt sätt.

Om du har en website med fotografier kan du lägga till en förstoringsfunktion som gör det möjligt för användare att zooma in på dina fotografier för att view de finare detaljerna.

På samma sätt, om du run en online store, då dina customers kommer att kunna zooma in på produkt images.

Många stora webbplatser för ecommerce använder redan förstoringszoom för produkt images. Det allow customers to examine the product and creates a better shopping experience in your store.

Med detta sagt visar vi dig hur du enkelt kan add to en förstoringszoom för images i WordPress med hjälp av två olika metoder. Du kan använda länkarna under för att hoppa till den metod du föredrar.

Video Tutorial

Subscribe to WPBeginner

Om du föredrar skriftliga instruktioner är det bara att fortsätta läsa.

Envira Gallery är det bästa tillägget för gallery för WordPress. Du kan använda det för att enkelt skapa beautiful image galleries för din WordPress website. Det kommer också med en Zoom Addon, som låter dig lägga till zoomfunktionalitet till dina gallery images.

Andra kraftfulla funktioner i Envira Gallery inkluderar en drag and drop-byggare, färdiga teman för gallerier, lightbox popups, bildkomprimering, bildskydd och mycket mer.

För att komma igång måste du installera och aktivera plugin-programmet Envira Gallery. För mer detaljer kan du följa vår tutorial om hur du installerar ett plugin för WordPress.

Note: Det finns en gratis version av Envira Gallery som du kan använda. Du måste dock uppgradera till premiumpluginets ”Plus”-plan för att få tillgång till Zoom Addon.

Vid aktivering måste du gå till Envira Gallery ” Settings page och enter din license key. Du hittar license key i ditt Envira Gallery account area.

Add the Envira Gallery license key

Därefter klickar du på knappen ”Verify Key”.

Därefter måste du gå till Envira Gallery Addons. Härifrån rullar du ner för att hitta Zoom Addon och klickar på knappen ”Install”.

Install the Zoom Addon for Envira Gallery

När Zoom Addon har installerats måste du också aktivera det genom att toggle omkopplaren.

Activate the Zoom Addon

Nästa steg är att add a new gallery. För att göra det, gå till Envira Gallery ” Add New från WordPress dashboard.

From here, you can enter a name for your gallery and click the ”Select Files from Your Computer” button to upload images to your gallery.

Add a new gallery

Du kan också clicka på knappen ”Select Files from Other Sources” för att add to images från mediabiblioteket i WordPress till your gallery.

När du har uploadat images till ditt gallery kan du ordna om dem genom att drag and dropa thumbnailerna på plats.

Edit image gallery in Envira

Det finns också andra alternativ för att customize ditt image gallery. Du kan till exempel välja en layout för galleriet, add to bildtitlar och alt-text, aktivera galleriets lightbox, visa captions, editera dimensionerna på bilderna med mera.

För mer details, se vår guide om hur man skapar responsiva gallerier med Envira.

Konfigurera Settings för Image Zoom

För att add to en förstoringszoom till dina images i gallery, click on the ’Zoom’ tabs. Kontrollera sedan boxen för att aktivera zoomfunktionen.

Enable Zoom in Envira

När zoomfunktionen har aktiverats visas inställningarna för hur du lägger till zoom i dina images.

Du kan konfigurera inställningar som zoom vid hovering, zoomeffekt, zoomtyp, zoomfönstrets position, zoomfönstrets storlek, färg med mera.

Configure zoom settings

När du är nöjd med zoominställningarna klickar du på knappen ”Publicera” för att store dina ändringar och göra detta gallery tillgängligt.

Publish your image gallery

Embed Your Image Gallery med Magnifying Zoom

Nu när ditt gallery är klart kan du add to det direkt till en page eller post i WordPress.

Från WordPress content editor klickar du helt enkelt på knappen ”+” för att add to Envira Gallery-blocket. Klicka sedan på dropdown-menyn inuti blocket Envira Gallery för att välja vilket gallery som ska visas.

Add Envira Gallery block

Därefter ser du en preview av ditt image gallery i WordPress block editor. Om du är nöjd med hur det ser ut kan du publicera posten eller page.

Publish image gallery in WordPress page or post

Now you can visit your website to see the magnifying zoom feature in action.

Envira Gallery magnifying zoom example

Envira Gallery är ett bra plugin för att lägga till zoomfunktionalitet till fotografiska webbplatser. Men det fungerar också perfekt för online stores.

För att lära dig mer, se vår guide om hur du skapar ett WooCommerce produkt image gallery.

Metod 2: Hur man addar en förstoringszoom för images i WordPress med WP Image Zoom

Först måste du installera och aktivera WP Image Zoom plugin. För mer detaljer, vänligen se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Vi kommer att använda gratisversionen i denna handledning, men om du vill ha fler anpassningsalternativ kanske du vill kolla in WP Image Zoom Pro. Du kan lära dig mer om pluginet i vår WP Image Zoom-recension.

Efter aktivering måste du heada över till WP Image Zoom ” Zoom Settings page från WordPress admin sidebar.

Därefter måste du konfigurera inställningarna för zoomeffekten genom att gå till tabben ”Zoom Settings” och välja en linsform som du vill använda.

Choose a lens shape

You can choose from circle, square, and zoom window lens shapes. Du kan även välja alternativet ”Ingen lins” (⨯) om du inte vill använda en form för förstoringseffekten.

När du har valt ditt föredragna objektiv måste du rulla ner till nästa steg där du kan Preview en image med det valda objektivet för att se hur det fungerar. Pluginet har en preview image som du kan använda för att testa dina ändringar.

Check the preview of the lens in step two

Därefter måste du växla till tabben ”Allmänt”.

Härifrån kan du välja en markörtyp, ställa in en animationseffekt, aktivera zoom vid hovering eller click med musen och definiera en zoomnivå.

Om du vill ha ännu fler alternativ, är några av funktionerna endast tillgängliga för pro-versionen av WP Image Zoom plugin.

Configure General tab settings in step 3

När du har gjort dina val i enlighet med detta går du helt enkelt till tabben ”Lens” högst upp.

Du kan nu konfigurera inställningar som objektivstorlek, objektivfärg, alternativ för objektivkant och mer om du valde objektivet ”cirkel” eller ”kvadrat” i steg 1.

Lens Settings

Om du har valt Zoom Window Lens måste du växla till konfigurations tabben ”Zoom Window”.

Härifrån kan du ändra zoomfönstrets bredd och höjd, position, avstånd från huvudimagen, kantfärger med mera.

Zoom window settings

Därefter måste du bara klicka på ”Save Changes” för att spara dina inställningar.

Efter det behöver du bara konfigurera några allmänna settings.

Clcik the Save Changes for the last step

Konfigurera allmänna Settings för plugins

Därefter måste du växla till tabben Allmänna Settings under plugin-inställningarna.

Härifrån kan du nu aktivera funktioner som zoom på WooCommerce-produktbilder, miniatyrer, mobila enheter, bilagssidor, produktkategorisidor och mer.

Allt du behöver göra är att bara kontrollera boxarna bredvid dessa alternativ.

Go to the General Settings tab and check the boxes beside the options you want to activate

You can also remove the lightbox effect, so users can smoothly zoom images.

Du behöver dock Pro-versionen av plugin för den här funktionen.

Remove the lightbox option by checking the box

Om du ej tänker ta bort lightboxen för images, måste du rulla ner till alternativet ”Enable inside a Lightbox” och kontrollera boxen bredvid.

Note: Du kan se lightboxar som stöds för att se till att zoomen fungerar bra i en lightbox på din webbplats.

Check enable inside lightbox option

När du är klar med inställningarna, glöm inte att klicka på knappen ”Save Changes” för att store dina inställningar.

Förstoringszoom kommer nu att aktiveras för WooCommerce-produkter.

You can go visit your online store to check our zoom feature.

Zoom feature enabled on the WooCommerce store

Men om du vill aktivera zoom för images på WordPress posts och pages, måste du följa steget under.

Aktivera förstoringszoom för images i Block Editor

Som standard är förstoringszoomen inte aktiverad för images på dina posts och pages. Du måste göra det manuellt efter att du har lagt till en image i ditt content.

Först måste du öppna ett post som du vill editera i block editor.

Därefter måste du uploada en image till det inlägget från mediabiblioteket eller din dator.

När du har gjort det klickar du bara på bilden för att öppna panelen Block Settings i det högra hörnet av vyn.

Gå sedan till tabben ”Styles” och click på knappen ”With Zoom” för att använda förstoringszoom på din image.

Click on the Zoom button

Därefter klickar du bara på knappen ”Update” eller ”Publicera” högst upp för att lagra dina settings.

Zoomfunktionen kommer att se ut så här på din site:

Zoom feature preview

Note: Du måste upprepa detta steg varje gång du vill add to zoom-effekten till en enskild image.

Vi rekommenderar att du använder högkvalitativa images för att zoomfunktionen ska se bra ut. Bilder av hög kvalitet är normalt större i filstorlek och tar längre tid att hämta, vilket påverkar hastigheten och prestandan på din website.

För att lösa denna issue måste du optimera dina images för webben innan du uppladdar dem till WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du addar förstoringszoom för images i WordPress. Du kanske också vill se vår guide om hur du optimerar images för search engines och våra toppval för de bästa tilläggen för bildkomprimering.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

14 kommentarerLämna ett svar

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Sofie

    Thanks for this article. Can you help me understand how I can use this for a page/blog when I use the divi builder? Where can I then add something so this function works?

    • WPBeginner Support

      You would want to reach out to the plugin’s support for the current method to use the plugin with a page builder.

      Administratör

  3. Kenny

    Any chance that there is a zoom plugin that will work with LayerSlider images? I want the background of my LayerSlider slide to zoom in with a magnifying glass so that people can see the image larger on screen.

    • WPBeginner Support

      We would first recommend reaching out to LayerSlider’s support to see if they have a recommended plugin for adding zoom

      Administratör

  4. michel hissi

    can you please tell me about image size. if image size of website is low then can we use this plugin.

    • WPBeginner Support

      Yes, you can still use this plugin if you are optimizing your images :)

      Administratör

  5. santhosh muralidhar

    please show the steps by using the new Wordpress editor. I think in the new editor there is no option to add a zoom magnify feature for the image. I searched and tried a lot but could not find that option.

    • WPBeginner Support

      We will certainly look to update our articles as we are able, for this, the option to add the CSS class that the plugin needs for an image would be in the block’s settings.

      Administratör

  6. Tony

    Please could you tell me how to add image zoom to product images in woocommerce? the article instruct how to add zoom to post and pages only.

    • WPBeginner Support

      The plugin should still work for WooCommerce, if it is not applying to WooCommerce then you would need to reach out to the plugin’s support for them to take a look.

      Administratör

  7. Eliezer Braun

    I keep getting this message when I press on the magnifying glass after I have selected the image for zoom.

    First you have to select the image to which you want to add the zoom feature

  8. Eileen Bednarz

    I’d love to get this to work on my site, but I have a Pinterest plug-in that I can’t deactivate. I suspect that plug-in interferes with this plug-in. Any suggestions on removing to odious Pinterest plug-in are welcome.

    • Eileen Bednarz

      P.S. I’m not a programmer and don’t dare go into the FTP or whatever it’s called.

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.