EnglishWOWSlider  DeutschBildergalerie Diashow  EspañolGaleria de Imagenes, Slide Imagenes Gratis  FrançaisDiaporama Galerie D'Image  ItalianoImmagini Galleria  汉语网络幻灯片: 效果的幻灯片  Português brasileiroGaleria De Imagens  Русскийслайдер изображений, слайдшоу, CSS3 слайдер  SvenskaBild Galleri  日本語画像のスライダー&ギャラリー  NederlandsAfbeeldingen Caroussel 
Download Free Version

Slider Demos

de WOW Slider toevoegen aan uw website

1. Maak de webpagina waarop u de slider zal gaan gebruiken

Uw webpagina kan zijn voltooid, met uitzondering van de slider, of misschien bent u net begonnen met de ontwikkeling ervan. Voordat u de slider kunt toevoegen aan uw webpagina, moet u er eerst voor zorgen dat u uw divs heeft opgezet. Dit is zodat u een div klaar heeft om aan uw slideshow toe te voegen.

2. Creëer uw slideshow

Open WOWSlider. WOWSlider is gratis, maar de gratis versie is voorzien van logo's en advertenties. Dit is OK als u aan het oefenen bent, of om de slideshow te testen en te zien hoe het eruit ziet. Maar als u tevreden bent over de slider dan moet u de pro-versie te kopen om de reclame te verwijderen.

Open uw website map. Idealiter moet u een aantal afbeeldingen in een map op uw site klaar hebben voor de slideshow. Deze beelden moeten worden aangepast in Photoshop, zodat ze de perfecte maat hebben voor uw slideshow. Idealiter moet elke afbeelding even groot zijn, en geen van hen moet groter dan 100k zijn. U zou bijvoorbeeld elk beeld kunnen aanpassen naar 960 x 300 pixels.

Markeer alle beelden in de map website, en sleep ze naar WOWSlider. Elk beeld wordt een slide. U wilt misschien ook een aantal foto's van foto hostings toevoegen. WOWSlider ondersteunt Flickr, Photobucket, Picasa. Laten we nu nog wat foto's van Flickr toevoegen.

Add images to jQuery Slider

Om dit te doen klikt u op de 'foto's en video's toevoegen’ knop aan de bovenkant van het programma en klik vervolgens op ‘Voeg Flickr afbeeldingen toe’.

Add images from Flickr to jQuery Slider
Add images from Flickr to Slider jQuery

U zult zien dat u op elke slide ruimte heeft voor het toevoegen van detail. U kunt bijvoorbeeld een titel toevoegen. Het URL-veld is een link, dus als u deze invult en iemand klikt op het beeld dan zullen ze worden doorgestuurd naar deze URL. Als u niet wilt dat de slide aanklikbaar is, dan hoeft u hier niks in te vullen.

Set the url for every slide of jQuery slideshow

De titel en omschrijving velden maken het bijschrift. Dus, als u bijvoorbeeld een reis-website met beelden van vakantiebestemmingen heeft, kunt u de titel Adaman Zee, en de beschrijving Thailand neerzetten om een passend bijschrift te maken.

U wilt dat de titels en beschrijvingen consistent zijn op elke slide.

In de bovenste navigatiebalk zal u opties zien om foto's toe te voegen en te verwijderen en gebogen pijlen toe te voegen die u in staat stellen om de afbeeldingen te roteren.

Rotate the images in jQuery slideshow

We kunnen de slider waar we momenteel aan werken ook opslaan door te klikken op de knop opslaan (ziet eruit als een floppy disc).

Save the jQuery slideshow slider

3. Eigenschappen instellen

We willen de eigenschappen van onze slider instellen. Wij doen dit door te klikken op de knop eigenschappen (ziet eruit als een sleutel).

Geef uw slider een titel, bijvoorbeeld Website Slideshow.

Set the properties of jQuery slideshow

U zult veel verschillende opties vinden voor uw slideshow. U kunt beslissen of u gebruik wilt maken van autoplay, of de cursor moet pauzeren tijdens mouse-over, of het kogel navigatie zou moeten hebben - die kleine puntjes produceren die mensen kunnen gebruiken om te navigeren door de slideshow - of filmstrip navigatie.

Omwille van deze tutorial, laten we alles standaard, met de kogel navigatie. Klik op het tabblad 'afbeeldingen' en selecteer het Terse thema. Als de beelden die u heeft toegevoegd 960 x 360 waren, kunt u de 960 x 300 instelling als slideshow formaat gebruiken. Selecteer anders de juiste grootte. Zorg ervoor dat het behoud van de beeldverhouding is geselecteerd, aangezien alle beelden de juiste maat hebben.

Select the transition and skin for the jQuery Slider

Kies een overgangseffect, bijvoorbeeld blur.

4. Publiceer de slider

Als u op het tabblad ‘publiceren' klikt, zult u zien dat er een paar opties zijn om uit te kiezen. U kunt publiceren naar een map, u kunt uploaden naar een server of u kunt invoegen in een pagina. De 'invoegen in een pagina' is de optie die we gaan gebruiken. Selecteer de optie en klik op de knop Bladeren.

Insert the slider jQuery code to the HTML page

Navigeer naar de pagina waarop u wilt dat de slider komt te verschijnen. Klik vervolgens op 'Publiceren'. Het zal openen binnen WOWSlider, en u kunt precies kiezen waar u de code wilt invoegen.

Zoek de juiste div voor uw slideshow en klik erin. Controleer de HTML in de zijbalk om ervoor te zorgen dat het precies wordt geplaatst waar u het wilt hebben.

Insert using the wizard the slideshow jQuery code to the HTML

Klik op de ‘insert before' knop. Het zal een voorbeeld geven van waar het zal staan, maar maakt u zich geen zorgen als het er nog een beetje vreemd uitziet in dit stadium.

Klik op 'Opslaan', en de site wordt geopend in uw browser. U zult zien dat de slider is toegevoegd aan uw pagina. De titel en bijschrift worden getoond, u kunt via de kogel navigatie balderen om het te testen enz.

Your jQuery Slider is ready - Awesome!

Als u problemen heeft, kunt u de slideshow code te allen tijden verwijderen uit uw html. Dit is eenvoudig te doen door alles wat tussen het begin en einde van de WOWSlider comment tags staat te selecteren en te verwijderen. U kunt dan terug gaan in uw slideshow en veranderingen te maken, vervolgens kunt u deze opnieuw publiceren op exact dezelfde manier. U hoeft er alleen maar aan te denken dat u de code elke keer verwijdert als u wijzigingen wilt aanbrengen.