jQuery - Schaalbare achtergrond


Met het onderstaande script stel je een achtergrondafbeelding in op een pagina of voor een gehele website die zich automatisch aanpast aan de grootte van het venster, ook als een bezoeker het venster gaat schalen dan zal de afbeelding meeschalen. Het instellen van een schaalbare achtergrond kan ook met CSS3 maar dit werkt niet in alle browsers, denk bijvoorbeeld aan Internet Explorer 7 en 8. Meer over instellen met CSS3 lees je hier.

bgStretcher

bgStretcher is een jQuery plugin afkomstig van Ajaxblender.com en het bijbehorende bestand (bgStretcher.js) kan hier (ZIP) gedownload worden. Na het downloaden pak het bestand uit en plaats deze op de juiste locatie en roep het bestand daarna aan in de head.

<script src="bgstretcher.js"></script>


CSS

Nadat het bovenstaande bestand is geplaatst is er ook aanvullende opmaak die geplaatst moet worden, plaats hiervoor de onderstaande regels in je eigen CSS bestand.

.bgstretcher,
.bgstretcher ul,
.bgstretcher ul li {
        position:absolute;
        top:0px;
        left:0px;
}

.bgstretcher ul,
.bgstretcher ul li {
        margin:0px;
        padding:0px;
        list-style:none;
}

.bgstretcher {
        position:fixed;
        _position:absolute;
        top:0px;
        left:0px;
        width:100%;
        margin:0px;
        padding:0px;
        background:#000;
        overflow:hidden;
        z-index:1;
}


Instellingen

Nadat je het script zelf hebt geplaatst evenals de CSS dan is er nog de onderstaande code met aanvullende instellingen, hierin wordt daadwerkelijk de afbeelding aangeroepen die op de achtergrond wordt geplaatst. Plaats de code na de regel waarin het bestand wordt aangeroepen. In de code wordt tevens de breedte en de hoogte aangegeven. Met resizeProportionally zorg je dat afbeeldingen proportioneel worden geschaald en met resizeAnimate bepaal je of het schalen geanimeerd moet worden (true) of niet (false).

$(document).ready(function(){
        $('body').bgStretcher({
                images: ['images/afb-1.jpg'],
                imageWidth: 1024,
                imageHeight: 768,
                preloadImg: true,
                resizeProportionally: true,
                resizeAnimate: false
        });
});


Slideshow

Het script bevat tevens ondersteuning voor meerdere afbeeldingen zodat je eventueel in plaats van een enkele afbeelding een slideshow op de achtergrond kunt plaatsen, dus meerdere afbeeldingen. De code hieronder met instellingen is iets uitgebreider om een slideshow in te stelen, in dat geval worden meerdere afbeeldingen aangeroepen en staat 'slideshow' op true. Door 'slideshow' op false te zetten wordt de slideshow weer uitgezet.

Met sequenceMode bepaal je de volgorde waarop de afbeeldingen worden getoond, standaard is dit ingesteld op normal en wordt de opgegeven volgorde in de code aangehouden maar hier kan ook 'back' of 'random' worden gekozen. Met transitionEffect bepaal je de overgang tussen de afbeeldingen standaard ingesteld op 'fade'. Andere keuzes zijn 'simpleSlide' en 'superSlide'. Met 'none' schakel je het overgangseffect uit.

Als je kiest voor het sliden van afbeeldingen dan is er nog slideDirection waarmee je kunt bepalen naar welke kant de afbeeldingen moeten sliden. Waardes zijn: N, S, W en E. Als er gekozen is voor 'superSlide' dan kun je eventueel ook NW, NE, SW en SE gebruiken. slideShowSpeed is voor de snelheid van het slider, waardes zijn 'fast', 'normal' en 'slow'.

$(document).ready(function(){
        $('body').bgStretcher({
                images: ['images/afb-1.jpg', 'images/afb-2.jpg', 'images/afb-3.jpg'],
                imageWidth: 1024,
                imageHeight: 768,
                preloadImg: true,
                resizeProportionally: true,
                resizeAnimate: false,
                slideShow: true,
                slideDirection: 'N',
                slideShowSpeed: 1000,
                transitionEffect: 'fade',
                sequenceMode: 'normal',
                buttonPrev: '#prev',
                buttonNext: '#next',
                pagination: '#nav'
        });
});


Navigatie

Aanvullend op de slideshow kan er navigatie bij geplaatst worden om door de verschillende ingestelde afbeeldingen te bladeren. Plaats hiervoor in de HTML een leeg element, bijvoorbeeld een div met het ID 'nav'. Het script zal dan hier de navigatie (nummers) in plaatsen. Door een div met een ID 'prev' te plaatsen en een div met een ID 'next' krijg je een knop Vorige en Volgende. Met CSS kun je dan zelf de opmaak bepalen.

<div id="nav"></div>
<div id="prev">Vorige</div>
<div id="next">Volgende</div>