Tengo un problema con una pagina index.html que carga contenido de otra pagina mediante javascript. El asunto es que en esta segunda pagina single-project.html he insertado un slider (bxslider) y al ejecutar esta pagina individualmente funciona correctamente pero cualdo se carga el contenido de esta pagina desde el index lo hace todo bien excepto el slider que no funciona. Os dejo los tres archivos con el codigo
index.html
<script type="text/javascript" src="js/bootstrap.min.js"></scrip>
<script type="text/javascript" src="js/bootstrap.min.js"></scrip>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
.
.
.
<div class="row porfolio-container">
<section class="cd-gallery">
<div class="row">
<ul>
<li class="mix color-2">
<div class="screenshot">
<div class="photo-box">
<img src="images/2.jpg" alt="" />
<div class="photo-overlay">
<h4>Proyecto 2</h4>
</div>
<span class="photo-zoom">
<a href="single-project.html" class="view-project"><i class="fa fa-search-plus fa-2x"></i></a>
</span>
</div>
</div>
</li>
.
.
.
<div id="portfolio-loader" class="center">
<div class="loading-circle fa-spin"></div>
</div> <!--=== Portfolio loader ===-->
<div id="portfolio-load"></div><!--=== ajax content will be loaded here ===-->
.
.
.
single-project.html
<!DOCTYPE HTML>
<html lang="ES">
<head>
<link rel="stylesheet" href="css/jquery.bxslider.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js></script>
<script src="js/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
auto: true,
autoControls: true
});
});
</script>
</head>
<body>
<div class="container">
<div class="portfolio-project">
<div class="row">
<div class="col-md-10 col-md-offset-1 center section-title">
<h4>Project Title</h4>
</div>
</div>
<div class="row">
<div class="col-md-8 project-photo">
<!-- Project Slider -->
<div class="project-slider">
<div id="bx-pager">
<a data-slide-index="0" href=""><img src="/gakoa/images/client_1.jpg" /></a>
<a data-slide-index="1" href=""><img src="/gakoa/images/thumbs/houses.jpg" /></a>
<a data-slide-index="2" href=""><img src="/gakoa/images/thumbs/hill_fence.jpg" /></a>
</div>
<!-- Single photo project Starts -->
<ul class="bxslider">
<li><img src="proyectos/usansolo/IMG_6052.jpg" /></li>
<li><img src="proyectos/usansolo/IMG_6054.jpg" /></li>
<li><img src="proyectos/usansolo/IMG_6056.jpg" /></li>
</ul>
<!-- Single photo project Ends -->
</div>
<!-- Project Slider Ends -->
</div>
</div>
</div>
</div>
</body>
custom.js
/* -----------------------------
Project Load
----------------------------- */
$(document).ready(function() {
'use strict';
$('.view-project').on('click', function(e) {
e.preventDefault();
var href = $(this).attr('href') + ' .portfolio-project',
portfolioWrap = $('.porfolio-container'),
contentLoaded = $('#portfolio-load'),
offset = $('#section-screenshots').offset().top;
portfolioWrap.animate({'left':'-120%'},{duration:400,queue:false});
portfolioWrap.fadeOut(400);
$('html, body').animate({scrollTop: offset},{duration:800,queue:true});
setTimeout(function(){ $('#portfolio-loader').fadeIn('fast'); },300);
setTimeout(function(){
contentLoaded.load(href, function(){
$('#portfolio-loader').fadeOut('fast');
contentLoaded.fadeIn(600).animate({'left':'0'},{duration:800,queue:false});
$('.back-button').fadeIn(600);
});
},400);
});
$('.backToProject').on('click', function(e){
e.preventDefault();
var portfolioWrap = $('.porfolio-container'),
contentLoaded = $('#portfolio-load');
contentLoaded.animate({'left':'105%'},{duration:400,queue:false}).delay(300).fadeOut(400);
$(this).parent().fadeOut(400);
setTimeout(function(){
portfolioWrap.animate({'left':'0'},{duration:400,queue:false});
portfolioWrap.fadeIn(600);
},500);
});
});