Bildspel

Observera! Om din butik ligger på vår plattform Flight fungerar inte nedan instruktioner.

Har du uppdaterat bilder i bildspelet men ser fortsatt de gamla bilderna? Läs här hur du rensar cachen i din webbläsare

Huruvida ni har stöd för bildspel eller inte bestäms av er design och ni bör ha fått information kring hur det ska administreras när er design blev uppsatt. Generellt finns dock två olika sätt bildspel kan fungera på:

1) Rad 1 på startsidans items utgör bildspelet
2) Kodinnehållet i Text för startsidan utgör bildspelet

Har ni inte stöd för bildspel är ni välkomna att kontakta supporten för mer information.

Rad 1 på startsidans items utgör bildspelet

Gå till Sidor -> Startsida -> Hantera startsida och på den aktuella startsidan. Om du vill byta innehållet i bildspelet, bara klicka på Ändra-knappen på den slide du önskar ändra och t.ex. byt bild. Tänk på att bilderna i bildspelet ska vara en speciell storlek.

//www.jetshop.se/portal/wp-content/uploads/2017/03/bildspeladmin.png
Respektive ”puff” är en slide i bildspelet

Kodinnehållet i Text för startsidan utgör bildspelet

Ändra koden för bildspelet

Gå nu till sidan där du tänkt lägga bildspelet.
I textfältet för denna sida ska det nu finnas ett långt kodavsnitt som börjar så här:

<!-- BEGIN DEFINITIONS FOR IMAGE SWITCHER -------->
<div id="switcher-definitions">

Nedanför denna kommer definitionerna för varje bild. Ett komplett kodavsnitt för en bild ser ut så här
(färgerna är i illustrationssyfte):

<!-- BEGIN DEFINITIONS FOR IMAGE SWITCHER -------->
<div id="switcher-definitions">
	<!-- START IMAGE ------------>
	<div class="switcher-image">
		<span class="link">kontakta-oss</span>
		<span class="image-name">switcher-image-1.jpg</span>
		<span class="image-name-mobile">mobile-switcher-image-1.jpg</span>
		<span class="text">Text för bild 1</span>
	</div>
	<!-- END IMAGE -------------->
	<!-- START IMAGE ------------>
	<div class="switcher-image">
		<span class="link">om-oss</span>
		<span class="image-name">switcher-image-2.jpg</span>
		<span class="image-name-mobile">mobile-switcher-image-2.jpg</span>
		<span class="text">Text för bild 2</span>
	</div>
	<!-- END IMAGE -------------->
</div>
<!-- END DEFINITIONS FOR IMAGE SWITCHER ---------->

Länk
Den röda texten som ligger i link-elementet är namnet på sidan som du vill länka till från bilden. Det är helt enkelt destinationssidans url (webbadress), minus http://www.dinurl.se/. Dvs ta med allt efter snedstrecket som kommer efter ditt domännamn. Om du lämnar elementet tomt så kommer bilden inte att ha någon länk, och det händer inget när man klickar på den.

Bildnamn
Detta är namnet på bilden som du laddat upp. Det är viktigt att bildnamnet stämmer exakt överens med den faktiska bildens namn och att det innehåller filändelsen (till exempel .jpg). Se längre ner hur och var bilderna ska laddas upp.

Bildtext
Elementet text innehåller den eventuella text som ska visas ”ovanpå” bilden i neder-/överkant. Om du lämnar fältet tomt så visas inget textfält alls. Om du har grundläggande html-kunskaper så kan du skriva egen html-kod här istället för bara text, för att skapa en mer avancerad formatering av texten. På grund av plattformstekniska skäl så kommer alla br-taggar dock att tas bort, så använd blockelement för att skapa radbrytningar i texten i dessa fall.

Lägga till fler slides
Om du vill lägga till eller ta bort bilder i bildspelet är det bara att sudda eller kopiera allt från och med <!–START IMAGE –> till och med <!– END IMAGE –>. Då får du med en hel bild. Du kan sedan kopiera in denna kod innan eller efter en annan bild för att lägga till en ny bild. Det är bara att ändra länk, bildnamn och text så har du skapat en ny bild.

Ladda upp nya bilder
För att ladda upp bilderna i systemet går du till Filer i administrationsverktyget. Där ska det nu finnas en mapp som heter image-switcher och i denna ligger alla bilder för bildspelet. Om du ska ersätta en befintlig bild, ta bort den gamla bilden och ladda sedan upp den nya bilden med samma namn. Ser du fortfarande den gamla bilden efter det, testa att rensa cache i din webbläsare. Tänk på följande när du lägger upp bilderna:

  • Se till att bilderna har exakt rätt storlek när innan du laddar upp dem. När din design gjordes ska du ha fått information om vilka mått som gäller för just din butik. Om du skulle ladda upp en bild med för stora eller för små dimensioner så kommer bilden att sträckas ut eller tryckas ihop för att passa i bildspelets utrymme, och detta blir oftast inte så snyggt. Dessutom blir för stora bilder onödigt tunga för kund att ladda ned.
  • Använd inte å, ä, ö eller specialtecken som citattecken, kommatecken etc. i bildnamnet. Webbläsaren Safari kan inte läsa bilder som innehåller åäö.
  • Använd inte mellanslag i bildsnamnet. Ersätt mellanslag med understreck _ eller bindestreck –
Senast uppdaterad 11 november, 2020

Var den här sidan till hjälp?

Relaterade artiklar

Norce Support
Hittar du inte svaret på din fråga?
Kontakta support