/* - The javascript-slideshow I once got for free for 14 days from http://www.webpasties.com, stood at the base of this slideshow - that's where I got the idea! - I adapted it to fit my own purposes, stripped all things unnecessary out of it and made it cross-browser and standards-compliant. - Then a colleague of mine rewrote the entire function-part of the script, replacing all the different functions with just one function. - The HTML that is needed for the slideshow is yours to develop, or you can use my example. - The CSS for the slideshow you can also develop yourself, or you can find an example in my stylesheet. Make sure you identify your HTML-elements to correspond with the id's in the script (see function). */ // counter var start = 0; // number of slides var aantal = 18; // arrays for the different elements needed for the slideshow var s_urls = new Array(aantal); // url to the images of a slides var s_text = new Array(aantal); // text shown below the slides var s_links = new Array(aantal); // url for the links when clicking on the slides var s_filters = new Array(aantal); // filters to be applied to the slide-transitions (works only for IE) // check which browser var agt = navigator.userAgent.toLowerCase(); // check if opera impersonating IE var is_opera = (agt.indexOf("opera") != -1 || agt.indexOf("opera") != -1); // data for the different slides s_urls[0] = "img/webdesign/jeugdwerkloosheid.png"; s_text[0] = "Take one of the website of a Dutch TaskForce"; s_links[0] = "http://www.handreikingjeugdwerkloosheid.nl"; s_filters[0] = "progid:DXImageTransform.Microsoft.Slide(duration=1.5)"; s_urls[1] = "img/webdesign/jeugdwerkloosheid_nieuw.png"; s_text[1] = "Take two of the website of a Dutch TaskForce (new HTML and CSS)"; s_links[1] = "http://www.handreikingjeugdwerkloosheid.nl"; s_filters[1] = "progid:DXImageTransform.Microsoft.Zigzag(duration=1.5)"; s_urls[2] = "img/webdesign/jeugdwerkloosheid_nieuw_02.png"; s_text[2] = "Take three of the website of a Dutch TaskForce (improved HTML and CSS)"; s_links[2] = "http://www.handreikingjeugdwerkloosheid.nl"; s_filters[2] = "progid:DXImageTransform.Microsoft.Blinds(duration=1.5)"; s_urls[3] = "img/webdesign/jbs-us.png"; s_text[3] = "New website for an ISP"; s_links[3] = "http://www.jbs-us.nl"; s_filters[3] = "progid:DXImageTransform.Microsoft.Wheel(duration=1.5)"; s_urls[4] = "img/webdesign/bart_ver_trouwen.png"; s_text[4] = "The website for the marriage of my sister"; s_links[4] = "http://www.dijkman-dulkes.nu/trouwen/"; s_filters[4] = "progid:DXImageTransform.Microsoft.Spiral(duration=1.5)"; s_urls[5] = "img/webdesign/focolare.png"; s_text[5] = "A new design for a friends website"; s_links[5] = "http://www.focolare.net"; s_filters[5] = "progid:DXImageTransform.Microsoft.Barn(duration=1.5)"; s_urls[6] = "img/webdesign/fimcap.png"; s_text[6] = "My first website"; s_links[6] = "http://www.fimcap.org"; s_filters[6] = "progid:DXImageTransform.Microsoft.Pixelate(duration=1.5)"; s_urls[7] = "img/webdesign/rbvm.png"; s_text[7] = "Ruim Baan Voor Minderheden - a governmental project website - uses CSS-graphs"; s_links[7] = "http://rbvm.szw.nl"; s_filters[7] = "progid:DXImageTransform.Microsoft.Iris(duration=1.5)"; s_urls[8] = "img/webdesign/sc.png"; s_text[8] = "The birthcard company"; s_links[8] = "http://www.specialcollection.nl"; s_filters[8] = "progid:DXImageTransform.Microsoft.GradientWipe(duration=1.5)"; s_urls[9] = "img/webdesign/politiebestel.png"; s_text[9] = "A simple, informative website for an investigative workinggroup"; s_filters[9] = "progid:DXImageTransform.Microsoft.Fade(duration=1.5)"; s_urls[10] = "img/webdesign/agentschap_default.png"; s_text[10] = "Take one of a website of a Dutch Agency"; s_links[10] = "http://agentschap.szw.nl"; s_filters[10] = "progid:DXImageTransform.Microsoft.CheckerBoard(duration=1.5)"; s_urls[11] = "img/webdesign/agentschap_nieuw.png"; s_text[11] = "Take two of a website of a Dutch Agency (only new CSS)"; s_links[11] = "http://agentschap.szw.nl"; s_filters[11] = "progid:DXImageTransform.Microsoft.RandomDissolve(duration=1.5)"; s_urls[12] = "img/webdesign/this_site.png"; s_text[12] = "The very first design of this website"; s_links[12] = "http://www.naafsvandijk.nl"; s_filters[12] = "progid:DXImageTransform.Microsoft.Blinds(duration=1.5)"; s_urls[13] = "img/webdesign/this_site_robin.png"; s_text[13] = "Our website after a thorough restyling"; s_links[13] = "http://www.naafsvandijk.nl"; s_filters[13] = "progid:DXImageTransform.Microsoft.Pixelate(duration=1.5)"; s_urls[14] = "img/webdesign/this_site_lucas.png"; s_text[14] = "Our website with a new main picture and the Reverse stylesheet applied"; s_links[14] = "http://www.naafsvandijk.nl"; s_filters[14] = "progid:DXImageTransform.Microsoft.Barn(duration=1.5)"; s_urls[15] = "img/webdesign/verlofwijzer.png"; s_text[15] = "A government website before a restyling"; s_links[15] = "http://verlofwijzer.szw.nl"; s_filters[15] = "progid:DXImageTransform.Microsoft.Wheel(duration=1.5)"; s_urls[16] = "img/webdesign/verlofwijzer_nieuw.png"; s_text[16] = "A government website after a restyling and restructuring"; s_links[16] = "http://verlofwijzer.szw.nl"; s_filters[16] = "progid:DXImageTransform.Microsoft.GradientWipe(duration=1.5)"; s_urls[17] = "img/webdesign/webdesign.png"; s_text[17] = "A collage of the different websites I've worked on"; s_links[17] = "http://www.naafsvandijk.nl"; s_filters[17] = "progid:DXImageTransform.Microsoft.RandomDissolve(duration=1.5)"; // global function to create and drive the slideshow function slideshow(s) { // get the source for the images document.getElementById('slideImage').src=s_urls[s]; // get the link for the links when clicking on the images document.getElementById('slideLink').href=s_links[s]; // get the text displayed under the images document.getElementById('slideText').innerHTML=s_text[s]; /* if IE, use imagetransitions; if Opera impersonating IE (or any other browser) don't do the imagetransitions, just switch slides */ if (navigator.appName == 'Microsoft Internet Explorer' && !is_opera) { document.getElementById('slideImage').style.filter=s_filters[s]; document.getElementById('slideImage').filters[0].Apply(); document.getElementById('slideImage').filters[0].Play(); } // increment counter start++; // if at the end of the slideshow, restart if (start==aantal) start=0; // change slides every n milliseconds setTimeout("slideshow(start)",5000); } // run slideshow - html for slides in a separate file setTimeout("slideshow(start)",5000);