Проблема такая :
есть страница на которой размещены галерея и меню используюущие фреймворки Javascript.
Библиотеки
jquery00.js для реализации меню и галереи разные. Чтобы избежать дубляжа одну библиотеку переименовал(jquery00_.js).
После всех необходимых действий по подключения скриптов и таблиц стилей выяснилось что меню не работает так как нужно. Империческим путем стало понятно что проблема в
jquery00.js, одновременно может работать только одна из них.
Вопрос: что делать?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;charset=utf-8" />
<title>My scrollbar demo</title>
<style type="text/css">
<!--
html,body{height:100%;}
body {margin:0; padding:0; background-color:#6A6A6A }
-->
</style>
<!-- custom LavaLamp css and js -->
<link rel="stylesheet" href="lavalamp.css" type="text/css" media="screen">
<script type="text/javascript" src="lib00000.js"></script>
<script type='text/javascript' src='jquery00.js'></script>
<script type="text/javascript">
$(function() {
$(".main .jCarouselLite").jCarouselLite({
btnNext: ".main .next",
btnPrev: ".main .prev",
speed: 500,
easing: "easeinout"
});
$(".lavaLampWithImage, .lavaLampNoImage, .lavaLampBottomStyle").lavaLamp({
fx: "backout",
speed: 700,
click: function() {return false;}
});
});
$(window).load(function() {
// $(".entryMetadata").slideDown(800);
});
</script>
<!-- end LavaLamp css and js -->
<!-- custom Highslide css and js box -->
<link href="highslide.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="highslide-with-gallery.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.numberPosition = 'caption';
hs.dimmingOpacity = 0.75;
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
<!-- end Highslide css and js box -->
<!-- custom gallery-slide css and js box -->
<link href="jquery00.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='jquery00_.js'></script>
<script type="text/javascript" src="jquery01.js"></script>
<script type="text/javascript" src="jquery02.js"></script>
<script type="text/javascript" src="jquery03.js"></script>
<script type="text/javascript" src="jquery-u.js"></script>
<!-- end gallery-slide css and js box -->
</head>
<body>
<div>
<ul class="lavaLampWithImage" id="1">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Plant a tree</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Ride an elephant</a></li>
</ul>
</div>
<!-- content block -->
<div id="mcs_container" align="left" style="border:#000 3px solid;">
<div class="customScrollBox">
<div class="container">
<div class="content">
<a href="portraits/37.jpg" class="highslide" onClick="return hs.expand(this)"><img src="portraits/37_thumb.jpg" alt="image01" /></a>
</div>
</div>
<div class="dragger_container">
<div class="dragger"></div>
</div>
</div>
</div>
<script>
$(window).load(function() {
mCustomScrollbars();
});
function mCustomScrollbars(){
/*
malihu custom scrollbar function parameters:
1) scroll type (values: "vertical" or "horizontal")
2) scroll easing amount (0 for no easing)
3) scroll easing type
4) extra bottom scrolling space for vertical scroll type only (minimum value: 1)
5) scrollbar height/width adjustment (values: "auto" or "fixed")
6) mouse-wheel support (values: "yes" or "no")
7) scrolling via buttons support (values: "yes" or "no")
8) buttons scrolling speed (values: 1-20, 1 being the slowest)
*/
$("#mcs_container").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15);
}
/* function to fix the -10000 pixel limit of jquery.animate */
$.fx.prototype.cur = function(){
if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
return this.elem[ this.prop ];
}
var r = parseFloat( jQuery.css( this.elem, this.prop ) );
return typeof r == 'undefined' ? 0 : r;
}
/* function to load new content dynamically */
function LoadNewContent(id,file){
$("#"+id+" .customScrollBox .content").load(file,function(){
mCustomScrollbars();
});
}
</script>
<script type="text/javascript">
<!--
document.write('<input type="hidden" id="sk2_my_js_payload" name="sk2_my_js_payload" value="');
document.write(Math.round ( Math.abs(((Math.max(Math.max((Math.max(1, 32) + 27), 42), 15) - 20) * 14))));
document.write('" />');
-->
</script>
</body>
</html>
