Solved

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

Posted on 2013-11-25
3
354 Views
Last Modified: 2013-11-30
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
Comment
Question by:brucegust
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
3 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 39676635
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
 
LVL 43

Accepted Solution

by:
Rob earned 500 total points
ID: 39676647
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
 
LVL 43

Expert Comment

by:Rob
ID: 39676649
I will need the body section or the elements in question to test it further: http://jsbin.com/iCeJOGU/1/edit
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

626 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question