fade slideshow

Status
Niet open voor verdere reacties.
G

gast0515

Gebruiker
Lid geworden
4 jan 2010
Berichten
134
Hallo,
ik zoek een code voor de fade slideshow.....
Ik heb al wat gelezen op deze site maar snap nog steeds niet wat de juiste code is.
Ik heb deze link gevonden: http://developerscorner.nl/css-exercitions/foto-carrousel.php#aha

Het is precies wat ik zoek (deze fade slideshow) maar wat is nou de juiste code dat ik tussen <head> bij de <body> en uiteindelijk op juiste plek waar de foto moet staan moet plaatsen?

Alvast dank voor jullie help.
 
Laatst bewerkt door een moderator:
Helaas, het leejoo-script werkt alleen in Internet Explorer (zoals wel meer leejoo-scripts niet 100% zijn) ... :shocked:
Door het gebruik van het IE-only "blendTrans"-filter is er geen fade van het ene naar het andere plaatje in Firefox, Opera, Safari, Chrome, enz. :(

wat is nou de juiste code dat ik tussen <head> bij de <body> en uiteindelijk op juiste plek waar de foto moet staan moet plaatsen?
Klik om te vergroten...
In de <head> moet komen:
HTML: 
<link rel="stylesheet" type="text/css" href="css/carrousel.css">

<script type="text/javascript">
	var setPause = 5; // tijd tot verschijnen volgende afbeelding, in te stellen in sec
/*
de onderstaande styles zijn hier nodig om IE bij opstarten geen flits van het 
scrollbalkje te laten zien;
ze zouden anders opgenomen kunnen worden als unobtrusive javascript, want dat levert
een kwaliteitspunt op bij de Webrichtlijnen Quickscan :-)
*/
	document.write('<style type="text/css">')
	document.write('   #carrousel li { position: absolute; /* voor IE! */ }');
	document.write('   #carrousel img { display: none; position: absolute; z-index: 1; }');
	document.write('   #carrousel #thumb-1 { display: block; opacity: 1; }');
	document.write('<\/style>');
</script>

</head>

<body onload="readImageNumber();carrousel();"><!-- dit is nodig voor het carrousel -->
In de <body> zet je jouw variant van ... :
HTML: 
<div id="carrousel"><!-- dit is nodig voor het carrousel -->
   .....
</div>
... waarbij je de ID-namen ongewijzigd moet laten, dus:
Code: 
[SIZE="2"]<li><a href="images/groot/draaimolen.jpg"><img 
    [B]id="thumb-1"[/B] title="Klik voor vergroting"
    src="images/klein/draaimolen-klein.jpg" alt="..."></a></li>
enz.[/SIZE]
En vlak voor het eind van de </body> zet je de verwijzing naar het carrousel-script:
HTML: 
<script type="text/javascript" src="scripts/carrousel.js"></script><!-- dit is nodig voor het carrousel -->
</body>
</html>
Niet vergeten de carrousel.css en de carrousel.js te downloaden en naar je server te uploaden in de goede mapjes! ;)

Zo zou ie goed moeten gaan.

Met vriendelijke groet,
CSShunter
 
Besten
dank voor jullie reactie maar ik begrijp er toch nog steeds niets van :-(
Ik er nog een andere een voudige code dat ik kan gebruiken?

Alvast dank,
 
Laatst bewerkt door een moderator:
Hoi ,
Is er nog een andere eenvoudige code die ik kan gebruiken?
Klik om te vergroten...
Ik heb even geGoogle'd, maar je ziet daar vooral modules die in een of ander CMS (Content Management System, zoals Joomla e.d.) gestopt moeten worden, en uitbreidingen voor bepaalde web-editor programma's.
Misschien kan het ook als je een javascript-bibliotheek als jquery.js invoegt, dat weet ik niet.
Een eenvoudig losstaand scriptje zag ik in elk geval niet zo gauw.

Maar met wat er hierboven staat, moet het nu toch ook weer niet zó moeilijk te maken zijn met het [url]www.developerscorner.nl/css-exercitions/foto-carrousel.php[/URL].

Hoe ver ben je tot dusverre gekomen met de pagina waar het op moet komen te staan (linkje)?
Dan kunnen we concreet gaan plakken & knippen. :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt door een moderator:
beste css hunter,
dank voor jouw reacties.
Ik heb een andere code gevonden voor de slideshow. Het is geen fade slideshow maar de code snap ik wel en kan makkelijk toepassen. Ik houd het dus bij deze.

Vriendelijke groet,
 
Laatst bewerkt door een moderator:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan