HANDLEIDINGEN Tips en tricks ETZ Leerplein

HANDLEIDINGEN Tips en tricks ETZ Leerplein

IMAGE SLIDER OVER DE IMAGE SLIDER De imageslider (lees: slider), zoals deze ontwikkelt is binnen de editor van Pulseweb maakt het mogelijk om meerdere afbeeldingen en gifbestanden te plaatsen tussen de content. Hierdoor zijn programma s als Articulate niet meer benodigd. Een groot voordeel van deze slider is dat deze tussen de content geplaatst kan worden. Er hoeven geen aparte pagina s meer te worden aangemaakt, waardoor alle content meer als een geheel overkomt! Ook is het mogelijk om te werken met captions (kort stuk tekst dat verduidelijking geeft aan de afbeelding. De gebruiker kan door de slider heen navigeren middels de nummerieke navigatie onderaan de slider. VOORDELEN Werkt in alle internetbrowsers (zowel op desktop als op tablet). Slider kan tussen content geplaatst worden. NADELEN Geen andere navigatie mogelijkheid door beperking editor. Vergt kennis om te gebruiken. 2 / 8

GEBRUIK IMAGE SLIDER 1 Kopieren opmaak (vormgeving) naar Pulseweb editor Ga in de editor van Pulseweb naar het tabje HTML en kopieer onderstaande code in de editor. Waar je de code plakt in de editor maakt niet uit, maar om het voor jezelf overzichtelijk te houden raad ik je aan om het helemaal onderaan de code te plakken. <style> img{ margin-left: 0px!important;*/ * {margin: 0; padding: 0;.slider{ width: 712px; height: 474px; position: relative; /* padding-top: 494px;*/.slider img{ position: absolute; margin-left: -70px!important; top: 0px!important; left: 0px!important; margin-left: 0px!important;.slider>img{ position: absolute!important; left: 0px; top: 0px;.slider input[name='slide_switch'] { display: none;.slider label { line-height: 46px; text-align: center; color: #fff; margin: 494px 10px 10px 0px; float: left; cursor: pointer; height: 49px; width: 60px; background-image: url(https://www.etzleerplein.nl/manuals/man_20160127111902_8062b528-a5d5-46dd-9/images/navigatiebuttonv2.png); background-repeat: no-repeat;.slider label:hover{ background-image: url(https://www.etzleerplein.nl/manuals/man_20160127111902_8062b528-a5d5-46dd-9/images/navigatiebutton_hover. png); background-repeat: no-repeat;.slider label img{ display: block;.slider input[name='slide_switch']:checked+label { border-color: #51B5E0; background-image: url(https://www.etzleerplein.nl/manuals/man_20160127111902_8062b528-a5d5-46dd-9/images/navigatiebutton_hover. png );.slider input[name='slide_switch'] ~ img { opacity: 0; transition: 1s;.slider input[name='slide_switch']:checked+label+img { opacity: 1; transform: scale(1); </style> 3 / 8

2 Slider toevoegen Ga in de editor van Pulseweb naar het tabje HTML. Ga staan op de plek waar de slider ingevoegd dient te worden. Bijvoorbeeld hier: Dit kan elke plek op de pagina zijn. Je bent niet afhankelijk van posities. LET OP! Na het plaatsen van de slider is de opmaak in je ontwerp tab enigszins verandert. Probeer de slider daarom altijd als laatste te plaatsen. Natuurlijk kan je nog steeds aanpssingen doen via het ontwerp tabje, maar dit kan soms wat verwarrend zijn. Vervolgens plaats je onderstaande code. <div class="slider"> </div> De slider is nu aangemaakt. De volgende stap is het toevoegen van slides (afbeeldingen, gifjes etc.). 4 / 8

3 Slides (pagina s) toevoegen De slider is aangemaakt en ook de opmaak is geregeld, nu is het mogelijk om daadwerkelijke content te plaatsen. Hiervoor dienen een aantal stappen te worden doorlopen. Onderstaande code dient geplaatst te worden voor het aanmaken van één slide. <input name="slide_switch" id="id1" type="radio" /> <label for="id1">1</label> <img alt="" style="width: 712px; height: 474px;" src=""/> <img> zorgt ervoor dat de afbeelding (of gif etc.) wordt ingeladen. <input> zorgt ervoor dat het mogelijk wordt om van slide 1 naar 2 te gaan etc. <label> zorgt ervoor dat er een knop onder de slider zichtbaar wordt. Wil je meerdere slides toevoegen dan is het mogelijk om de eerste slide te kopieren, enkel dien je dan op 3 plaatsen een nummer te veranderen. <input name="slide_switch" id="id2" type="radio" /> <label for="id2">2</label> <img alt="" style="width: 712px; height: 474px;" src=""/> Slider laten beginnen met bepaalde slide Om een bepaalde afbeelding als actieve slide op te geven is het van belang dat dit gedefinieerd wordt. Simpelweg is dit de slide die wordt weergegeven wanneer de pagina geladen wordt. Onderstaande code dient aan de input regel te worden toegevoegd. checked="checked" /> <input name="slide_switch" id="id1" type="radio" checked="checked" /> LET OP! Je bent er nog niet! Volg de volgende paragraaf om afbeeldingen (gifjes etc.) op de juiste manier in te voegen. 5 / 8

3 Afbeeldingen toevoegen Stel, onderstaande code is je slider. Onderstaande slider heeft 4 afbeeldingen en zodoende dus ook 4 knoppen. <div class="slider"> <input name="slide_switch" id="id1" type="radio" checked="checked" /> <label for="id1">1</label> <img alt="" style="width: 712px; height: 474px;" src="" /> <input name="slide_switch" id="id2" type="radio" /> <label for="id2">2</label> <img alt="" style="width: 712px; height: 474px;" src="" /> <input name="slide_switch" id="id3" type="radio" /> <label for="id3">3</label> <img alt="" style="width: 712px; height: 474px;" src="" /> <input name="slide_switch" id="id4" type="radio" /> <label for="id4">4</label> <img alt="" style="width: 712px; height: 474px;" src="" /> </div> Echter zijn er nog geen afbeeldingen toegevoegd. Om dit te doen dien je jou afbeeldingen te uploaden naar Pulseweb via de editor. Druk op het afbeeldingsicoon, zoals hieronder staat weergegeven: Via de upload knop dien je nu de afbeeldingen te uploaden. Wanneer je dit hebt gedaan dien je de url te kopieren. Dit doe je door in afbeeldingsbeheer onderstaande code te kopieren. Dit is als het ware de bak waar je afbeeldingen opgeslagen staan. Vervolgens dien je de afbeelding hier achter te plakken. Uiteindelijk krijg je dus de volgende regel (LET OP, dit is een voorbeeld): /Manuals/MAN_20160201131051_f97d50b3-d346-42eb-a/Images (bak waar bestanden staan) en agilent-ttpacen-slider1.gif (de naam van de afbeelding). Vervolgens plak je dit achter elkaar, maar splits je deze met een slash (/) /Manuals/MAN_20160201131051_f97d50b3-d346-42eb-a/Images/ agilent-ttpacen-slider1.gif 6 / 8

Het beste kan je deze urls even in een kladblokje plaatsen of iets dergelijks (zodat je ze snel in de slider kunt plaatsen). Zie onderstaande voorbeeld waarin ik 4 urls in orde heb gemaakt (cq 4 afbeeldingen). Vervolgens kan je de afbeeldingen in de slider plaatsen en is deze klaar voor gebruik. De url's dien je te plaatsen tussen de quotes src="hier komt de url" <div class="slider"> <input name="slide_switch" id="id1" type="radio" checked="checked" /> <label for="id1">1</label> <img alt="" style="width: 712px; height: 474px;" src="/manuals/man_20160201131051_f97d50b3-d346-42eb-a/images/ afbeelding_1.jpg" /> <input name="slide_switch" id="id2" type="radio" /> <label for="id2">2</label> <img alt="" style="width: 712px; height: 474px;" src=" /Manuals/MAN_20160201131051_f97d50b3-d346-42eb-a/Images/ afbeelding_2.jpg" /> <input name="slide_switch" id="id3" type="radio" /> <label for="id3">3</label> <img alt="" style="width: 712px; height: 474px;" src=" /Manuals/MAN_20160201131051_f97d50b3-d346-42eb-a/Images/ afbeelding3.jpg" /> <input name="slide_switch" id="id4" type="radio" /> <label for="id4">4</label> <img alt="" style="width: 712px; height: 474px;" src=" /Manuals/MAN_20160201131051_f97d50b3-d346-42eb-a/Images/ afbeelding_4.jpg" /> </div> 7 / 8

YOUTUBE UPLOADEN / IFRAME OPHALEN / PARAMETERS TOEVOEGEN Wanneer je gebruik maakt van YouTube is het mogelijk om verschillende parameters in te stellen. Hieronder zal ik een aantal handige parameters toelichten en laten zien hoe je deze gebruikt. 1 Youtube film uploaden Ga naar http://www.youtube.com en upload je video. Zorg er voor dat de video op verborgen (niet vermeld) staat. 2 iframe ophalen Wanneer je video geupload is dien je de iframe op te halen, zodat je de video in de leeromgeving kunt plaatsen. Klik rechtsboven op het poppetje en ga naar de Creator Studio. Zoek vervolgens je video op en druk op de titel van de video. Onder de video staat de titel, maar vind je ook drie opties waarvan je delen moet hebben. Wanneer je op delen hebt geklikt krijg je ervolgens weer een aantal opties waarvan je insluiten moet hebben. je iframe komt tevoorschijn. Kopieer deze naar de gewenste plek in de leeromgeving en je video staat in de leeromgeving. 3 Parameters toevoegen Nu we de iframe hebben kunnen we een aantal parameters toevoegen. Parameters zijn optioneel en zijn dus niet perse nodig! Echter is het soms fijn om ze te gebruiken. Hieronder de meest gebruikte parameters: rel=0 verwijdert de video's aan het einde van een film showinfo=0 verwijdert de titel start=0 end=0 twee parameters voor het begin en einde van een filmpje (werkt in secondes) Hoe pas je deze parameters toe? Plaats een vraagteken (?) achter de video ID: https://www.youtube.com/embed/zkd5o14ht0q? Vervolgens kan je er een parameter achter plaatsen: https://www.youtube.com/embed/zkd5o14ht0q?rel=0 Wil je meerdere parameters gebruiken, dan dien je een & achter de vorige parameter te zetten: https://www.youtube.com/embed/zkd5o14ht0q?rel=0&showinfo=0 8 / 8