[JS/jQuery] Afbeeldingen voorbij laten komen in een panorama

[TheNephilim]

Voor een website van een non-profit organisatie (paardrijden voor gehandicapten) is er een nieuwe website in ontwikkeling. Er is een panorama foto gemaakt van de rijbak en die staat op de frontpage. Daar kun je met pijltjes links en rechts kijken. De foto is 4747 pixels breed en zit in een div met de background op repeat-x. Dat werkt allemaal prima.

Echter wil ik graag een afbeelding (van bijv. een paard) door het beeld laten scrollen die bij click 1 midden in beeld komt te staan en bij click 2 weer aan de goede kant het beeld uit gaat. Dus naar rechts in de panorama, betekend dat de afbeelding naar links gaat en ook naar links verdwijnt.

Na wat klooien bekroop met het idee dat zoiets makkelijker moet kunnen...

JavaScript:

var clicks = 0;

var animation_time = $(window).width();

$('#panorama .controls .left').click(function () {

    /**
     * Panorama
     */
    var bgPos = $('#panorama .canvas').css('background-position').split(' ');

    var newPos = parseInt(bgPos[0].replace('px', ''))+678;

    $('#panorama .canvas').stop(true, true).animate({
        'background-position': newPos+'px 0px'
    }, animation_time);

    console.log(clicks);

    if (clicks == 0) {
        $('#panorama .canvas .berber').css('left', -480);
        $('#panorama .canvas .berber').animate({'left': (parseInt($(window).width())/2), 'margin-left': '-240px'}, animation_time);
        clicks=7;
    } else if (clicks == 1) {
        clicks--;
    } else if (clicks == 2) {
        clicks--;
    } else if (clicks == 3) {
        clicks--;
    } else if (clicks == 4) {
        clicks--;
    } else if (clicks == 5) {
        clicks--;
    } else if (clicks == 6) {
        clicks--;
    } else if (clicks == 7) {
        $('#panorama .canvas .berber').animate({'left': parseInt($(window).width())+480}, animation_time);
        clicks--;
    }
});

$('#panorama .controls .right').click(function () {

    /**
     * Panorama
     */                
    var bgPos = $('#panorama .canvas').css('background-position').split(' ');
    var newPos = parseInt(bgPos[0].replace('px', ''))-678;
    $('#panorama .canvas').stop(true, true).animate({
        'background-position': newPos+'px 0px'
    }, animation_time);

    console.log(clicks);

    if (clicks == 0) {
        $('#panorama .canvas .berber').css('left', $(window).width());
        $('#panorama .canvas .berber').animate({'left': (parseInt($(window).width())/2), 'margin-left': '-240px'}, animation_time);
        clicks++;
    } else if (clicks == 1) {
        $('#panorama .canvas .berber').animate({'left': -480}, animation_time);
        clicks++;
    } else if (clicks == 2) {
        clicks++;
    } else if (clicks == 3) {
        clicks++;
    } else if (clicks == 4) {
        clicks++;
    } else if (clicks == 5) {
        clicks++;
    } else if (clicks == 6) {
        clicks++;
    } else if (clicks == 7) {
        clicks=0;
    }
});

Heeft iemand heldere ideeën over hoe ik dit beter kan oplossen? Het probleem zit hem vooral in het terug gaan, dus als een afbeelding in het midden staat (via naar rechts gaan), wat voer ik dan uit als ik iemand op het knopje naar links gaat.

Ik hoef geen kant en klare code van jullie, maar een denkwijze, een manier waarop het makkelijker is op te lossen

[_Erikje_]

Je kunt sowieso die else ifs vervangen door een else if (clicks > 0 && clicks < 7)...

De code is zo niet erg DRY

[TheNephilim]

_Erikje_ schreef op zaterdag 23 juni 2012 @ 19:57:
Je kunt sowieso die else ifs vervangen door een else if (clicks > 0 && clicks < 7)...

De code is zo niet erg DRY

Nee weet ik, maar ben zoveel aan het proberen geweest. Op het moment dat ik iets werkend heb, ga ik wel eens opruimen XD