Wat het effect "doet", is duidelijk op deze pagina. Om de slider op jouw pagina('s) te plaatsen moet je de html-code plaatsen dáár waar je de slide-show wilt laten verschijnen, en het javascript plaats je (zo laag als mogelijk) in de body-sectie van jouw pagina. In het script kan je eenvoudig alle instellingen, v.w.b. de afmetingen en timers, bepalen. De stylesheet behoort in de head-sectie van de pagina thuis.
<div id="image_fade_slider"></div>
<script>
/*global window: false */
/*global slideshow_wissel: false */
var picture = [{
plaatje: "slideshow-01.jpg",
tekst: "klik op plaatje één",
slide_link: "http://kompoos.nl/javascripts/image-effects/image-slider.html"
},
{
plaatje: "slideshow-02.jpg",
tekst: "klik op plaatje twee",
slide_link: "http://kompoos.nl/javascripts/image-effects/image-slider.html"
},
{
plaatje: "slideshow-03.jpg",
tekst: "klik op plaatje drie",
slide_link: "http://kompoos.nl/javascripts/image-effects/image-slider.html"
}];
var slideshow_fragmenten = 1;
var slideshow_breedte = 320;
var slideshow_hoogte = 180;
var slideshow_tekst_hoogte = 30;
var pauze_slideshow = 2;
var op_tijd = (pauze_slideshow * 1000) - 500;
var speed_slideshow = 3;
var slideshow_plaatjes = [];
var i, clip_links, clip_rechts, slider_element, slider_element2;
if (!document.all) {
var extra_pixels_ie = 3;
}
else {
var extra_pixels_ie = 0;
}
var i_picture = 0;
var breedte_slice;
var clip_top = 0;
var clip_bodem;
var i_clip_rechts = 1;
var div_inhoud = "";
pauze_slideshow = pauze_slideshow * 1000;
var fade_slider = 0;
var fade_slider_stapje = slideshow_breedte / 100 / 7;
var i_fade_slider;
var slideshow_hoogte = slideshow_hoogte;
function open_slide_lamellen() {
clip_links = -breedte_slice;
clip_rechts = 0;
if (i_clip_rechts <= breedte_slice) {
for (i = 0; i <= slideshow_fragmenten; i++) {
var slider_element = 's' + [i];
var deze = document.getElementById(slider_element).style;
deze.clip = "rect(" + clip_top + "px " + clip_rechts + "px " + clip_bodem + "px " + clip_links + "px)";
clip_links += breedte_slice;
clip_rechts = clip_links + i_clip_rechts;
if (document.all) {
var thisfilter = new Function('return ' + 's' + i)();
thisfilter.filters.alpha.opacity = Math.round(fade_slider);
}
else {
deze.opacity = (fade_slider / 100);
}
fade_slider += fade_slider_stapje;
}
i_clip_rechts = i_clip_rechts + speed_slideshow;
var timer2 = setTimeout(function() {
open_slide_lamellen();
}, 20);
}
else {
fade_slider = 0;
document.getElementById("whole").innerHTML = div_inhoud;
var timer = setTimeout(function() {
slideshow_wissel();
}, pauze_slideshow);
}
}
function slideshow_content() {
div_inhoud = "<table cellpadding=0 cellspacing=0 border=0 width=" + slideshow_breedte + ">";
div_inhoud += "<tr><td width=" + slideshow_breedte + " height=" + slideshow_hoogte + "><a href='" + picture[i_picture].slide_link + "'><img src='" + picture[i_picture].plaatje + "' border=0 width=" + slideshow_breedte + " height=" + slideshow_hoogte + "></a></td></tr><tr><td class='slideshow_text' height=" + slideshow_tekst_hoogte + ">" + picture[i_picture].tekst + "</td></tr>";
if (!document.all) {
div_inhoud += "<tr><td height=" + extra_pixels_ie + "></td></tr>";
}
div_inhoud += "</table>";
}
function slideshow_wissel() {
i_clip_rechts = 0;
clip_links = 0;
clip_rechts = 0;
for (i = 0; i <= slideshow_fragmenten; i++) {
slider_element = 's' + [i];
var deze = document.getElementById(slider_element).style;
deze.clip = "rect(" + clip_top + "px " + clip_rechts + "px " + clip_bodem + "px " + clip_links + "px)";
}
if (i_picture > picture.length - 1) {
i_picture = 0;
}
slideshow_content();
for (i = 0; i <= slideshow_fragmenten; i++) {
slider_element2 = 's' + [i];
var thisinners = document.getElementById(slider_element2);
thisinners.innerHTML = div_inhoud;
}
i_picture++;
open_slide_lamellen();
}
function init_slider() {
breedte_slice = Math.ceil(slideshow_breedte / slideshow_fragmenten);
clip_bodem = (slideshow_hoogte + slideshow_tekst_hoogte);
i_picture++;
slideshow_wissel();
}
function start_kalm() {
div_inhoud = "<table cellpadding=0 cellspacing=0 border=0 width=" + slideshow_breedte + ">";
div_inhoud += "<tr><td width=" + slideshow_breedte + " height=" + slideshow_hoogte + "><a href='" + picture[i_picture].slide_link + "'><img src='" + picture[i_picture].plaatje + "' border=0 width=" + slideshow_breedte + " height=" + slideshow_hoogte + "></a></td></tr><tr><td class='slideshow_text' height=" + slideshow_tekst_hoogte + ">" + picture[i_picture].tekst + "</td></tr>";
if (!document.all) {
div_inhoud += "<tr><td height=" + extra_pixels_ie + "></td></tr>";
}
div_inhoud += "</table>";
var text_slider = "";
text_slider += "<div class='slideshow_box' style='position:relative;width:" + slideshow_breedte + "px;height:" + (slideshow_hoogte + slideshow_tekst_hoogte + extra_pixels_ie) + "px;'>";
text_slider += "<span id='whole' style='position:absolute;top:0px;left:0px;width:" + slideshow_breedte + "px;height:" + (slideshow_hoogte + slideshow_tekst_hoogte + extra_pixels_ie) + "px;'>" + div_inhoud + "</span>";
for (i = 0; i <= slideshow_fragmenten; i++) {
text_slider += "<span id='s" + i + "' style='position:absolute;top:0px;left:0px;width:" + slideshow_breedte + "px;height:" + (slideshow_hoogte + slideshow_tekst_hoogte) + "px;filter:alpha(opacity=100);'>" + div_inhoud + "</span>";
}
text_slider += "</div>";
document.getElementById("image_fade_slider").innerHTML = text_slider;
setTimeout(function() {
init_slider();
}, op_tijd);
}
function start_op_tijd() {
setTimeout(function() {
start_kalm();
}, 600);
}
window.onload = start_op_tijd;
</script>
<style type="text/css">
.slideshow_text{
color:#808080;
background:#ddd;
font-size:smaller;
vertical-align:middle;
text-align:center}
.slideshow_box{
overflow:hidden;
border-style:solid;
border-width:1px;
border-color:#fff;
-moz-box-shadow:5px 5px 8px #aaa;
-webkit-box-shadow: 5px 5px 8px #aaa;
box-shadow: 5px 5px 5px #aaa;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#aaaaaa')}
</style>