I want to add a gallery of images to my website, and as all the sections I load them into a div, every time I find a gallery example that I like, it stops working when I load it into my div "# section ". For example, I have my index.html which is the one that contains the div "#section" and the gallery that is called images.html. When I open images.html, it works perfect, but when I open the index.html and load imagenes.html inside #section, it stops working ... I suspect that the problem may go by some variable that says $ (this), but try changing it from 2039432 forms and I do not manage to paste it to make it work. Could someone help me with this?!
The code of images.html looks like this:
<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>
and that of photostack.js looks like this:
(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);
Thank you very much, Leandro.