Kanuto01
04-22-2011, 09: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.
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.