Fade/Change Hintergrund auf einer einzigen Webseite

Question

Ich habe eine verdammt Zeit herauszufinden, wie dies zu erreichen - und ich bin überrascht, dass es nicht häufiger im Web auftritt, obwohl ich abschweife.

Ich baue eine kleine Website, die ich versuche, auf einer einzigen Seite zu halten - am Ende wird die Website auf einem USB leben, so sollten die Dinge so eigenständig (Datei weise) wie möglich sein. Zur Zeit habe ich ein Navigationsmenü (dh Seite 1, Seite 2, Seite 3) vertikal, und wenn Sie einen Link aus dem Menü auswählen, wird neuer Inhalt für diesen Abschnitt angezeigt. Ich habe diesen Teil - mehr oder weniger - dank modifiziertem Coda-Slider-Skript (siehe hier: http://codysilfies.com/orn/).

Der Teil, den ich nicht herausfinden kann, ist, dass ich zusätzlich zum Ändern des Inhalts beim Klicken auf einen Menüeintrag auch den Backgroun ändern möchte. Menu_Item_1 zeigt also BGImage1.jpg, Menu_Item_2 - BGImage2.jpg und so weiter. Etwas so ziemlich so: http://brewfestgb.com/#!/merriment - obwohl es eine Reihe von zusätzlichen Funktionen auf dieser Seite gibt ... dass ich nicht wirklich herausfinden kann, wie man heraushebt. Es muss einen einfacheren Weg geben, es zu tun.

Es gibt eine Tonne von 'klicken Sie auf einen einzigen Link, um ein Bild zu ändern' Tutorials herum - aber nichts mit mehreren Links. Ich habe auch versucht, den gleichen Slider-Code für den Hintergrund zu verwenden - aber ich kann das Bild nicht auf die Größe des Browserfensters skalieren UND den Schieberegler zum Arbeiten bringen (er benötigt offensichtlich eine festgelegte Breite - was für das Inhaltsbit praktikabel ist, aber nicht, wenn ich möchte, dass der Hintergrund mit dem Browser skaliert wird).

Irgendwelche Ratschläge ... oder führt? Scheint mir, jemand sollte etwas wissen. Danke im Voraus!

Answer 1

Sie können den Hintergrund-Bild ändern, wenn die Click-Handler ausgelöst wird:

$('a.link').click(function(){ 
    // Find the image value 
    var background = 'BGImage' + $(this).data('bg') + '.jpg'; 

    // Change CSS background-image 
    $('body').css('background-image',background); 
}); 

Ihre Links wäre in etwa so aussehen haben:

<a href="path/to/link1" class="link" data-bg="1">Link 1</a> 
<a href="path/to/link2" class="link" data-bg="2">Link 2</a> 
<a href="path/to/link3" class="link" data-bg="3">Link 3</a>