Load content from another page

Question

Load content from another page

Navigation

#1 by (3 votes)

2

I have a problem with an index.html page that loads content from another page using javascript. The issue is that in this second page single-project.html I have inserted a slider (bxslider) and when executing this page individually it works correctly but when the content of this page is loaded from the index it does everything well except the slider that does not work . I leave the three files with the code

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

});

javascript html

asked by Mikelez 19.08.2016 в 02:29

source

1 answer

How to enable the "productio.mode" in angular2 with Angular-cli? Disordered buttons

score 3 · Accepted Answer

What is happening to you is that the JS you have in the file single-project.html is not running when you play. The solution is to execute that code from the callback it controls when you have loaded your page.

 // 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()
  ...
});