HTML - Cargar contenido desde otra pagina

   
Vista:

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

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder