JQuery and Prototype (lightbox) conflict

I am trying to run an outlook style menu alongside lightbox.

The menu uses JQuery for the slide effect etc. and lightbox is used for images on the same page.
I've had a look on the web and I seem to get a lot of the same on the issue.

So this is what I have
    <script src="menu/jquery-1.2.6.pack.js" type="text/javascript" charset="utf-8"></script>
    <script language="javascript">
    $jQuery = jQuery.noConflict();
    </script>
    <script src="menu/menu.js" type="text/javascript"></script>    
    <link rel="stylesheet" type="text/css" href="menu/style.css" />

menu.js contains javascript functions to open and close menu items using $jQuery. etc.
The menu works fine like this. Now when adding the following:

<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<script src="lightbox/js/prototype.js" type="text/javascript"></script>
<script src="lightbox/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="lightbox/js/lightbox.js" type="text/javascript"></script>

This is where the problems start.

Error: element.style is undefined
Source File: lightbox/js/lightbox.js
Line: 45
Line 45 : element.style.width = w +"px";

Is there something else I need to be doing to run jQuery en Lightbox to run alongside each other?
Thanks
onlineinnovationsAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
sh0eConnect With a Mentor Commented:
It appears the older version of Prototype you are using is causing conflicts.

There is also a newer version of lightbox2, might as well update everything
http://www.lokeshdhakar.com/projects/lightbox2/
0
 
ziffgoneCommented:
Maybe try using the jQuery only version and ditch the Prototype/Scriptlicious version:

http://leandrovieira.com/projects/jquery/lightbox/
0
 
sh0eCommented:
You are calling jQuery.noConflict() at the wrong time.
Replace $jQuery = jQuery.noConflict(); with $jQuery = jQuery;
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
onlineinnovationsAuthor Commented:
Ok I've replaced $jQuery = jQuery.noConflict(); with $jQuery = jQuery;

<script src="menu/jquery-1.2.6.pack.js" type="text/javascript" charset="utf-8"></script>
<script language="javascript">
$jQuery = jQuery;
</script>
<script src="menu/menu.js" type="text/javascript"></script>    
<link rel="stylesheet" type="text/css" href="menu/style.css" />

<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<script src="lightbox/js/prototype.js" type="text/javascript"></script>
<script src="lightbox/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="lightbox/js/lightbox.js" type="text/javascript"></script>


I no longer get the error as before but clicking on a thumbnail does not open lightbox it just opens the larger version in the browser:
<a href="big/IMG123.jpg" rel="lightbox[gallery]" title=""><img src="thumbs/IMG123.jpg" alt=""  border="0">

0
 
onlineinnovationsAuthor Commented:
Please ignore my comment above. I was looking at another test attemp.

I did do the replace as per your suggestion. Lightbox now workd but the menu I made now does not work. Using firefox error console I get :
Error: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMViewCSS.getComputedStyle]"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: jquery-1.2.6.pack.js :: anonymous :: line 11"  data: no]
Source File: jquery-1.2.6.pack.js
Line: 11

IE still reports font.style is null or not an object on line 25.

Thanks again
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery lightBox plugin</title>
<script src="jquery-1.2.6.pack.js" type="text/javascript" charset="utf-8"></script>
<script language="javascript">
    //$jQuery = jQuery.noConflict();
	$jQuery = jQuery;
    </script>
<script src="menu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><ul id="menu1" class="menu">
        <li><a class="m1" href="#">Menu 1</a>
          <ul>
            <li><a href="#">Sub Menu 1.1</a></li>
            <li><a href="#">Sub Menu 1.2</a></li>
          </ul>
        </li>
        <li><a href="content.asp?pageID=">Menu 2</a></li>
        <li><a class="m3" href="#">Menu 3</a>
          <ul>
            <li><a class="m3_m1" href="#">Sub Menu 3.1</a>
              <ul>
                <li><a href="#">Sub Menu 3.1.1</a></li>
                <li><a href="#">Sub Menu 3.1.2</a></li>
                <li><a href="#">Sub Menu 3.1.3</a></li>
              </ul>
            </li>
            <li><a class="m3_m2" href="#">Sub Menu 3.2</a>
              <ul>
                <li><a href="#">Sub Menu 3.2.1</a></li>
                <li><a href="#">Sub Menu 3.2.2</a></li>
              </ul>
            </li>
            <li><a href="#">Sub Menu 3.3</a></li>
          </ul>
        </li>
      </ul></td>
    <td><a href="big/_MG_4324 copy.jpg" rel="lightbox[gallery]" title=""><img src="thumbs/_MG_4324 copy.jpg" alt=""  border="0"></a> <a href="big/_MG_4326 copy.jpg" rel="lightbox[gallery]" title=""><img src="thumbs/_MG_4326 copy.jpg" alt=""  border="0"></a> <a href="big/_MG_4328 copy.jpg" rel="lightbox[gallery]" title=""><img src="thumbs/_MG_4328 copy.jpg" alt=""  border="0"></a> 
  </tr>
</table>
</html>

Open in new window

0
 
sh0eCommented:
If possible, can you provide the code for menu.js?
Are you sure that menu.js only makes use of $jQuery?
0
 
sh0eCommented:
Put $jQuery = jQuery; into menu.js
0
 
onlineinnovationsAuthor Commented:
Putting it into menu.js makes no difference.
Here is menu.js
$jQuery = jQuery;
 
function setCookie(c_name,value,expiredays)
{	
	var exdate=new Date();
	exdate.setDate(exdate.getDate()+expiredays);
	document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
 
function getCookie(c_name)
{
	if (document.cookie.length>0)
	  {
	  c_start=document.cookie.indexOf(c_name + "=");
	  if (c_start!=-1)
		{ 
		c_start=c_start + c_name.length+1; 
		c_end=document.cookie.indexOf(";",c_start);
		if (c_end==-1) c_end=document.cookie.length;
		return unescape(document.cookie.substring(c_start,c_end));
		} 
	  }
	return "";
}
 
function initMenus() {
	 $jQuery('ul.menu ul').hide();
	 $jQuery.each( $jQuery('ul.menu'), function(){
 
		var cookie = getCookie('currentmenu');
		
		if(cookie != null && String(cookie).length < 1) {
			 $jQuery('#' + this.id + '.expandfirst ul:first').show();
		}
		else {		
			var currcookies = getCookie('currentmenu').split('_');
            for (var i = 0; i < currcookies.length - 1; i++) 
			{
				 $jQuery('#' + this.id + ' .' + currcookies[i]).next().show();	
            }
			 $jQuery('#' + this.id + ' .' + getCookie('currentmenu')).next().show();
			
		}
	});
	 $jQuery('ul.menu li a').click(
		function() {
			var checkElement =  $jQuery(this).next();
			var parent = this.parentNode.parentNode.id;
			if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
				if( $jQuery('#' + parent).hasClass('collapsible')) {
					 $jQuery('#' + parent + ' ul:visible').slideUp('normal');
				}
				return false;
			}
			if((checkElement.is('ul')) && (!checkElement.is(':visible'))) 
			{
				 $jQuery('#' + parent + ' ul:visible').slideUp('normal');
				if (String(this.className).length > 0) 
				{
					setCookie('currentmenu',this.className,1);
				}
				checkElement.slideDown('normal');
				return false;
			}
		}
	);
}
 $jQuery(document).ready(function() {initMenus();});

Open in new window

0
 
sh0eCommented:
I used your files and was unable to reproduce the problem.  Works here.

<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
0
 
sh0eCommented:
<script language="javascript">
    //$jQuery = jQuery.noConflict();
        $jQuery = jQuery;
    </script>
Also make sure you removed this section after adding it to menu.js.

Is there a demo site I can see?
0
 
onlineinnovationsAuthor Commented:
I did remove that yes.
See the link
http://demo.onlineinnovations.com/test
As you'll see lightbox works but the outlook style menu does not. (Accordian style)
Level 1 : black
Level 2 : grey
Level 3 : pink
0
 
onlineinnovationsAuthor Commented:
Sorted thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.