1

Quiero agregar una galería de imágenes a mi sitio web, y como todas las secciones las cargo dentro de un div, cada vez que encuentro algún ejemplo de galería que me gusta, deja de funcionar cuando lo cargo dentro de mi div "#section". Por ejemplo, yo tengo mi index.html que es la que contiene el div "#section" y la galería que se llama imagenes.html. Cuando yo abro imagenes.html, funciona perfecto, pero cuando abro la index.html y cargo imagenes.html dentro de #section, deja de funcionar... Intuyo que el problema puede andar por alguna variable que dice $(this), pero probe cambiándola de 2039432 formas y no logro pegarla para que funcione. Alguien podría ayudarme con esto?!

El código de imagenes.html se ve así:

<head>
  <meta charset="UTF-8">
  <title>Galeria</title>
  <link rel="stylesheet" href="photostack.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="photostack.js"></script>
  <script>
  $(function(){
    $(".photostack").Photostack();
  });
  </script>
</head>
<body>
  <ul class="photostack">
    <li><img src="fotos/foto1.jpg"></li>
    <li><img src="fotos/foto2.jpg"></li>
    <li><img src="fotos/foto3.jpg"></li>
  </ul>
</body>

y el de photostack.js se ve asi:

(function($){
  var getRand = function (a, b) {
        return ~~(Math.random() * (b - a + 1)) + a;
    }
    var getPrefix = function(){
      var userAgent = window.navigator.userAgent.toLowerCase();
      if(userAgent.indexOf("msie") != -1){
        return "-ms-";
      }else if(userAgent.indexOf("chrome") != -1 || userAgent.indexOf("safari") != -1){
        return "-webkit-"
      }else if(userAgent.indexOf("firefox") != -1){
        return "-moz-";
      }else if(userAgent.indexOf("opera") != -1){
        return "-o-";
      }else{
        return "";
      }
    }
    var def = {
      top:40,
      left:500,
      degFrom:-20,
      degTo:20,
      animation:"move",
      animationSpeed:500,
      timespan:0,
      auto:false,
      preventClick:false
    }
  $.prototype.Photostack = function(opt){
    opt = $.extend(def,opt);
    var $this = $(this);                //aca pienso yo que puede estar el problema
    var $children = $this.children();
    var prefix = getPrefix();
    var zindex = 0;
    var width = 0;
    var height = 0;
    $this.addClass("js-photostack");
    $children.each(function(){
      var $child = $(this);
      var rand = getRand(opt.degFrom,opt.degTo);
      var rotate = "rotate("+rand+"deg)";
      $child.css(prefix+"transform",rotate);
      $child.css("transform",rotate);
      $child.css("z-index",zindex);
      zindex++;
      if($child.width() > width){
        width = $child.width();
      }
      if($child.height() > height){
        height = $child.height();
      }
    });
    $this.width(width);
    $this.height(height);
    var finished = true;
    $this.click(function(e){
      if(e.originalEvent && opt.preventClick){
        return;
      }
      if(!finished){
        return;
      }
      finished = false;
      var max = 0;
      $children.each(function(){
        var current = parseInt($(this).css("z-index"));
        current++;
        $(this).css("z-index",current);
        if(current > max){
          max = current;
        }
      });
      var $child = $children.filter(function(){
        return max == $(this).css("z-index");
      });
      if(opt.animation == "move"){
        var animationStart = {top:opt.top,left:opt.left};
        var animationEnd = {top:0,left:0};
      }else if(opt.animation = "fade"){
        var animationStart = {opacity:0};
        var animationEnd = {opacity:1};
      }
      $child
      .animate(animationStart,opt.animationSpeed)
      .queue(function(next){
        $child.css("z-index",0);
        next();
      })
      .animate(animationEnd,opt.animationSpeed)
      .queue(function(next){
        finished = true;
        next();
      });
    });
    if(opt.auto){
      setInterval(function(){$this.click()},opt.timespan+opt.animationSpeed*2);
    }
  };
})(jQuery);

Desde ya muchas gracias, Leandro.

10
  • cómo estás cargando imagenes.html dentro del div#section? dependiendo de la forma el javascript del .html "cargado" puede o no ejecutarse Commented el 15 oct. 2018 a las 0:24
  • Para cargar las diferentes paginas en el div #section estoy utilizando esto: $("#section").load("imagenes.html"); .
    – lean2016
    Commented el 15 oct. 2018 a las 0:33
  • prueba moviendo el bloque script al final, justo antes del </body>. para saber si el .load('imagenes.html') está identificando bien el archivo como dataType:html(y ejecutando el javascript) ponele un onload="console.log('estoy cargado')" al tagbody de imagenes.html el resto sería F12 y ver los eventos en la consola (si cargan los js, si identifica bien el elemento, etc) Commented el 15 oct. 2018 a las 0:59
  • Estaba al final originalmente, probando y probando lo movi al principio, pero volvi a dejarlo al final como me decis y fijandome en la consola encontre esto: "Uncaught TypeError: $(...).Photostack is not a function".
    – lean2016
    Commented el 15 oct. 2018 a las 1:12
  • en la pestaña network indica si carga el photostack.js? si es así tal vez no esté parseando bien el tag, ponerlo mas explícito: <script type="text/javascript" src="photostack.js" aunque seguramente no le encuentra en la ruta (o aún no terminó de cargar el jQuery y no puede engancharse al chain de plugins) Commented el 15 oct. 2018 a las 1:17

1 respuesta 1

0

si probaste que funciona fuera de tu sitio y deja de funcionar cuando lo pones en ese div talves tienes un problema con el identificador, porque no pruebas cambiando el name y id por otro, se que no es muy sofisticado pero solo eso se me ocurre

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.