2

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);
  });

});
3
  • Así de primeras parece ser que el problema podría ser que el slider tienes que iniciarlo, donde pones: $('.bxslider').bxSlider({..". Entonces pese a que cargue el contenido, no se ejecuta el fragmento de jQuery que lo inicia y por ello el contenido no se ve como deseas. Commented el 19 ago. 2016 a las 6:42
  • Pero si ejecuto solo el archivo single-project.html funciona bien
    – Mikelez
    Commented el 19 ago. 2016 a las 7:19
  • Claro es lo que te digo, @eledgaar te lo explica en su respuesta. Es un error bastante común. Commented el 19 ago. 2016 a las 7:47

1 respuesta 1

3

Lo que te está sucediendo es que el JS que tienes en el archivo single-project.html no se está ejecutando cuando toca. La solución es que ejecutes ese código desde el callback que controla cuando ha cargado tu página.

 // Encapsula el código en una función a la que puedas referirte cuando lo necesites
 function initializeSlider(){
  $('.bxslider').bxSlider({
    pagerCustom: '#bx-pager',
    auto: true,
    autoControls: true
  });
 });

...

contentLoaded.load(href, function(){
  ...
  // Cuando tu página ha cargado ejecutas el código que iniciativa el slider
  initializeSlider()
  ...
});
3
  • Gracias eledgaar me ha funcionado correctamente.
    – Mikelez
    Commented el 19 ago. 2016 a las 8:55
  • De nada @Mikelez! No olvides votar la respuesta ;P
    – eledgaar
    Commented el 19 ago. 2016 a las 8:58
  • Estaba empeñado en colocar el script del slider en el index para que se cargara y asi se pudiera ejecutar el slider
    – Mikelez
    Commented el 19 ago. 2016 a las 8:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.