Combining Multiple jQuery Scripts

I'm trying to create a simple portfolio site for a friend of mine based around his drawings and paintings. The layout is relatively simple but is proving to be very difficult to implement. I have three jquery scripts on the page that each perform a specific function.

1) bgStretcher - Stretches a series of background images to fill a user's window.

2) collapse - Simple collapsable menu system

3) galleryview - Basic no frills slideshow gallery

Currently, bgstretcher and collapse are on one page called nav.shtml (http://yungchoi.com/nav.shtml) and the gallery on gallery.shtml(http://yungchoi.com/gallery.shtml). Seperatley they work fine, but when I call the nav page via SSI (test.shtml), The code seems to run into problems and becomes disabled.

The 开发者_如何学编程solutions I've found all lead to utilizing the noConflict function in jquery (http://stackoverflow.com/questions/2656360/use-multiple-jquery-and-jquery-ui-libraries), (http://hubpages.com/hub/How-to-use-jQuery_noConflict), but everytime I've tried inserting it and changing my code, everything gets messed up again. I've also organized each script's files into separate folders and directories but that hasn't helped either.

My experience is in graphic and web design, so my coding skills are not the greatest. I do know the basics, but rewriting jquery code was not something I ever learned so I might not be understanding how to correctly fix this problem. If someone could clearly and easily explain what I would need to do to make these all work together, I'd appreciate it greatly.

Thanks!

You still have multiple versions of jQuery being loaded in your page.

Remove:

<script type="text/javascript" src="support/bgstrecher/jquery-1.3.2.min.js"></script>

and

<script src="support/collapse/jquery-1.2.1.min.js" type="text/javascript"></script>

you should also remove:

<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>

& - (because you only need either the packed or unpacked version, not both)

<script type="text/javascript" src="galleryview/jquery.galleryview-2.1.1.js"></script>

See if that helps.

You only need noConflict if you're going to also use other libraries that are similar to jQuery like MooTools, Dojo or Prototype. It's unlikely you will need to & if you do, you will need to recode to use the jQuery function instead of the $.

The issue it appears you're having is that all these jQuery includes are overwriting the previous version of jQuery which the plugin attached to and thus the function no longer exists when you call it.

Why are you loading Jquery twice ?

First the 1.4.2 min file and then the full blown straight after ?

You still have multiple calls to jQuery (even if files are not in same directories). In the same way, you call "galleryview/jquery.galleryview-2.1.1.js" twice (the second file is just packed).

By the way, my error console tell me that:

"Error: jQuery.timer is undefined Source File: http://yungchoi.com/galleryview/jquery.timers-1.2.js Line: 135"

Are you sure you need this timer plugin? For now, it seems you have too many script included. Try to remove all unneeded files (you should keep only one version of jquery. But if some plugins you used is not compatible with, you'll have more and more compatibility problems).