JQuery Conflict with Dropotron Menu and Lightbox

Hello,

I am very new to coding in Dreamweaver and have spent the better part of 2 days trying to resolve this. I have seen many similar posts online, but can't get the code to work in my webpage.

I've got a navigation menu that uses JQuery and when I attempt to insert Lightbox into the page, the menu does not function properly. I'm sure this is a JQuery conflict. I have tried the JQuery.noconflict()...not working. Can anyone provide me with exactly where I need to insert the JQuery.noconflict() and what, if anything I need to adjust in my code? Thank-you in advance.

My code is as follows:

Header:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prince Edward Island Tour Description</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Abel|Lobster" rel="stylesheet" type="text/css" />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.dropotron-1.0.js"></script>
<script type="text/javascript" src="init.js"></script>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>

<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2127022: #gallery */

.lbGallery {
   /*gallery container settings*/
   background-color: #ffffff;
   padding-left: 0px;
   padding-top: 0px;
   padding-right: 0px;
   padding-bottom: 0px;
   width: 120px;
   height: auto;
   text-align:center;
  }
  .lbGallery ul { list-style: none; margin:0;padding:0; }
  .lbGallery ul li { display: inline;margin:0;padding:0; }
  .lbGallery ul li a{text-decoration:none;}

  .lbGallery ul li a img {
   /*border color, width and margin for the images*/
   border-color: #cccccc;
   border-left-width: 10px;
   border-top-width: 10px;
   border-right-width: 10px;
   border-bottom-width: 20px;
   margin-left:5px;
   margin-right:5px;
   margin-top:5px;
   margin-bottom:5px:
   }

  .lbGallery ul li a:hover img {
   /*background color on hover*/
   border-color: #666666;
   border-left-width: 10px;
   border-top-width: 10px;
   border-right-width: 10px;
   border-bottom-width: 20px;
  }

  #lightbox-container-image-box {
   border-top: 6px double #000000;
   border-right: 6px double #000000;
   border-bottom: 6px double #000000;
   border-left: 6px double #000000;
   }

  #lightbox-container-image-data-box {
   border-top: 0px;
   border-right: 6px double #000000;
   border-bottom: 6px double #000000;
   border-left: 6px double #000000;
   }
/* EndOAWidget_Instance_2127022 */
</style>
<script type="text/xml">

</script>
</head>

Further down in the body...

  $(function(){
   $('#gallery a').lightBox({
    imageLoading:   '/images/lightbox/lightbox-ico-loading.gif',  // (string) Path and the name of the loading icon
    imageBtnPrev:   '/images/lightbox/lightbox-btn-prev.gif',   // (string) Path and the name of the prev button image
    imageBtnNext:   '/images/lightbox/lightbox-btn-next.gif',   // (string) Path and the name of the next button image
    imageBtnClose:   '/images/lightbox/lightbox-btn-close.gif',  // (string) Path and the name of the close btn
    imageBlank:    '/images/lightbox/lightbox-blank.gif',   // (string) Path and the name of a blank image (one pixel)
    fixedNavigation:  false,  // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
    containerResizeSpeed: 400,    // Specify the resize duration of container image. These number are miliseconds. 400 is default.
    overlayBgColor:   "#ffffff",  // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
    overlayOpacity:   0.78,  // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
    txtImage:    'Image',    //Default text of image
    txtOf:     'of'
   });
  });

// EndOAWidget_Instance_2127022
                            </script>

The Lightbox JS begins with the following code...

(function($) {
/**
* JQuery is an alias to jQuery object
*
*/
jQuery.fn.lightBox = function(settings) {
// Settings to configure the jQuery lightBox plugin how you like
settings = jQueryS.extend({

etc

Topic Participants
tamandtree
jakecigar

JQuery Conflict with Dropotron Menu and Lightbox

JQuery Conflict with Dropotron Menu and Lightbox

Topic Participants

tamandtree

jakecigar