Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 379
  • Last Modified:

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?
0
brucegust
Asked:
brucegust
  • 3
1 Solution
 
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:
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 will need the body section or the elements in question to test it further: http://jsbin.com/iCeJOGU/1/edit
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now