I've included two javascripts in one php file. First one is camera and 2nd is carouFredSel. But they don't run together. If I remove the 2nd one, then 1st one works properly. If I keep both then only 2nd one runs. But I want to run both files. Somebody please help me to get out of it.
<script type='text/javascript' src='java_slider/scripts/jquery.min.js'></script>
<script type='text/javascript' src='java_slider/scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='java_slider/scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='java_slider/scripts/camera.min.js'></script>
<script>
jQuery(function(){
jQuery('#camera_random').camera({
thumbnails: true
});
});
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<!-- include jQuery + carouFredSel plugin -->
<script type="text/javascript" language="javascript" src="java/jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="java/jquery.carouFredSel-6.2.1-packed.js"></script>
<!-- fire plugin onDocumentReady -->
<script type="text/javascript" language="javascript">
$(function() {
// Basic carousel, no options
$('#foo0').carouFredSel();
// Basic carousel + timer, using CSS-transitions
$('#foo1').carouFredSel({
auto: {
pauseOnHover: 'resume',
progress: '#timer1'
}
}, {
transition: true
});
// Scrolled by user interaction
$('#foo2').carouFredSel({
auto: true,
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
mousewheel: true,
swipe: {
onMouse: true,
onTouch: true
}
});
// Variable number of visible items with variable sizes
$('#foo3').carouFredSel({
width: 360,
height: 'auto',
prev: '#prev3',
next: '#next3',
auto: false
});
// Responsive layout, resizing the items
$('#foo4').carouFredSel({
responsive: true,
width: '100%',
scroll: 2,
items: {
width: 400,
// height: '30%', // optionally resize item-height
visible: {
min: 2,
max: 6
}
}
});
// Fuild layout, centering the items
$('#foo5').carouFredSel({
width: '100%',
scroll: 2
});
});
</script>
<style type="text/css" media="all">
.wrapper {
background-color: #D1D1D1;
width: 670px;
box-shadow: 0 0 5px #999;
margin: auto;
height: 181px;
}
.list_carousel {
height: 100px;
width: 670px;
margin: auto;
}
.list_carousel ul {
list-style: none;
display: block;
padding-left: 0.5px;
}
#foo2{
margin-left: 15px;
margin-top: -10px;
}
.list_carousel li {
font-size: 20px;
color: #999;
text-align: center;
background-color: #eee;
width: 194px;
height: 155px;
margin: 5px;
display: block;
float: left;
margin-left: 8px;
}
.list_carousel.responsive {
width: auto;
margin-left: 0;
}
.clearfix {
float: none;
clear: both;
}
.prev {
float: left;
margin-left: 2px;
margin-top: 80px;
}
.next {
float: right;
margin-right: 2px;
margin-top: 80px;
}
.pager {
float: left;
width: 300px;
text-align: center;
}
.pager a {
margin: 0 5px;
text-decoration: none;
}
.pager a.selected {
text-decoration: underline;
}
.timer {
background-color: #999;
height: 6px;
width: 0px;
}
</style>
<div class="wrapper">
<a id="prev2" class="prev" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/left_arrow_hover.png',1)"><img src="images/left_arrow.png" name="Image2" width="21" height="28" border="0"></a>
<a id="next2" class="next" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/right_arrow_hover.png',1)"><img src="images/right_arrow.png" name="Image4" width="21" height="28" border="0"></a>
