How can I make these two scripts work without hurting one another?

Here's my header:

<?php
error_reporting(E_ALL);
include 'Mobile_Detect.php';
$detect = new Mobile_Detect();
if ($detect->isMobile()) {
// Any mobile device.
header("Location:mobile/index.php");
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Trinity Church | A Campus of Brentwood United Methodist Church | 3011 Longford Drive, Spring Hill, TN 37174 </title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />

<!-- jquery stuff for testimonial carousel -->
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(
	function(){
	$('ul#portfolio').innerfade({
		speed: 1000,
		timeout: 3000,
		type: 'sequence',
		containerheight: '312px'
	});
});
</script>
<script type="text/javascript">
		<!--//--><![CDATA[//><!--
			var images = new Array()
			function preload() {
				for (i = 0; i < preload.arguments.length; i++) {
					images[i] = new Image()
					images[i].src = preload.arguments[i]
				}
			}
			preload(
			"images/link_church_light.png",
			"images/link_church_dark.png",
			"images/link_directions_light.png",
			"images/link_directions_dark.png",
			"images/link_times_dark.png",
			"images/link_times_light.png",
			"images/link_directory_light.png",
			"images/link_directory_dark.png",
			"images/link_pastor_light.png",
			"images/link_pastor_dark.png",
			"images/link_gallery_light.png",
			"images/link_gallery_dark.png",
			"images/link_campus_light.png",
			"images/link_campus_dark.png"
			)
		//--><!]]>
	</script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("area[rel^='prettyPhoto']").prettyPhoto();

$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'slow',theme:'light_square',slideshow:3000, autoplay_slideshow: false});
$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'slow',slideshow:10000, hideflash: true});

$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
	custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
	changepicturecallback: function(){ initialize(); }
});

$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
	custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
	changepicturecallback: function(){ _bsap.exec(); }
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="scripts/jquery.cycle2.js"></script>
<link href="stylesheet_slideshow.css" rel="stylesheet" type="text/css" />
</head>

Open in new window


You can see the page in question by heading out to http://www.trinityspringhill.org. The rotating carousel is operating and that's important because...

When I try to introduce this carousel on the same page - head out to http://www.trinityspringhill.org/slideshow.php, the slideshow runs but my rotating carousel doesn't move.

So, in other words, both of them operate just fine when they're not on the same page. But put them together and the rotating carousel shuts down.

How can I fix it so they play nice together?
brucegustPHP DeveloperAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
RobConnect With a Mentor Owner (Aidellio)Commented:
Your new head section:

<?php
error_reporting(E_ALL);
include 'Mobile_Detect.php';
$detect = new Mobile_Detect();
if ($detect->isMobile()) {
// Any mobile device.
header("Location:mobile/index.php");
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<meta charset="UTF-8">
<title>Trinity Church | A Campus of Brentwood United Methodist Church | 3011 Longford Drive, Spring Hill, TN 37174 </title>
<link href="http://www.trinityspringhill.org/stylesheet.css" rel="stylesheet" type="text/css" />

<!-- jquery stuff for testimonial carousel -->
  <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.innerfade/0.1/jquery.innerfade.js"></script>
  <script src="http://cdn.jsdelivr.net/prettyphoto/3.1.5/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.jsdelivr.net/cycle2/20130502/jquery.cycle2.carousel.min.js"></script>
<link href="stylesheet_slideshow.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var images=[];

function preload(image_array) {
  for (i = 0; i < image_array.length; i++) {
    images[i] = new Image();
    images[i].src = image_array[i];
  }
}

$(document).ready(function(){
  images = [
    "http://www.trinityspringhill.org/images/link_church_light.png",
    "http://www.trinityspringhill.org/images/link_church_dark.png",
    "http://www.trinityspringhill.org/images/link_directions_light.png",
    "http://www.trinityspringhill.org/images/link_directions_dark.png",
    "http://www.trinityspringhill.org/images/link_times_dark.png",
    "http://www.trinityspringhill.org/images/link_times_light.png",
    "http://www.trinityspringhill.org/images/link_directory_light.png",
    "http://www.trinityspringhill.org/images/link_directory_dark.png",
    "http://www.trinityspringhill.org/images/link_pastor_light.png",
    "http://www.trinityspringhill.org/images/link_pastor_dark.png",
    "http://www.trinityspringhill.org/images/link_gallery_light.png",
    "http://www.trinityspringhill.org/images/link_gallery_dark.png",
    "http://www.trinityspringhill.org/images/link_campus_light.png",
    "http://www.trinityspringhill.org/images/link_campus_dark.png"
  ];
  preload(images);
  $('ul#portfolio').innerfade({
    speed: 1000,
    timeout: 3000,
    type: 'sequence',
    containerheight: '312px'
  });
  $("area[rel^='prettyPhoto']").prettyPhoto();
  
  $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'slow',theme:'light_square',slideshow:3000, autoplay_slideshow: false});
  $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'slow',slideshow:10000, hideflash: true});
  
  $("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
    custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
    changepicturecallback: function(){ initialize(); }
  });
  
  $("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
    custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
    changepicturecallback: function(){ _bsap.exec(); }
  });
});

	</script>


</head>

Open in new window

0
 
RobOwner (Aidellio)Commented:
I can see right away that you're including the jquery library (and the pretty photo plugin) twice. If they're different versions you'll run into trouble.  Only include them once
0
 
RobOwner (Aidellio)Commented:
I will need the body section or the elements in question to test it further: http://jsbin.com/iCeJOGU/1/edit
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.