Jquery Multi Level CSS Menu and Lightbox conflict

**vadio** · 04-29-2010, 07:40 PM

I am currently using the JQuery Multi Level CSS Menu #2 and Lightbox codes (downloaded from this site) but it looks like there are some conflicts with the scripts. The Menu will not work if I included the scripts from Lightbox. Here are the scripts I am using:

JQuery Slidemenu:
jquery.min.js
jqueryslidemenu.js

Lightbox:
prototype.js
scriptaculous.js
lightbox.js
effects.js

When I try not to include either of this scripts - prototype.js or scriptaculous.js, then the Jquery Menu will work. But of coarse Lightbox will fail.

Thank you very much in advance for all your help.

**jscheuer1** · 04-30-2010, 05:05 AM

Please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script(s) in question in your post. See this thread for the proper posting format when asking a question.

That said, you should be able to upgrade to Lightbox 2.04 or 2.04a. Place the main script for the menu before the Lightbox scripts. This assumes that the jQuery code for the menu is in noConflict mode. If not, we can probably make it be. Once I have a link to the menu script's demo page I can tell that.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**hicham4** · 07-19-2010, 09:32 AM

hi jscheuer1,

I have the same problem, and I have placed the script of menu before lightbox in the masterpage but I have still problem, have you some idea how it come? Thanks

**jscheuer1** · 07-19-2010, 01:45 PM

Warning: Please include a link to the DD script(s) in question in your post. See this thread for the proper posting format when asking a question.

Please post a link to a page on your site that contains the problematic code so we can check it out.

**hicham4** · 07-20-2010, 11:11 AM

Originally Posted by jscheuer1

Warning: Please include a link to the DD script(s) in question in your post. See this thread for the proper posting format when asking a question.

Please post a link to a page on your site that contains the problematic code so we can check it out.

Hi John,

I'm actualy developing on my local environment, that's means that i have no website live on this moment, but i have the same issue: conflict between slidemenu:

jquery.min.js
jqueryslidemenu.js

And lightbox:

prototype.js
scriptaculous.js
lightbox.js
effects.js

the scripts of menu is placed before lightbox scripts on my masterpage

Code:

 <!-- Begin menu -->
     <script type="text/javascript" src="jqueryslidemenu.js"></script>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
     <link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />

    <%-- End menu--%>
    
    
    <%-- Begin Lightbox--%>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="Stylesheet" type="text/css" href="css/lightbox.css" media="screen" />
   <%-- End Lightbox--%>
<script type="text/javascript">
$(function() {
	// Use this example, or...
	$('a[@rel*=lightBox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// This, or...
	$('#gallery a').lightBox(); // Select all links in object with gallery ID
	// This, or...
	$('a.lightbox').lightBox(); // Select all links with lightbox class
	// This, or...
	$('a').lightBox(); // Select all links in the page
	// ... The possibility are many. Use your creative or choose one in the examples above
});

<style type="text/css">
	/* jQuery lightBox plugin - Gallery style */
	#gallery {
		background-color: #444;
		padding: 10px;
		width: 520px;
	}
	#gallery ul { list-style: none; }
	#gallery ul li { display: inline; }
	#gallery ul img {
		border: 5px solid #3e3e3e;
		border-width: 5px 5px 20px;
	}
	#gallery ul a:hover img {
		border: 5px solid #fff;
		border-width: 5px 5px 20px;
		color: #fff;
	}
	#gallery ul a:hover { color: #fff; }
	</style>

at run time, i get a yellow text from jqueryslidemenu.js

Code:

jQuery(document).ready(function($){
		var $mainmenu=$("#"+menuid+">ul")
		var $headers=$mainmenu.find("ul").parent()
		$headers.each(function(i){
			var $curobj=$(this)
			var $subul=$(this).find('ul:eq(0)')
			this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
			this.istopheader=$curobj.parents("ul").length==1? true : false
			$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
			$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
				'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
				+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
				+ '" style="border:0;" />'
			)
			$curobj.hover(
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					this._offsets={left:$(this).offset().left, top:$(this).offset().top}
					var menuleft=this.istopheader? 0 : this._dimensions.w
					menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
					if ($targetul.queue().length<=1) //if 1 or less queued animations
						$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
				},
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					$targetul.slideUp(jqueryslidemenu.animateduration.out)
				}
			) //end hover
			$curobj.click(function(){
				$(this).children("ul:eq(0)").hide()
			})
		}) //end $headers.each()
		$mainmenu.find("ul").css({display:'none', visibility:'visible'})
	}) //end document.ready

with the error : "Microsoft JScript runtime error: Object expected"
when i click op the menuitem wich with i surf to the page whith pictures i get the error:
Microsoft JScript runtime error: Object doesn't support this property or method.
that's happend when the function : $('a[@rel*=lightBox]').lightBox(); is called.

**jscheuer1** · 07-20-2010, 12:44 PM

Warning: Please include a link to the DD script(s) in question in your post. See this thread for the proper posting format when asking a question.

That said, first of all the first two scripts are in reverse order. This:

Code:

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

should be:

Code:

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

Also, this script block has no closing tag:

Code:

<script type="text/javascript">
$(function() {
	// Use this example, or...
	$('a[@rel*=lightBox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// This, or...
	$('#gallery a').lightBox(); // Select all links in object with gallery ID
	// This, or...
	$('a.lightbox').lightBox(); // Select all links with lightbox class
	// This, or...
	$('a').lightBox(); // Select all links in the page
	// ... The possibility are many. Use your creative or choose one in the examples above
});

And appears to be for a jQuery version of Lightbox that I guess you tried. That would actually be the better solution. But if you aren't using it, get rid of the above code.

From what you've posted, I cannot tell if the menu script is in noConflict mode, or even if the script can function in noConflict mode.

Please post a link to the menu script's demo page here on Dynamic Drive.

You can try throwing the menu into no Conflict mode by adding the highlighted here:

Code:

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
     <script type="text/javascript" src="jqueryslidemenu.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>     
     <link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />

If you want more help, put up a live demo of the problem and post a link to it here.

**hicham4** · 07-22-2010, 09:29 AM

Originally Posted by jscheuer1

Warning: Please include a link to the DD script(s) in question in your post. See this thread for the proper posting format when asking a question.

That said, first of all the first two scripts are in reverse order. This:

Code:

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

should be:

Code:

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

Also, this script block has no closing tag:

Code:

<script type="text/javascript">
$(function() {
	// Use this example, or...
	$('a[@rel*=lightBox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// This, or...
	$('#gallery a').lightBox(); // Select all links in object with gallery ID
	// This, or...
	$('a.lightbox').lightBox(); // Select all links with lightbox class
	// This, or...
	$('a').lightBox(); // Select all links in the page
	// ... The possibility are many. Use your creative or choose one in the examples above
});

And appears to be for a jQuery version of Lightbox that I guess you tried. That would actually be the better solution. But if you aren't using it, get rid of the above code.

From what you've posted, I cannot tell if the menu script is in noConflict mode, or even if the script can function in noConflict mode.

Please post a link to the menu script's demo page here on Dynamic Drive.

You can try throwing the menu into no Conflict mode by adding the highlighted here:

Code:

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
     <script type="text/javascript" src="jqueryslidemenu.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>     
     <link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />

If you want more help, put up a live demo of the problem and post a link to it here.

Hi John,

Thanks for your help, I'd used the script jQuery.noConflict(), and then I get no error any more. I have moved the page where I the repeater of pictures to the same level of masterpage and lightbox work, however, only I have a problem with paging within the lightbox (prev and nextlabels do not appear and also the " image 1 of 20" i get that also not. any idea how can i solve this?

Thanks.
Hicham.

**jscheuer1** · 07-22-2010, 11:39 AM

In order to get the Image 1 of 20 and previous/next in Lightbox, you need to use the:

Code:

rel="lightbox[groupname]"

syntax in your links that activate Lightbox. Like:

Code:

<a href="some.jpg" rel="lightbox[groupname]">Some</a>

Use the same groupname for all images in the same group. Also the next and previous button images must be in the correct location as indicated in the lightbox.css file.

All of this is covered in the Lightbox documentation:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**shahzad79** · 01-11-2011, 06:27 PM

Hi John,

Can you please help me as menu is not working due to lightbox on this page

http://masielbebe.co.uk/detail.php?prodid=72

Thank you in advance for your help

Thanks,
Shahzad

**jornessim** · 08-19-2011, 06:21 PM

HI!
I wanted to use "jQuery Multi Level CSS Menu #2" on my website.

It's nice. But before i using it, i would like to ask a question about this menu.

Here goes the picture that i uploaded to my host server.

As you can see the picture now. The question is, How can we make the menu fit 100% without the right empty space as showing "red A" there.

I would like to remove that part, but i tried to adjust the code, it's unable to be removed.

Can you advice me how to do this? Because, this menu would bu much nicer if without the right empth space as "red A" mention in the picture.

I hope that you can get what i'm trying to say as english is not my primary language. =)

Thanks! =)

Regards,
Jornes

Thread: Jquery Multi Level CSS Menu and Lightbox conflict

Thread Tools

Search Thread

Jquery Multi Level CSS Menu and Lightbox conflict

The Following User Says Thank You to jscheuer1 For This Useful Post:

Jquery conflicting with lightbox

jQuery Multi Level CSS Menu #2

Bookmarks

Bookmarks

Posting Permissions