3 plaatjes slideshow

Status
Niet open voor verdere reacties.
A

arienlans

Gebruiker
Lid geworden
15 aug 2008
Berichten
172
Kan je op een pagina meerder slideshows maken?

de volgende scripts heb ik :
slideshow.js
[JS]<!-- Begin
// slideShow snelheid (milliseconds)
var slideShowSpeed = 3500;
// de tijd van crossfade (seconds)
var crossFadeDuration = 5;
// Specify the image files
var Pic = new Array();

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'
Pic[5] = '6.jpg'
Pic[6] = '7.jpg'
Pic[7] = '8.jpg'
Pic[8] = '9.jpg'
Pic[9] = '10.jpg'
Pic[10] = '11.jpg'


var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad = new Image();
preLoad.src = Pic;
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply ();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play( );
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->[/JS]

index.html
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="slidescript.js"></script> 
</head>


<body onLoad="runSlideShow()"> 
<img src="1.jpg" alt="1.jpg" name="SlideShow" width="170" height="170" id="SlideShow" />.
<img src="3.jpg" alt="3.jpg" name="SlideShow" width="170" height="170" id="SlideShow" />
</body>
</html>

Ariën
 
Hoi Ariën ,
Dat script zal voor het infaden (de overvloeiers) alleen in Internet Explorer werken, want het maakt gebruik van codes/mechanieken die alleen voor IE gelden. In alle andere browsers (Firefox, Opera, Safari, Chrome, enz.) zal er niets van de mooie overvloeiers te zien zijn... :(
Die doet het in elk geval in alle browsers, en kan met wat aanpassinkjes ook wel 3x op 1 pagina getoond worden lijkt me. :)
Alleen, zou het niet wat veel van het goede worden, als er op 3 plekken op de pagina dingen aan het veranderen zijn?
In dat geval zouden er ook een of twee bij kunnen met een:
Met vriendelijke groet,
CSShunter
 
meerdere plaatjes

het lukt mij nog om 2 plaatjes op een pagina op mijn site te laten rouleren ik heb het volgende gedaan:

een 2e js gemaakt
in de css alles dubbel gemaakt met een 2 erachter
en de html zie hieronder

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>

     <title>Gebr. A en R van der Lans</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<meta name="Author" content="Ari&euml;n van der Lans" />
	<meta name="language" content="Dutch" />
	<meta name="copyright" content="Gebr. A en R van der Lans Trostomatenkwekerij" />
	<meta name="robots" content="INDEX,FOLLOW" />
	<meta name="revisit after" content="30 days" />
	<meta name="description" content="Dit is de website Gebr. A en R van der Lans telers van Prominent troscocktailtomaten" />
	<meta name="keywords" content="lans, Gebr, tomaat, trostomaat, prominent, cocktail, biologiche, planten, kwekerij, tuinbouw, recepten, kweken, recept, soorten, tuinen, koken" />
		
	<link rel="stylesheet" type="text/css" href="css/styles.css" />
	<link rel="stylesheet" type="text/css" href="css/carrousel.css" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />


 


 
<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>

<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('   #carrousel2 li { position: absolute; /* voor IE! */ }');
	document.write('   #carrousel2 img { display: none; position: absolute; z-index: 1; }');
	document.write('   #carrousel2 #thumb-1 { display: block; opacity: 1; }');
	document.write('<\/style>');
</script>
 
</head>
 
<body onload="readImageNumber();carrousel();"><!-- dit is nodig voor het carrousel -->
 

 
<div id="carrousel"><!-- dit is nodig voor het carrousel -->
	<ul>
		<li><img id="thumb-1" src="1.jpg" alt="..." height="170" width="170"></a></li>
		
		<li><img id="thumb-2" src="2.jpg" alt="..." height="170" width="170"></a></li>
		
		<li><img id="thumb-3" src="3.jpg" alt="..." height="170" width="170"></a></li>
		
		<li><img id="thumb-4" src="4.jpg" alt="..." height="170" width="170"></a></li>
		
		<li><img id="thumb-5" src="5.jpg" alt="..." height="170" width="170"></a></li>
	</ul>
</div>
<script type="text/javascript" src="carrousel.js"></script><!-- dit is nodig voor het carrousel -->
</body>
 
<body onload="readImageNumber();carrousel2();"><!-- dit is nodig voor het carrousel --> 
<div id="carrousel2"><!-- dit is nodig voor het carrousel -->
	<ul>
		<li><img id="thumb-6" src="6.jpg" alt="..." height="170" width="170"></a></li>
		
		<li><img id="thumb-7" src="7.jpg" alt="..." height="170" width="170"></a></li>
		
		<li><img id="thumb-8" src="8.jpg" alt="..." height="170" width="170"></a></li>
		
		<li><img id="thumb-9" src="9.jpg" alt="..." height="170" width="170"></a></li>
		
		<li><img id="thumb-10" src="10.jpg" alt="..." height="170" width="170"></a></li>
	</ul>
</div> 
<script type="text/javascript" src="carrousel.js2"></script><!-- dit is nodig voor het carrousel -->
 
</body> 
</html>

Ariën
 
Hoi Ariën,
Ja, dit principe lijkt me goed. Maar er zal nog wel wat moeten gebeuren om 'm soepel draaiend te krijgen, denk ik.
De dubbele javascript-aanroep in de <head> kan vereenvoudigd worden, en daar kan dan meteen de onload-functie bijgezet worden (in plaats van in de <body> tag). En zowel voor de dubbele carrousel-functie als voor het tellen van het aantal plaatjes per carrousel moeten de instructies opgenomen worden.
NB: carrousel2 begint met #thumb-6, en niet met #thumb-1. ;)
Dan wordt het:
HTML: 
<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('   #carrousel2 li { position: absolute; /* voor IE! */ }');
	document.write('   #carrousel2 img { display: none; position: absolute; z-index: 1; }');
	document.write('   #carrousel2 #thumb-6 { display: block; opacity: 1; }');
	document.write('<\/style>');
	window.onload = function(){
		readImageNumber();carrousel();
		readImageNumber2();carrousel2();
	}
</script>
De onload="..." in de <body> mag nu weg.
En ik zie ... een tweede <body> voor het tweede carrousel. Maar één pagina kan maar één <body> hebben. De tweede kan vervallen.
En helemaal op het eind kunnen de twee scripts opgeroepen worden. Dan wordt het:
HTML: 
<body>
 
<div id="carrousel">
    <ul>
        <li><img id="thumb-1" src="1.jpg" alt="..." height="170" width="170"></a></li>
        <li><img id="thumb-2" src="2.jpg" alt="..." height="170" width="170"></a></li>
        <li><img id="thumb-3" src="3.jpg" alt="..." height="170" width="170"></a></li>
        <li><img id="thumb-4" src="4.jpg" alt="..." height="170" width="170"></a></li>
        <li><img id="thumb-5" src="5.jpg" alt="..." height="170" width="170"></a></li>
    </ul>
</div>

<div id="carrousel2">
    <ul>
        <li><img id="thumb-6" src="6.jpg" alt="..." height="170" width="170"></a></li>
        <li><img id="thumb-7" src="7.jpg" alt="..." height="170" width="170"></a></li>
        <li><img id="thumb-8" src="8.jpg" alt="..." height="170" width="170"></a></li>
        <li><img id="thumb-9" src="9.jpg" alt="..." height="170" width="170"></a></li>
        <li><img id="thumb-10" src="10.jpg" alt="..." height="170" width="170"></a></li>
    </ul>
</div> 

<script type="text/javascript" src="carrousel.js"></script>
<script type="text/javascript" src="carrousel2.js"></script>
 
</body>
Wat nu nog resteert, is dat alle variabelen en aangeroepen elementen in het carrousel2.js javascript nog nagelopen moeten worden.
Want ook die moeten gescheiden worden voor de twee carrousels, anders gaan ze dwars door elkaar heen lopen, met onverwachte effecten (waarschijnlijk doet geen van de twee het dan meer). Bijvoorbeeld in carrousel2.js zal het moeten worden:
var fotoAantal2;
function readImageNumber2(){ // automatische afbeeldingen-teller voor carrousel 2
fotoAantal2 = document.getElementById('carrousel2').getElementsByTagName('img').length;
}​
Met vriendelijke groet,
CSShunter
 
Dit heb ik nu maar na het 5e plaatje stopt hij en krijg ik een foutmelding in regel 50 wie ziet de fout

[JS]// carrousel.js
//
// Copyright 2010 francky: www.developerscorner.nl
// See http://developerscorner.nl/css-exercitions/foto-carrousel.php
// Fading script inspired by: http://hungred.com/how-to/tutorial-how-does-image-fade-in-when-picture-loaded/
// Published under Creative Commons License "Attribution-Noncommercial-Share Alike 3.0 Unported"
// Toegestaan is:
// kopieren, verspreiden en doorgeven,
// en bewerking naar eigen smaak; :-)
// op voorwaarde van opnemen van deze bronvermelding in de broncode;
// alleen voor niet-commercieel gebruik;
// verspreiden van een bewerking kan alleen onder dezelfde voorwaarden.
// See: http://creativecommons.org/licenses/by-nc-sa/3.0/nl/ (voor NL tekst)
// or: http://creativecommons.org/licenses/by-nc-sa/3.0/ (for EN text)

if (!setPause2){ var setPause2 = 5; } // veiligheidsklep voor als niet in html ingesteld

var fotoAantal2;
function readImageNumber2(){ // automatische afbeeldingen-teller
fotoAantal2 = document.getElementById('carrousel2').getElementsByTagName('img2').length;
}

var pause2 = setPause2*1000; // nu automatisch in millisec
var func2;
function waitulator2(func2){ // pauze inlassen voor triggeren van willekeurige functie "func"
var t2 = window.setTimeout(func2, pause2);
}

var doorloop2 = 2; // beginnen met tweede foto in te faden
function carrousel2(){
if (doorloop2 == fotoAantal2+1){ // als serie helemaal doorgelopen is
doorloop2 = 1; // begin opnieuw met eerste foto
}
waitulator2('showNhide2()'); // wacht even, laat deze foto infaden en verberg de rest
}

var doorloopOud2 = 0;
function showNhide2(){
var j2;
for (j2=1; j2<=fotoAantal2; j2++) { // alle afbeeldingen langslopen
if (j2!=doorloop2) { // als niet de huidige
document.getElementById('thumb2-'+j2+'').style.zIndex2 = "1"; // alle andere naar de achtergrond
}
if (doorloopOud2 != 0){ // als er een vorige is
if (j2!=doorloopOud2){ // voor alles behalve de vorige
document.getElementById('thumb2-'+j2+'').style.display2 = "none"; // alle andere uitzetten
}
}
}
document.getElementById('thumb2-'+doorloop2+'').style.zIndex = "2"; // deze naar de voorgrond
document.getElementById('thumb2-'+doorloop2+'').style.opacity = "0"; // deze nog helemaal doorzichtig
document.getElementById('thumb2-'+doorloop2+'').style.display = "block"; // deze aanzetten
fadeIn('thumb2-'+doorloop2+''); // deze infaden over de oude afbeelding heen
doorloopOud2 = doorloop2;
doorloop2++; // volgende klaarzetten
carrousel2(); // en opnieuw wisselen
}

var opacity;
function fadeIn(objId,opacity) {
if ( !opacity ){ // no need to give a starting opacity value (i.e.: 0) in the html
opacity = 0;
}
if (document.getElementById) {
var obj2 = document.getElementById(objId);
if (opacity <= 60) { // soft start
obj2.style.filter = "alpha(opacity:"+opacity+")"; // older IE/Win
obj2.style.KHTMLOpacity = opacity/100; // Safari<1.2, Konqueror
obj2.style.MozOpacity = opacity/100; // older Mozilla and Firefox
obj2.style.opacity = opacity/100; // modern browsers
opacity += 1;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 1);
}

if ( opacity > 60 && opacity <= 100) { // speeding up
obj2.style.filter = "alpha(opacity:"+opacity+")"; // older IE/Win
obj2.style.KHTMLOpacity = opacity/100; // Safari<1.2, Konqueror
obj2.style.MozOpacity = opacity/100; // older Mozilla and Firefox
obj2.style.opacity = opacity/100; // modern browsers
opacity += 2;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 2);
}
}
}
[/JS]

Ariën
 
Laatst bewerkt:
Ik denk dat de function fadeIn(objId,opacity) in het tweede script dezelfde functie uit het eerste script dwarsboomt.
Die moet dus ook nog afgesplitst worden.
  • In regel 60 zal var opacity; nog moeten worden: var opacity2;.
  • In de volgende regel: function fadeIn(objId,opacity) { moet worden: function fadeIn2(objId,opacity2) {.
  • Daaronder: overal waar opacity (als variabele-naam) staat, ook vervangen door opacity2.
En
HTML: 
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 1);
resp.
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 2);
moet worden:
HTML: 
window.setTimeout("fadeIn2('"+objId+"',"+opacity2+")", 1);
resp.
window.setTimeout("fadeIn2('"+objId+"',"+opacity2+")", 2);
Helpt dat?

Met vriendelijke groet,
CSShunter
 
Hij blijft vast lopen op

document.getElementById('thumb2-'+doorloop2+'').style.zIndex = "2";

[JS]// carrousel.js
//
// Copyright 2010 francky: www.developerscorner.nl
// See http://developerscorner.nl/css-exercitions/foto-carrousel.php
// Fading script inspired by: http://hungred.com/how-to/tutorial-how-does-image-fade-in-when-picture-loaded/
// Published under Creative Commons License "Attribution-Noncommercial-Share Alike 3.0 Unported"
// Toegestaan is:
// kopieren, verspreiden en doorgeven,
// en bewerking naar eigen smaak; :-)
// op voorwaarde van opnemen van deze bronvermelding in de broncode;
// alleen voor niet-commercieel gebruik;
// verspreiden van een bewerking kan alleen onder dezelfde voorwaarden.
// See: http://creativecommons.org/licenses/by-nc-sa/3.0/nl/ (voor NL tekst)
// or: http://creativecommons.org/licenses/by-nc-sa/3.0/ (for EN text)

if (!setPause2){ var setPause2 = 5; } // veiligheidsklep voor als niet in html ingesteld

var fotoAantal2;
function readImageNumber2(){ // automatische afbeeldingen-teller
fotoAantal2 = document.getElementById('carrousel2').getElementsByTagName('img2').length;
}

var pause2 = setPause2*1000; // nu automatisch in millisec
var func2;
function waitulator2(func2){ // pauze inlassen voor triggeren van willekeurige functie "func"
var t2 = window.setTimeout(func2, pause2);
}

var doorloop2 = 2; // beginnen met tweede foto in te faden
function carrousel2(){
if (doorloop2 == fotoAantal2+1){ // als serie helemaal doorgelopen is
doorloop2 = 1; // begin opnieuw met eerste foto
}
waitulator2('showNhide2()'); // wacht even, laat deze foto infaden en verberg de rest
}

var doorloopOud2 = 0;
function showNhide2(){
var j2;
for (j2=1; j2<=fotoAantal2; j2++) { // alle afbeeldingen langslopen
if (j2!=doorloop2) { // als niet de huidige
document.getElementById('thumb2-'+j2+'').style.zIndex = "1"; // alle andere naar de achtergrond
}
if (doorloopOud2 != 0){ // als er een vorige is
if (j2!=doorloopOud2){ // voor alles behalve de vorige
document.getElementById('thumb2-'+j2+'').style.display = "none"; // alle andere uitzetten
}
}
}
document.getElementById('thumb2-'+doorloop2+'').style.zIndex = "2"; // deze naar de voorgrond
document.getElementById('thumb2-'+doorloop2+'').style.opacity2 = "0"; // deze nog helemaal doorzichtig
document.getElementById('thumb2-'+doorloop2+'').style.display = "block"; // deze aanzetten
fadeIn('thumb2-'+doorloop2+''); // deze infaden over de oude afbeelding heen
doorloopOud2 = doorloop2;
doorloop2++; // volgende klaarzetten
carrousel2(); // en opnieuw wisselen
}

var opacity2;
function fadeIn2(objId,opacity2) {
if ( !opacity2 ){ // no need to give a starting opacity value (i.e.: 0) in the html
opacity = 0;
}
if (document.getElementById) {
var obj2 = document.getElementById(objId);
if (opacity2 <= 60) { // soft start
obj2.style.filter = "alpha(opacity2:"+opacity2+")"; // older IE/Win
obj2.style.KHTMLOpacity2 = opacity2/100; // Safari<1.2, Konqueror
obj2.style.MozOpacity2 = opacity2/100; // older Mozilla and Firefox
obj2.style.opacity2 = opacity2/100; // modern browsers
opacity2 += 1;
window.setTimeout("fadeIn2('"+objId+"',"+opacity2+")", 1);
}

if ( opacity2 > 60 && opacity2 <= 100) { // speeding up
obj2.style.filter = "alpha(opacity2:"+opacity2+")"; // older IE/Win
obj2.style.KHTMLOpacity2 = opacity2/100; // Safari<1.2, Konqueror
obj2.style.MozOpacity2 = opacity2/100; // older Mozilla and Firefox
obj2.style.opacity2 = opacity2/100; // modern browsers
opacity2 += 2;
window.setTimeout("fadeIn2('"+objId+"',"+opacity2+")", 2);
}
}
}
[/JS]

Ariën
 
Laatst bewerkt:
Hé, dat zou niet moeten mogen. :confused:
Heb je de thumbs van het tweede carrousel ook in de html al omgenummerd?
HTML: 
<div id="carrousel2">
    <ul>
        <li><img id="thumb2-1" src="6.jpg" alt="..." height="170" width="170"></a></li>
        <li><img id="thumb2-2" src="7.jpg" alt="..." height="170" width="170"></a></li>
        <li><img id="thumb2-3" src="8.jpg" alt="..." height="170" width="170"></a></li>
        <li><img id="thumb2-4" src="9.jpg" alt="..." height="170" width="170"></a></li>
        <li><img id="thumb2-5" src="10.jpg" alt="..." height="170" width="170"></a></li>
    </ul>
</div>
En als je het eerste carrousel even tijdelijk uitschakelt, doet het tweede carrousel het dan wel?
Met vriendelijke groet,
CSShunter
 
opgelost

Ik heb de fout gevonden
[JS]function readImageNumber2(){ // automatische afbeeldingen-teller
fotoAantal2 = document.getElementById('carrousel2').getElementsByTagName('img2').length;
}[/JS]
moet zijn
[JS]function readImageNumber2(){ // automatische afbeeldingen-teller
fotoAantal2 = document.getElementById('carrousel2').getElementsByTagName('img').length;
}[/JS]
img zonder 2

csshunter bedankt voor je hulp

Ariën
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan