Diavoorstelling

broekmate · Bericht door **broekmate** » 19 november 2012, 15:12

hallo

ik wil graag op de plaats waar nu een foto staat op http://www.solinijverdal.nl een soort diavoorstelling waar verschillende foto afwisselend worden vertoont

wie weet raad

groeten jan

dillinger · Bericht door **dillinger** » 19 november 2012, 23:20

Ik zou zeggen zoek eens naar "javascript slideshow".
Als je iets vindt wat je wat lijkt en je komt er niet uit, kun je altijd nog verder vragen.

Michel.

nirwana · Bericht door **nirwana** » 20 november 2012, 15:37

Jan,

Ik denk dat je zoiets zoekt.
Dat is een voorbeeld van de jQuery Cycle-plugin.

Om die in een website op te nemen zul je dit in de bron van de pagina moeten invoeren.
Je kunt echter goed spieken in de bron van het voorbeeld hierboven.
Als je de bron van jouw pagina bekijkt, dan zie je 2 belangrijke onderdelen: de head en de body.
De body bevat de eigenlijke pagina en de head bevat alle informatie die de pagina nodig heeft, zoals scripts en opmaak-bestanden (CSS). De head begint bovenin de pagina en staat tussen <head> en </head>. De body begint direct onder de head en staat tussen <body> en </body>. Kijk dus eerst even of je deze beide in jouw pagina kunt vinden.

Elke goede webpagina heeft een titel (tussen <title> en </title>) in de head staan.
Achter </title> kun je dan de volgende code opnemen:

Code: Selecteer alles

<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
});
</script>

Dit heb ik gewoon rechtstreeks uit de head-sectie van de bron-code van de voorbeeldpagina gekopieerd.

Daarna kun je de onderstaande code in de plaats zetten van de afbeelding die nu aan de rechterkant staat.
Daarvoor kun je het beste terugschakelen naar de Ontwerp-weergave van de pagina. Daar kun je de afbeelding aan de rechterkant selecteren. Vervolgens ga je naar het menu Invoegen > HTML en daar plak je de onderstaande code in plaats van de afbeelding die daar al staat (<img ....>). Op die manier wordt de afbeelding vervangen door de slideshow. Dat kan er in Kompozer misschien wat vreemd uitzien, maar het gaat er uiteindelijk om dat het er in een webbrowser (zoals Firefox) goed uitziet en dat je de afbeeldingen in Kompozer kunt beheren.

Code: Selecteer alles

	<div class="slideshow">
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
	</div>

Eventueel moet je dan nog de slideshow wat uitlijnen om deze op de juiste plaats te krijgen. Ik zie dat in de huidige pagina uitlijnen vooral gebeurt door spaties in de pagina op te nemen. Dat zou ik proberen te voorkomen, want er zijn doorgaans betere opties dan het gebruik van spaties.

De afbeeldingen die nu vanaf github.com worden geladen, kun je uiteraard vervangen door eigen afbeeldingen.
Anders heeft de slideshow namelijk zo weinig zin. Het is wel van belang dat de afbeeldingen die je voor de slideshow wilt gebruiken hetzelfde formaat hebben. Dat kun je met een grafisch programma voor elkaar krijgen, maar er zijn ook wel (gratis) programma's die bijvoorbeeld alle afbeeldingen in een bepaalde map tegelijk kunnen verkleinen naar een opgegeven formaat.

Een voorbeeld van jullie website met een slideshow heb ik geplaatst op http://www.mozbrowser.nl/web/solinijverdal/index.html
Zo kun je zien hoe ik het uiteindelijk voor ogen heb. Denk daar afbeeldingen van Soli Nijverdal in en dan heb je weer een mooie aanwinst voor de website.

nirwana · Bericht door **nirwana** » 20 november 2012, 15:37

Nog enkele andere opmerkingen over de Soli-website:
- het zou mooi zijn als je de beginpagina van een titel kunt voorzien (dit kan in Kompozer via het menu Opmaak > Paginatitel en eigenschappen...). Die titel gebruiken zoekmachines (Google, Bing, etc) namelijk ook, zodat zij weten hoe jij de pagina wilt noemen. Als je nu zoekt in Google op Soli Nijverdal dan zie je allemaal pagina's die solinijverdal heten, of nog erger: solinijverdalindex. Hier kun je bijvoorbeeld ook "SOLI Nijverdal" in plaatsen of bijvoorbeeld voor de beginpagina: "SOLI Nijverdal: Welkom". Zo kun je elke pagina een eigen titel geven.

- het zou ook mooi zijn als je een betere afbeelding van het Soli-logo hebt. Nu zie ik namelijk op afstand dat de kleuren die egaal zouden moeten zijn in feite niet egaal van kleur zijn: http://www.solinijverdal.nl/AFBEELDING/soli_web1.gif Het lijkt alsof het een JPG-afbeelding is, maar misschien is dit bijvoorbeeld eens gescand vanuit een briefhoofd van de vereniging (of zoiets). Toch zou het mooi zijn om de afbeelding te vervangen door een kwalitatief betere afbeelding. Zo lijkt http://hartvanhellendoorn.nl/ckeditor/f ... gloria.png bijvoorbeeld beter van kwaliteit: http://hartvanhellendoorn.nl/ckeditor/f ... gloria.png

- daaruit komt ook een andere tip naar voren: zorg ervoor dat je de afbeeldingen die je op de website gebruikt alvast verkleind naar het formaat waarop je dit wilt gebruiken. Zo wordt http://www.solinijverdal.nl/AFBEELDING/foto%20soli.jpg op de voorpagina gebruikt, maar die afbeelding is in werkelijkheid veel groter.

Als je die in een slideshow wilt gebruiken, dan is het zeker aan te raden om de afbeeldingen vooraf even in een grafisch programma te verkleinen naar het formaat dat je op de website wilt gebruiken. Zie bijvoorbeeld deze instructies.

broekmate · Bericht door **broekmate** » 23 november 2012, 7:33

> dit is wat ik bedoel allen de randen moeten nog weg maar dat
> zal ook wel lukken ik was een paar dagen weg vandaar dat ik nu pas reageer
> ik hoop dat het mij ook lukt maar dat zien we wel
> alen bedankt
> groeten jan

nirwana · Bericht door **nirwana** » 23 november 2012, 23:53

Jan,

Die rand lijkt mij eenvoudig weg te werken.

Als je in de broncode van de pagina kijkt, dan staat daar nu het volgende:

Code: Selecteer alles

.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }

Dit kun je vervangen door:

Code: Selecteer alles

.slideshow img { padding: 0px; border: 1px solid #ccc; background-color: #eee; }

Daarmee haal je extra ruimte om de afbeelding weg en laat dat nu precies die rand zijn

Er is namelijk voor de afbeelding een grijze achtergrondkleur (#eee) ingesteld. Als je dan die afbeelding aan alle kanten 15 pixels ruimte geeft, dan heb je daarmee een grijze rand van 15 pixels gecreëerd.

Iemand anders zou in zo'n geval een border: 15px solid #eee hebben opgegeven, maar in dit geval zit er ook nog een heel klein grijs randje (#ccc) omheen. Waarschijnlijk hebben ze daarom wel voor deze constructie gekozen, want dan heb je zowel een randje eromheen als een kader om de foto heen (als ware het een echte fotolijst). Maar dat is nu net niet wat jij in dit geval wilt bereiken. Gelukkig zijn dergelijke effecten ook eenvoudig weer weg te werken.

broekmate · Bericht door **broekmate** » 24 november 2012, 11:40

iedereen bedankt het zal wel januari worden als de nieuwe pagina er is maar jullie hebben mij flink geholpen
dank dank!!!!!!!!!!!!!!!!
jan

nirwana · Bericht door **nirwana** » 24 november 2012, 23:40

Jan,

Plaats hier maar een berichtje als het zover is. Ik ben wel benieuwd hoe dat er uit komt te zien met de nieuwe foto's.

PaulGJ · Bericht door **PaulGJ** » 2 februari 2013, 17:09

nirwana schreef:Jan,

Ik denk dat je zoiets zoekt.
Dat is een voorbeeld van de jQuery Cycle-plugin.

Om die in een website op te nemen zul je dit in de bron van de pagina moeten invoeren.
Je kunt echter goed spieken in de bron van het voorbeeld hierboven.
Als je de bron van jouw pagina bekijkt, dan zie je 2 belangrijke onderdelen: de head en de body.
De body bevat de eigenlijke pagina en de head bevat alle informatie die de pagina nodig heeft, zoals scripts en opmaak-bestanden (CSS). De head begint bovenin de pagina en staat tussen <head> en </head>. De body begint direct onder de head en staat tussen <body> en </body>. Kijk dus eerst even of je deze beide in jouw pagina kunt vinden.

Elke goede webpagina heeft een titel (tussen <title> en </title>) in de head staan.
Achter </title> kun je dan de volgende code opnemen:
Code: Selecteer alles
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
});
</script>
Dit heb ik gewoon rechtstreeks uit de head-sectie van de bron-code van de voorbeeldpagina gekopieerd.

Daarna kun je de onderstaande code in de plaats zetten van de afbeelding die nu aan de rechterkant staat.
Daarvoor kun je het beste terugschakelen naar de Ontwerp-weergave van de pagina. Daar kun je de afbeelding aan de rechterkant selecteren. Vervolgens ga je naar het menu Invoegen > HTML en daar plak je de onderstaande code in plaats van de afbeelding die daar al staat (<img ....>). Op die manier wordt de afbeelding vervangen door de slideshow. Dat kan er in Kompozer misschien wat vreemd uitzien, maar het gaat er uiteindelijk om dat het er in een webbrowser (zoals Firefox) goed uitziet en dat je de afbeeldingen in Kompozer kunt beheren.
Code: Selecteer alles
	<div class="slideshow">
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
		<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
	</div>
Eventueel moet je dan nog de slideshow wat uitlijnen om deze op de juiste plaats te krijgen. Ik zie dat in de huidige pagina uitlijnen vooral gebeurt door spaties in de pagina op te nemen. Dat zou ik proberen te voorkomen, want er zijn doorgaans betere opties dan het gebruik van spaties.

De afbeeldingen die nu vanaf github.com worden geladen, kun je uiteraard vervangen door eigen afbeeldingen.
Anders heeft de slideshow namelijk zo weinig zin. Het is wel van belang dat de afbeeldingen die je voor de slideshow wilt gebruiken hetzelfde formaat hebben. Dat kun je met een grafisch programma voor elkaar krijgen, maar er zijn ook wel (gratis) programma's die bijvoorbeeld alle afbeeldingen in een bepaalde map tegelijk kunnen verkleinen naar een opgegeven formaat.

Een voorbeeld van jullie website met een slideshow heb ik geplaatst op http://www.mozbrowser.nl/web/solinijverdal/index.html
Zo kun je zien hoe ik het uiteindelijk voor ogen heb. Denk daar afbeeldingen van Soli Nijverdal in en dan heb je weer een mooie aanwinst voor de website.

Is het ook mogelijk om de interval tussen de foto's in te stellen?

nirwana · Bericht door **nirwana** » 2 februari 2013, 17:52

Jan,

Is het ook mogelijk om de interval tussen de foto's in te stellen?

Jazeker is dat mogelijk. Je kunt opties meeegeven, zoals nu het soort slideshow-effect. Kijk maar eens op de jQuery Cycle-pagina voor voorbeelden. Het gaat hier om de delay-optie.

Je moet wel een beetje uitkijken met het toevoegen van opties. Als je 1 keer een komma vergeet dan doet de slideshow het niet meer.

MozBrowser

Diavoorstelling

Diavoorstelling

Re: dia voorsteling

Re: dia voorsteling

Re: dia voorsteling

Re: Diavoorstelling

Re: Diavoorstelling

Re: Diavoorstelling

Re: Diavoorstelling

Re: dia voorsteling

Re: dia voorsteling