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.
imagenes.html
dentro deldiv#section
? dependiendo de la forma el javascript del .html "cargado" puede o no ejecutarse.load('imagenes.html')
está identificando bien el archivo comodataType:html
(y ejecutando el javascript) ponele unonload="console.log('estoy cargado')"
al tagbody
deimagenes.html
el resto sería F12 y ver los eventos en la consola (si cargan los js, si identifica bien el elemento, etc)network
indica si carga elphotostack.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)