Lightbox JS v2.03 conflict with Animated Collapsible DIV v2.4

[micheleK]

1) Script Title:
Lightbox JS v2.03
Animated Collapsible DIV v2.4
Also Accordion Script (less crucial)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm
http://www.dynamicdrive.com/dynamicindex17/haccordion.htm

3) Describe problem:
DISCLAIMER: I'm not a programmer at all, and am only smart enough use DD's scripts.

PROBLEM: I'm using the animated collapse script on a site I'm building out. It works great EXCEPT in two cases. The first case is on the homepage where I'm using the Horizontal Accordion script which is now less crucial since we're redesigning the homepage and nixing the Horizontal Accordion script. Did a forum search and didn't find much to help me out.

BUT now I've run into an issue that I need fix. I'm using the Animated Collapsible script with the Lightbox script and the light box script WON'T work with the Animated Collapsible code on the page. Once I remove code the Lightbox works. Once it's back in it doesn't.

Can you help me figure out what the problem is here and how I can go about fixing it?

More Pressing problem:
http://test.tryonfarm.com/sites/designs.html

Less important problem (with horiz. accordion):
http://test.tryonfarm.com/

Thanks all!
Michele

[jscheuer1]

It's difficult at best combining Lightbox's Prototype/Scriptaculous script libraries with Animated Collapsible's jQuery script libraries. Even when successful, it's a duplication of sorts resulting in far more code than is neccesary. They both do the same sorts of things, just differently.

I'd recommend using jQuery based SlimBox 2 instead of Lightbox. It's a drop in replacement:

http://www.digitalia.be/software/slimbox2

Install it's script and styles in the head of the page instead of Lightbox. You may leave the rel="lightbox[garden]" and any other Lightbox type links 'as is'. The script will pick up on them.

With SlimBox/Collapsible you only need one copy of jQuery for the page. The external tag to jQuery should come before the ones for both SlimBox and Animated Collapsible.

However, I'd suggest updating jQuery from:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

to:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

[micheleK]

John!

Only just had a chance to look into your recommendations today.

Thanks so much for the tip. I've implemented all that you suggested and it works, works, WORKS! Super excited and very appreciative!!

Have a great day!
MicheleK