Log in

View Full Version : Conflict between Lightbox 2 and DD Smoothmenu


AlShack
04-23-2009, 08:35 PM
1) Script Title: Lightbox image viewer 2.03a and Smooth Navigational Menu (v1.02)


2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm and http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

3) Describe problem: Smooth menus work fine on all pages. The code is included in a header file that I unclude in all pages. On one page, I am using a lightbox as well, and on this page the menus don't work.

Exact code page is below (apologies for eratic structure). I also haven't shown the included javascript/css files as they are pretty much as I downloaded them from DD.

Cheers
Al






<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Springstar - Wide Format Document Specialists</title>
<link rel="stylesheet" type="text/css" href="~incl/styles.css" />
<link rel="stylesheet" type="text/css" href="~incl/ddsmoothmenu.css" />
<!--[if lte IE 7]>
<style type="text/css">
html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="~incl/jquery.min.js"></script>

<script type="text/javascript" src="~incl/ddsmoothmenu.js">

/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

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


</head>
<body class="bodyMain">
<div align="center">
<table style="background-color: White; text-align: center" border="0" cellpadding="0"
cellspacing="0" width="778px">
<tr style="height: 10px; vertical-align: text-top">
<td colspan="3" style="background-image: url(images/page_top.jpg); background-repeat: no-repeat;
background-color: White">
&nbsp;
</td>
</tr>
<tr>
<td style="width: 24px;">
&nbsp;
</td>
<td>
<table width="730px" border="0">
<tr>
<td>
<img border="0" src="Images/ss_logo_img.gif" alt="Springstar" title="Springstar" />
</td>
<td>
<img border="0" src="Images/phone.png" title="Phone" />
<span style='position: relative; bottom: 8px'>+44 (0)1923 819999 or </span><a title="Email"
href="mailto:sales@springstar.co.uk">
<img border="0" src="Images/email.png" alt="email us" title="email us" /></a>
</td>
<td rowspan="2" style="text-align: right">
<img border="0" src="Images/xerres_logo_img.gif" alt="Xerox reseller" title="Xerox reseller" />
</td>
</tr>
<tr>
<td colspan="2" style="font-size: 15pt; text-align: center">
...wide format document specialists
</td>
</tr>
</table>
</td>
<td style="width: 24px;">
&nbsp;
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
<td>
<br />
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="index.asp">Home</a></li>
<li><a href="about.asp">About Us</a>
<ul>
<li><a href="privacy.asp?ID=1">&nbsp;&nbsp;Privacy Policy</a></li>
</ul>
</li>
<li><a href="products.asp">Products</a>
<ul>
<li><a href="product_category.asp?catID=1">&nbsp;&nbsp;Category A</a><ul><li><a href="product_detail.asp?proID=1">&nbsp;&nbsp;Description Prod 1</a></li><li><a href="product_detail.asp?proID=2">&nbsp;&nbsp;Description Prod 2</a></li></ul></li><li><a href="product_category.asp?catID=2">&nbsp;&nbsp;Category B</a><ul><li><a href="product_detail.asp?proID=4">&nbsp;&nbsp;Description Prod 4</a></li><li><a href="product_detail.asp?proID=5">&nbsp;&nbsp;Description Prod 5</a></li></ul></li><li><a href="product_category.asp?catID=3">&nbsp;&nbsp;Category C</a><ul><li><a href="product_detail.asp?proID=3">&nbsp;&nbsp;Description Prod 3</a></li></ul></li>

</ul>
</li>
<li><a href="supplies.asp">Supplies</a></li>
<li><a href="support.asp">Support</a></li>
<li><a href="client.asp">Client</a></li>
</ul>
<br style="clear: left;" />
</div>
</td>
<td style="background-color: White">
&nbsp;
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
<td>
<div style="text-align: left">
<br />

<div class="heading">
Product Detail
</div>
<br />
1 - Description Prod 1
<a href="Images/products/xerox7880_t.jpg" rel="lightbox" title="bob"><img src="Images/products/xerox7880_t.jpg" alt="Description Prod 1" title="Description Prod 1" border="0" /></a>

<br />
<br />
</div>
</td>
<td>
&nbsp;
</td>
</tr>
<tr>
<td style="width: 10px; background-color: White">
&nbsp;
</td>
<td>
<table class="tableFooter">
<!-- MSTableType="layout" -->
<tr>
<td class="tdFooter">
<a class="aReg" style='font-size: 10pt; color: gray' href="index.asp">Home</a>
</td>
<td class="tdFooter">
|
</td>
<td class="tdFooter">
<a class="aReg" style='font-size: 10pt; color: gray' href="privacy.asp?ID=1">Privacy Policy</a>
</td>
<td class="tdFooter">
|
</td>
<td class="tdFooter">
<a class="aReg" style='font-size: 10pt; color: gray' href="standard.asp">Site Map</a>
</td>
<td class="tdFooter">
|
</td>
<td class="tdFooter">
<a class="aReg" style='font-size: 10pt; color: gray' href="about.asp">Company</a>
</td>
<td class="tdFooter">
|
</td>
<td class="tdFooter">
<a class="aReg" style='font-size: 10pt; color: gray' href="contact.asp">Contact</a>
</td>
</tr>
</table>
</td>
<td style="width: 10px; background-color: White">
&nbsp;
</td>
</tr>
<tr>
<td colspan="3" style="background-image: url(images/page_bottom.jpg); background-repeat: no-repeat;
background-color: White;">
&nbsp;
</td>
</tr>
</table>
</div>

</body>
</html>
jscheuer1
04-23-2009, 08:48 PM
Lightbox and jQuery don't get along. Ordinarily jQuery may be made to perform in a "noConflict" manner. However, it has been my experience that the support files for Lightbox 2x are too complex for jQuery to coexist with even in its "noConflict" mode.

As a result, I suggest that folks seek out a jQuery based script that does Lightbox type effects when they are already using another jQuery based script on the same page.

See:

http://www.google.com/search?client=opera&rls=en&q=jQuery+Lightbox&sourceid=opera&ie=utf-8&oe=utf-8

for a list of choices.

Additionally, since there are various jQuery versions, make sure that the jQuery based Lightbox like script you choose can run with the version of jQuery that your other script requires or that your other script can run with the version of jQuery that the jQuery based Lightbox code you choose requires. Only one version of jQuery may be included on a given page.