jparallax upgrade from old to 1.0 version

Question

I am having trouble updating jparallax from very old version to the 1.0 version. I inherited a half-completed site using jparallax plugin. The parallax effect was complete - the problem is that this is a very old version, using jQuery 1.2.6 which causes problems with "colorbox" which is used to display images (like lightbox) and the ajax I am using to display events.

Upgrading to newest jquery fixes both my ajax and colorbox, but breaks the parallax. Has anyone ever updated from lower jparallax to 1.0?

I have made the following changes per the author's jParallax github changelog

1. Namespace changed from 'jParallax' to 'parallax'
2. 'xtravel' and 'ytravel' options are now passed in as 'xparallax' and 'yparallax'
3. Changed from jQuery 1.2.6 to 1.7.1
4. Replaced old jParallax with 1.0 version

Additional Notes that simplify my problem:

1. The default mouseport is the body, which is what I want.
2. I do not need the 'freeze/unfreeze' or 'linkResponse' functionality for this site

Does any one see issues with what I have done or have suggestions? I would really appreciate help as I dont understand where my mistake lies and am rapidly approaching my deadline. Any direction would be greatly appreciated. Thanks for any input.

Answer 1

I guess you also are using jparallax under drupal. I have the same problem you have.

triggerExposeEdges:true seems to be not functioning in new version but no mention of it in the changelog of the author.

Also, what I was trying is I have three different divs to have parallax effect. With older version the layers used to move separately but now they move merged together and gets cropped to the right. Can't figure a way to fix this.

Edit: I have solved the problem, by defining jparallux for the three layers separately. And of course I am using the latest jParallux with Drupal's default jQuery. Only thing I had to make change was for the Javascript:

jQuery(document).ready(function(){ 
  jQuery(".ceu").parallax({  // First layer div of cloud image
    xparallax: "30px",
    xorigin: 0.0,
    yparallax: false,
  });
jQuery(".runfundob").parallax({ // Second layer div of a Sunbeam
    xparallax: "40px",
    xorigin: 0.6,
    yparallax: false,
  }); 
jQuery(".bottom").parallax({ // Third layer div of a very wide hotel with a vintage car in front.
    xparallax: "20px",
    xorigin: 0.6,
    yparallax: false,
  }); 
});

And I think, this way you'd be able to solve your problem as well.