Question

Using the JQuery ScrollTo plugin, I’ve created the following vertical site LINK. The basic page architecture is as follows:

<div id="fixed-menu">
     <!-- MAIN MENU FIXED TO TOP OF WINDOW -->
</div>

<div id="wrapper">
     <div id="mask">
          <div id="page1">
             <!-- PAGE 1 CONTENT -->
          </div>
          <div id="page2">
             <!-- PAGE 2 CONTENT -->
          </div>
          <div id="page3">
             <!-- PAGE 3 CONTENT -->
          </div>
          <div id="page4">
             <!-- PAGE 4 CONTENT -->
          </div>
     </div>
</div>

My issue is when trying to have a fullscreen background image for each separate ‘page’. I have experience using the JQuery plugin Fullscreenr to create a background image which properly adapts to different screen resolutions, etc. I am unfamiliar, though, with how to set a different one for each ‘page’ of the site. I’ve been thinking that an alternative may be to trigger a change of background image depending on which menu item is selected. Does anyone have any experience or advice in the matter? I have tried stacking the images, but I want to avoid seeing partial background images at any point on the site.

Answer 1

Having had a hard time getting JQuery Waypoints to work successfully, I ended up simply changing the background image after a mouse-click of the relevant heading. Because the site is only auto-scrolling (no mouse-wheel functionality), this will work fine.

The JQuery code used is as follows:

<script type="text/javascript">
$(function() {
    $('a.panel-about').click(function(){
    $("#bgimg").attr('src',"<?php bloginfo('stylesheet_directory'); ?>/images/bg2.jpg");
    return false;
    });
});
</script>

So when the link with class ‘panel-about’ is clicked, the background image changes to bg2.jpg from the existing bg1.jpg specified in the html.