Results 1 to 2 of 2

Thread: Conflict between Lightbox 2 and DD Smoothmenu

  1. #1
    Join Date
    May 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Conflict between Lightbox 2 and DD Smoothmenu

    1) Script Title: Lightbox image viewer 2.03a and Smooth Navigational Menu (v1.02)


    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/index.htm and http://www.dynamicdrive.com/dynamici...smoothmenu.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


    Code:
    
    <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>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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=...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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •