I have a carousel that works fine on it's own, but something's killing it when I load its page into my main page. Not sure what would cause it? i'm using "Caroufredsel".
Here's the main page, with script to load page based on which navigation selected. If the user selects "portfolio" it should load a page that includes my slider. Below this is the loaded page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/styles_default.css" type="text/css" media="screen"/>
<script type="text/javascript" language="javascript" src="js/jquery-2.0.0.js"></script>
</head>
<body>
<!-- the beginning background, logo and "menu" link: this disappears to reveal full site //////////////////////////////////////// -->
<div id="full-size-background">
<div id="starting_point">
<img id="start_logo" src="images/logo.png">
<a href="#" id="starting_point_link">MENU</a>
<div id="rotated_text">Title</div>
</div>
</div>
<!-- NAV below //////////////////////////////////////////////////////////////////////////////////////////////////// -->
<div class="header_content" style="opacity:0;display:none;">
<br/>
<ul id="top_nav">
<li class="nav_item logo_li">
<a id="home" class="logo" href="index.php" name="index">
<img src="images/logo.png">
</a>
</li>
<li class="nav_item">
<a id="xx" class="link1" href="#" name="index" rel="address:/xx">xx</a>
</li>
<li class="nav_separator"> / </li>
<li class="nav_item">
<a id="new_sites" class="link1" href="#" name="new_sites" rel="address:/new_sites">
NOW RELEASING
</a>
</li>
<li class="nav_separator"> / </li>
<li class="nav_item">
<a id="portfolio" class="link1" href="#" name="portfolio" rel="address:/portfolio">
PORTFOLIO
</a>
</li>
<li class="nav_separator"> / </li>
<li class="nav_item">
<a id="strategy" class="link1" href="#" name="strategy" rel="address:/strategy">
STRATEGY
</a>
</li>
<li class="nav_separator"> / </li>
<li class="nav_item">
<a id="vip_first" class="link1" href="#" name="vip_first" rel="address:/vip_first">
VIP FIRST
</a>
</li>
<li class="nav_separator"> / </li>
<li class="nav_item">
<a id="contact" class="link1" href="#" name="contact" rel="address:/contact">
CONTACT
</a>
</li>
<li class="nav_separator"> // </li>
<li class="nav_item">
<a id="login" class="link1" href="#" name="login" rel="address:/login">
LOGIN
</a>
</li>
</ul>
</div>
<!-- MAIN SITE content below //////////////////////////////////////////////////////////////////////////////////////////////////// -->
<div id="main_center_box" class="">
<!-- here's where the content loads in //////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////-->
<?php include 'inc/footer.php'; ?>
</div>
<a id="walsh_link" href="http://www.thewalshgroup.ca/" target="_blank">POWERED BY THE WALSH GROUP </a>
<script>
$(document).ready(function() {
// the script that determines which page to load. My problem page is "portfolio"
$("#top_nav li a, #footer_info").on("click", function(e){
// prevent the a href from doing what it naturally does.
e.preventDefault();
// highlight active nav link & turn off others
$('.current').attr('class','link1');
$(this).attr('class','current');
// set the hashtag in url
window.location.hash = $(this).attr('name');
// which page chosen?
var loadpage = 'inc/'+$(this).attr('name')+'.php';
var footer = 'inc/footer.php';
// fade out the main box
$('#main_center_box').stop().animate({ opacity: 0, zIndex:0 }, 700, function() {
$('#main_center_box2').css({opacity:1}).stop().animate({ opacity: 0 }, 700, function() { /* animation complete */ });
// now load the page that matches navigation selected
$('#main_center_box').css({zIndex:1 }).load(loadpage).stop().animate({ opacity: 1}, 700, function() { /* animation complete */ });
});
});
});
</script>
</body>
</html>
<!-- include jQuery + carouFredSel plugin -->
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>
<!-- optionally include helper plugins -->
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.mousewheel.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.transit.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.ba-throttle-debounce.min.js"></script>
<!-- fire plugin onDocumentReady -->
<script type="text/javascript" language="javascript">
(function($, window, document) {
var $doc = $(document),
$win = $(window);
wWidth = $win.width();
$win.on('load', function() {
function move() {
$paging.removeClass('selected');
$current.addClass('selected');
$carousel.stop().animate({left:-(index*(wWidth<=1200?wWidth:1200))});
}
function reset() {
if (timer!==false) {
clearInterval(timer);
}
timer = setInterval(function(){
index++;
if (index>=$img.length) {
index=0;
}
$current=$paging.eq(index);
move();
}, 8000);
}
if ( $('.slideshow').length ) {
var h = 532;
var $img = $('.slideshow .carousel img');
var $paging = '';
var $carousel = $('.slideshow .carousel div');
if ( $('.residence-slideshow').length ) {
h = 644;
}
$carousel.width(($img.length * 1200)+60);
for (var i=0; i<$img.length;i++) {
var c = i===0?' class="selected" ':'';
$paging += '<a href="#" '+c+'></a>';
}
$paging = $($paging);
var index = 0;
var $current = $paging.eq(index);
var timer = false;
$('.slideshow-paging').append($paging);
$paging.on('click', function(e){
e.preventDefault();
index = $paging.index(this);
$current=$(this);
move();
reset();
return false;
});
$('.slideshow .arrows').on('click', function(){
index = $(this).hasClass('arrows-left')?index-1:index+1;
index = (index<0)?$img.length-1:(index>$img.length-1?0:index);
$current=$paging.eq(index);
move();
reset();
});
$img.on('mouseover', function(){
clearInterval(timer);
})
.on('mouseout', reset);
reset();
}
if ( $('.places-slideshow').length ) {
$('.places-slideshow .carousel').fadeIn().carouFredSel({
align: 'left',
responsive: true,
items: {
visible: 1
},
scroll: {
items: 1,
fx: 'directscroll',
duration: 500,
timeoutDuration: 5000,
pauseOnHover: true,
onAfter: function( data ) {
data.items.visible.find('.slide-text').fadeIn('slow');
setTimeout(function() {
data.items.visible.find('.slide-text').fadeOut('slow');
}, 4500);
}
},
auto: {
timeoutDuration: 2000,
delay: 3500
},
prev: {
key: 'left',
button: '.places-slideshow .prev-slide'
},
next: {
key: 'right',
button: '.places-slideshow .next-slide'
},
onCreate: function() {
var firstRound = $(this).find('.slide:eq(0) .slide-text');
firstRound.fadeIn('fast');
setTimeout(function() {
firstRound.fadeOut('slow');
}, 3350);
}
});
}
});
}(jQuery, window, document));
</script>
<div class="places-slideshow">
<div class="carousel">
<div class="slide">
<img src="images/slideshow/slide1.jpg" alt="" />
<div class="slide-text">
<h2><a href="#" target="_blank">TOWNHOME DEVELOPMENT</a></h2>
<p>367 asdf Avenue</p>
<p>ASDFADFASFAADFSADF</p>
</div>
</div>
<div class="slide">
<img src="images/slideshow/slide2.jpg" alt="" />
<div class="slide-text">
<h2><a href="#" target="_blank">CUSTOM HOME</a></h2>
<p>365 asdf Avenue</p>
<p>ASDFASDFASF</p>
</div>
</div>
<div class="slide">
<img src="images/slideshow/slide3.jpg" alt="" />
<div class="slide-text">
<h2><a href="#" target="_blank">DETACHED HOME</a></h2>
<p>341 HILLDOWN Avenue</p>
<p>ASDFASDFAFs</p>
</div>
</div>
<div class="slide">
<img src="images/slideshow/slide4.jpg" alt="" />
<div class="slide-text">
<h2><a href="#" target="_blank">LOREM IPSUM</a></h2>
<p>361asfdasdf</p>
<p>asdfasdf</p>
</div>
</div>
</div>
<span class="arrow-overlay"></span>
<a href="#" class="prev-slide">prev</a>
<a href="#" class="next-slide">next</a>
</div>
Here's the page that get's loaded in, including the slideshow. This page will work when I test it by itself. But