Fecha y hora actual: Sábado 17 Ago 2019 22:55
Índice del Foro

Foros de programación informática, diseño gráfico y Web

En esta comunidad intentaremos dar soporte de programación a todos los niveles, desde principiantes a profesionales de la informática, desarrollo de programas, programación web y mucho más.

Problema al cargar pagina

Responder al Tema

Índice del Foro > HTML y CSS > Problema al cargar pagina

Autor Mensaje
mikelez



Registrado: 24 Jul 2015
Mensajes: 3

Mensaje Publicado: Viernes 19 Ago 2016 00:48

Título del mensaje: Problema al cargar pagina

Responder citando

Hola a todos,
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

Código:

<!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

Código:

<!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

Código:

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

});


Gracias

Volver arriba
Ver perfil del usuario Enviar mensaje privado
WhiteSkull
CoAdmin


Registrado: 20 Mar 2009
Mensajes: 3136
Ubicación: y*width+x

Mensaje Publicado: Domingo 15 Ene 2017 17:23

Título del mensaje: Problema al cargar pagina

Responder citando

súbelo al codepen... puedes bien meter todo el código en un solo proyecto o mantener la estructura de ficheros tal como muestras en el mensaje de este hilo con enlaces a otros proyectos que contengan el html o js.

Si lo compartes por codepen es mucho más cómodo para corregir y de paso compartir la solución. La idea de usar la etiqueta code en el foro está mejor encaminada a determinados lenguajes o porciones de código de pocas líneas.

Volver arriba
Ver perfil del usuario Enviar mensaje privado Visitar sitio web del autor
Responder al Tema
Mostrar mensajes anteriores:   
Ir a:  
Todas las horas están en GMT + 2 Horas

Temas relacionados

Tema Autor Foros Respuestas Publicado
El foro no contiene ningún mensaje nuevo

Desarrollar problema vb.net

Dav2k6 Visual Basic .NET 0 Miércoles 03 Jul 2019 09:12 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Pagina de bonus para casino: programación web

AndreaSanjuan Temas generales 1 Martes 14 May 2019 14:37 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Problema con mostrar datos en JTable con Iterat...

mariaelhacker Java 0 Lunes 11 Mar 2019 13:25 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Ayuda creando página web

lamek HTML y CSS 1 Lunes 14 Ene 2019 08:10 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Consulta sobre un tipo de PLUGIN para insertar ...

Federico Jose Temas generales 1 Sábado 08 Sep 2018 18:57 Ver último mensaje
Panel de Control
No puede crear mensajes, No puede responder temas, No puede editar sus mensajes, No puede borrar sus mensajes, No puede votar en encuestas,