Cargar contenido desde otra pagina
Publicado por Mikel (1 intervención) el 19/08/2016 01:24:53
Hola,
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 contenido de esta pagina mediante el index lo hace todo bien excepto el slider que no funciona.
Os dejo los tres archivos con el codigo
index.html
single-project.html
custom.js
Me estoy volviendo loco y no doy con la solucion.
Gracias
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 contenido de esta pagina mediante el index lo hace todo bien excepto el slider que no funciona.
Os dejo los tres archivos con el codigo
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE HTML>
<html lang="ES">
<head>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<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>
. . .single-project.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* -----------------------------
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);
});
});
Me estoy volviendo loco y no doy con la solucion.
Gracias
Valora esta pregunta
0