...

View Full Version : Over use of JS ?! nav bar not working with lightbox ? help ?



Kanuto01
04-22-2011, 10:02 AM
Hello everyone,
here we go: I've got nice nav bar with js, working perfect (got it at http://net.tutsplus.com/tutorials/de...vigation-menu/ ), now when I try to add rel="lightbox" to images, the lightbox doesn't work ? Here's the html, I'll explain more;


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!--[if lt IE 8]>
<script src ="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE8.js"></script>
<![endif]-->
</head>
<body>

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">About Them</a></li>
<li><a href="#">About You</a>
<ul>
<li><a href="#">More About Us</a></li>
<li><a href="#">More About Them</a></li>
<li><a href="#">More About You</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">International</a></li>
<li><a href="#">Corporate</a>
<ul>
<li><a href="#">International</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">American Offices</a></li>
</ul>
</li>
<li><a href="#">American Offices</a></li>
</ul>
</li>
<li><a href="#">Mission Statement</a></li>
</ul>

<p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script>
</p>
<p>
<img src="file:///C|/Users/Miha/Documents/_Blinds_.jpg" width="256" height="256">
<script type="text/javascript" src="js/scripts.js"></script>
</p>
</body>
</html>

In order to install the "lightbox":
You will need to include these three Javascript files in your header (in this order).
<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>

If I place these scripts in head - it wont work. If i delete the bottom three scripts which are used for nav bar then lightbox will work but then I shut off animation for nav bar? May-b someone had same problem and found solution where to put this three scripts from lightbox to work with nav bar ? (files for lightbox are in right position, styles are in right place, js is also located right - triple checked)

Finished the whole d**n site and now the lighbox is eating my brains..
Tried searching for the answer on google and other forums and didnt find answer so any idea at all is very welcome.

AndrewGSW
04-22-2011, 10:34 AM
I don't have experience of this myself, but I would suspect that havng three different libraries loaded that perform a similar role (jQuery, prototype and scriptaculous) plus your own script is likely to cause conflicts.

Query has 'noConflict()' which can enable you to switch the use of the $ sign between the libraries. But it might prove tricky trying to discover where, precisely, the conflict originates.

jQuery is your main library, so I would try to find a version of the lightbox that doesn't require prototype and scriptaculous.

Kanuto01
04-22-2011, 11:03 AM
unfortunately I dont have experiences with js coding so I have no idea how would I make all that work but have decidet to delete scripts for nav bar and have a working lightbox for the time before i find solution to work both... Thank you for replying though, now I at least know where the problem is :)

AndrewGSW
04-22-2011, 11:25 AM
Ok.

But just to clarify, I'm not saying this is the cause of the problem. It could be just a simple typing error somewhere :confused:. But I suspect that there may be conflicts between the various libraries. :thumbsup:

mmoylan
04-27-2011, 09:34 PM
just recently code hosted on googlecode.com seems to be being delivered as with the mime type application/empty so it is not working as plain text

Try downloading all the JS that is on googlecode.com and putting it on your local server. I think that might solve your problem.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum