PDA

View Full Version : two script not working together



jonnyfreak
11-03-2014, 01:48 PM
1) Script Title: Smooth Navigational Menu / Lightbox image viewer 2.03a

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

3) Describe problem: I have both scripts running on one page but the lighbox isnt working

i tried using an external page for the lightbox and using an include but that didnt work, the script is below


<head>

<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/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 language="javascript" type="text/javascript">

ddsmoothmenu.init({
mainmenuid: "templatemo_menu", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

function clearText(field)
{
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
</script>

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

other script included in the page in the body

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
controlNav:true
});
});

and the lightbox image links

<ul class="footer_gallery">
<li><a href="images/gallery/113_0828.JPG" rel="lightbox[portfolio]"><img src="images/gallery/JPEG/113_0828.jpg" alt="image 6" width="58" height="43" /></a></li>
<li><a href="images/gallery/15.JPG" rel="lightbox[portfolio]"><img src="images/gallery/JPEG/15.jpg" alt="image 7" /></a></li>
<li><a href="images/gallery/35.JPG" rel="lightbox[portfolio]"><img src="images/gallery/JPEG/35.jpg" alt="image 8" /></a></li>
<li><a href="images/gallery/113_1629.JPG" rel="lightbox[portfolio]"><img src="images/gallery/JPEG/113_1629.jpg" alt="image 9" /></a></li>
<li><a href="images/gallery/113_1833.JPG" rel="lightbox[portfolio]"><img src="images/gallery/JPEG/113_1833.jpg" alt="image 10" /></a></li>
<li><a href="images/gallery/IMG_0346.JPG" rel="lightbox[portfolio]"><img src="images/gallery/JPEG/IMG_0346.jpg" alt="image 11" /></a></li>
<li><a href="images/gallery/IMG_1304.JPG" rel="lightbox[portfolio]"><img src="images/gallery/JPEG/IMG_1304.jpg" alt="image 12" /></a></li>
<li><a href="images/gallery/IMG_2363.JPG" rel="lightbox[portfolio]"><img src="images/gallery/JPEG/IMG_2363.jpg" alt="image 13" /></a></li>
<li><a href="images/gallery/P1000057.JPG" rel="lightbox[portfolio]"><img src="images/gallery/JPEG/P1000057.jpg" alt="image 14" /></a></li>
<li><a href="images/gallery/PIC_0001.JPG" rel="lightbox[portfolio]"><img src="images/gallery/JPEG/PIC_0001.jpg" alt="image 14" /></a></li>
<li><a href="images/gallery/PIC_0082.JPG" rel="lightbox[portfolio]"><img src="images/gallery/JPEG/PIC_0082.jpg" alt="image 14" /></a></li>
<li><a href="images/gallery/security shutters.JPG" rel="lightbox[portfolio]"><img src="images/gallery/JPEG/security shutters.jpg" alt="image 14" /></a></li>
</ul>

jscheuer1
11-03-2014, 02:31 PM
That version of lightbox is incompatible with jQuery based scripts. There are jQuery based lightbox scripts, including the current version of the official lightbox:

http://lokeshdhakar.com/projects/lightbox2/

One thing though, when using more than one script on a page that are based upon jQuery. It's best to use just one reference to jQuery itself. Place that before the other scripts that use it.

jonnyfreak
11-03-2014, 07:21 PM
That version of lightbox is incompatible with jQuery based scripts. There are jQuery based lightbox scripts, including the current version of the official lightbox:

http://lokeshdhakar.com/projects/lightbox2/

One thing though, when using more than one script on a page that are based upon jQuery. It's best to use just one reference to jQuery itself. Place that before the other scripts that use it.

ok thanks i tried the new loghtbox at stuck the new jquery at the top
removed
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
and followed the instructions but then the navigation slideshow failed to work and neither did the lightbox. think i will have to do a bit of juggling about

jscheuer1
11-04-2014, 04:15 AM
Well you do need at least one version of jQuery on the page to power all the jQuery based scripts you have. And it should be a version that's capable of supporting all of them. If there is no such version, you will need more than one jQuery version for the page - either that or one or more tweaks to get whichever script(s) are not happy with your chosen version of jQuery to work with it after all.

If you want more help, please put up a live example of the page and post a link here to it. Include one version of jQuery on it and all of the scripts that you want on the page as well.