KOMPOOS.NL

horizontaal accordeon script

home » javascripts » image-effects » horizontal-accordion-menu.html

voorbeeld horizontaal accordeon script

uitleg accordeon procedure

Als je veel afbeeldingen hebt en weinig ruimte op de pagina, kan dit een handig script zijn. Vervang de body-tag door het exemplaar wat hieronder staat. Plaats de stylesheet in de head-sectie van de pagina, en de rest (de html en het script) in de body-sectie van jouw pagina. In body onload staan vier parameters. De eerste bepaalt de breedte van het zichtbare gedeelte van het plaatje, de tweede en derde zijn snelheids-parameters, en de laatste bepaalt welk plaatje "opengeschoven" staat aan het begin. Het geheel is cross browser en valideert (voor wat het script betreft) op de strenge JSLint-norm.

vervanging voor de standaard body-tag


<body onload="accordeon.build('accordion_id',260,10,10,1)">

stylesheet voor de accordeon procedure


<style type="text/css">
        .accordeon{
                width:500px;
                height:350px;
                list-style:none;
                display:block;
                overflow:hidden}
        .accordeon li{
                float:left;
                display:inline;
                overflow:hidden}
        .accordeon img{
                border:0}
</style>

html code voor de procedure


<ol id="accordion_id" class="accordeon">
        <li><a href="/javascripts/image-effects/horizontal-accordion-menu.html"><img id="img1" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' alt="accordeon 1" /></a></li>
        <li><a href="/javascripts/image-effects/horizontal-accordion-menu.html"><img id="img2" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' alt="accordeon 2" /></a></li>
        <li><a href="/javascripts/image-effects/horizontal-accordion-menu.html"><img id="img3" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' alt="accordeon 3" /></a></li>
        <li><a href="/javascripts/image-effects/horizontal-accordion-menu.html"><img id="img4" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' alt="accordeon 4" /></a></li>
        <li><a href="/javascripts/image-effects/horizontal-accordion-menu.html"><img id="img5" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' alt="accordeon 5" /></a></li>
        <li><a href="/javascripts/image-effects/horizontal-accordion-menu.html"><img id="img6" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' alt="accordeon 6" /></a></li>
        <li><a href="/javascripts/image-effects/horizontal-accordion-menu.html"><img id="img7" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' alt="accordeon 7" /></a></li>
        <li><a href="/javascripts/image-effects/horizontal-accordion-menu.html"><img id="img8" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' alt="accordeon 8" /></a></li>
        <li><a href="/javascripts/image-effects/horizontal-accordion-menu.html"><img id="img9" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' alt="accordeon 9" /></a></li>
        <li><a href="/javascripts/image-effects/horizontal-accordion-menu.html"><img id="img10" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' alt="accordeon 10" /></a></li>
        <li><a href="/javascripts/image-effects/horizontal-accordion-menu.html"><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' alt="afsluiter 1" /></a></li>
        <li><a href="/javascripts/image-effects/horizontal-accordion-menu.html"><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' alt="afsluiter 2" /></a></li>
</ol>

javascript voor de accordeon procedure


<script>
var accordeon = function() {
    var accordeon_tag,
    menu_snelheid,
    afbeelding_breedte,
    timing,
    accordeon_element,
    horizontale_tag,
    tag_lengte,
    breedte_van_element,
    breedte_accordeon_plaatje,
    breedte_van_afbeelding;
    return {
        build: function(accordion_id, breedte_accordeon_plaatje, start_snelheid, show_snelheid, nummer_start_plaatje) {
            menu_snelheid = show_snelheid;
            afbeelding_breedte = breedte_accordeon_plaatje;
            timing = start_snelheid;
            accordeon_element = document.getElementById(accordion_id);
            horizontale_tag = accordeon_element.getElementsByTagName('li');
            tag_lengte = horizontale_tag.length;
            breedte_van_element = accordeon_element.offsetWidth;
            breedte_accordeon_plaatje = breedte_van_element / tag_lengte;
            breedte_van_afbeelding = Math.floor((breedte_van_element - afbeelding_breedte) / (tag_lengte - 1));
            var i = 0;
            for (i = 0; i < tag_lengte; i++) {
                accordeon_tag = horizontale_tag[i];
                accordeon_tag.style.width = breedte_accordeon_plaatje + 'px';
                this.timer(accordeon_tag);
            }
            if (nummer_start_plaatje !== null) {
                accordeon_element.timer = setInterval(function() {
                    accordeon.slide(horizontale_tag[nummer_start_plaatje - 1]);
                },
                timing);
            }
        },
        timer: function(accordeon_tag) {
            accordeon_tag.onmouseover = function() {
                clearInterval(accordeon_element.timer);
                accordeon_element.timer = setInterval(function() {
                    accordeon.slide(accordeon_tag);
                },
                timing);
            };
        },
        slide: function(accordeon_tag) {
            var calculeerbreedte = parseInt(accordeon_tag.style.width, 10);
            if (calculeerbreedte < afbeelding_breedte) {
                var berekenbreedte = 0;
                var i = 0;
                for (i = 0; i < tag_lengte; i++) {
                    if (horizontale_tag[i] != accordeon_tag) {
                        var tagger,
                        tagbreed;
                        var rekeneensuit = 0;
                        tagger = horizontale_tag[i];
                        tagbreed = parseInt(tagger.style.width, 10);
                        if (tagbreed > breedte_van_afbeelding) {
                            rekeneensuit = Math.floor((tagbreed - breedte_van_afbeelding) / menu_snelheid);
                            rekeneensuit = (rekeneensuit > 0) ? rekeneensuit: 1;
                            tagger.style.width = (tagbreed - rekeneensuit) + 'px';
                        }
                        berekenbreedte = berekenbreedte + (tagbreed - rekeneensuit);
                    }
                }
                accordeon_tag.style.width = (breedte_van_element - berekenbreedte) + 'px';
            } else {
                clearInterval(accordeon_element.timer);
            }
        }
    };
} ();
function laad_accordion_plaatjes() {
    document.getElementById("img1").src = "http://static.dns5.nl/a.jpg";
    document.getElementById("img2").src = "http://static.dns5.nl/b.jpg";
    document.getElementById("img3").src = "http://static.dns5.nl/c.jpg";
    document.getElementById("img4").src = "http://static.dns5.nl/d.jpg";
    document.getElementById("img5").src = "http://static.dns5.nl/e.jpg";
    document.getElementById("img6").src = "http://static.dns5.nl/f.jpg";
    document.getElementById("img7").src = "http://static.dns5.nl/g.jpg";
    document.getElementById("img8").src = "http://static.dns5.nl/h.jpg";
    document.getElementById("img9").src = "http://static.dns5.nl/i.jpg";
    document.getElementById("img10").src = "http://static.dns5.nl/j.jpg";
}
setTimeout(function() {
    laad_accordion_plaatjes();
},
300);
</script>