Skip to content

Commit 2189ee1

Browse files
dustymethoddustymethod
committed
Fix GIF stuttering issue
Fix GIF stuttering issue Cleanup code & comments for clarity
1 parent 279e98d commit 2189ee1

File tree

3 files changed

+90
-80
lines changed

3 files changed

+90
-80
lines changed

‎BrowserImageSlideshow.html‎

Lines changed: 89 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
<!DOCTYPE html>
12
<!--
23
3-
BrowserImageSlideshow v1.2
4+
BrowserImageSlideshow
45
https://github.com/dustymethod/BrowserImageSlideshow
56
https://obsproject.com/forum/threads/browser-image-slideshow.110157/
67
@@ -25,24 +26,17 @@
2526
overflow: hidden;
2627
}
2728
</style>
29+
2830
<script src="jquery-3.4.1.min.js"></script>
2931
<script src="images/images.js"></script>
3032
<script src="settings.js"></script>
3133
<script>
32-
function shuffle(a) {
33-
for (let i = a.length - 1; i > 0; i--) {
34-
const j = Math.floor(Math.random() * (i + 1));
35-
[a[i], a[j]] = [a[j], a[i]];
36-
}
37-
//console.log(a);
38-
return a;
39-
}
40-
41-
// [0, max)
42-
function randomizeTick(max) {
43-
tick = Math.floor(Math.random() * max);
44-
}
45-
34+
35+
// modes (defined in settings.js):
36+
// 0: Random order (default)
37+
// 1: Alphabetical order
38+
// 2: Alphabetical order (start on random image)
39+
4640
// setup image src strings
4741
let images = imageNamesStr.split("\n");
4842
images.shift();
@@ -62,91 +56,108 @@
6256
indexes.push(i);
6357
}
6458

65-
// init img elements
59+
// setup img elements
6660
let topImage = document.createElement("img");
6761
let botImage = document.createElement("img");
6862
let imageContainer = document.getElementById("imageContainer");
69-
imageContainer.appendChild(topImage);
7063
imageContainer.appendChild(botImage);
64+
imageContainer.appendChild(topImage);
7165
topImage.id = "topImage";
7266
botImage.id = "botImage";
7367

7468
// prevent white outline by setting initial transparency
7569
topImage.style.opacity = "0.0";
7670
botImage.style.opacity = "0.0";
7771

78-
//set init image
72+
let fadeDuration = slideDuration * 0.25;
73+
let slideshowFunc;
7974
let tick = 0;
80-
if (mode === 0) {
81-
shuffle(indexes);
82-
}
75+
let fadeInTop = true; // bool for deciding if top image fades in or out
8376

84-
//randomize tick
85-
if (mode === 2) {
86-
randomizeTick(images.length);
77+
function shuffle(a) {
78+
for (let i = a.length - 1; i > 0; i--) {
79+
const j = Math.floor(Math.random() * (i + 1));
80+
[a[i], a[j]] = [a[j], a[i]];
81+
}
82+
return a;
8783
}
8884

89-
let fadeDuration = slideDuration * 0.25;
90-
let slideshowFunc;
91-
92-
function slideshow() {
93-
//let fadeDuration = 1000;
94-
95-
$("#botImage").animate({
96-
opacity:1.0
97-
},
98-
{
99-
duration:fadeDuration
100-
});
101-
102-
$("#topImage").animate({ //properties
103-
opacity:0
104-
},
105-
{ //options
106-
duration: fadeDuration,
107-
done: function(){
108-
if (tick === images.length-1 && stopOnLastImage === true) {
109-
clearInterval(slideshowFunc); //stop slideshow on last slide
110-
} else {
111-
if (tick === images.length-1) { //reset
112-
if (mode === 0) {
113-
shuffle(indexes);
114-
} else if (mode === 2) {
115-
randomizeTick(images.length);
116-
}
117-
tick = 0;
118-
} else {
119-
tick++;
120-
}
121-
}
85+
function randomizeTick(max) {
86+
tick = Math.floor(Math.random() * max); // [0, max)
87+
}
12288

123-
topImage.src = botImage.src;
124-
topImage.style.opacity = "1.0";
125-
botImage.src = images[indexes[tick]];
126-
botImage.style.opacity = "0.0";
89+
function nextSlide() {
90+
if (tick === images.length-1 && stopOnLastImage === true) {
91+
clearInterval(slideshowFunc); // stop slideshow on last slide
92+
} else {
93+
if (tick === images.length-1) { // if end of loop, start new loop
94+
if (mode === 0) {
95+
shuffle(indexes);
96+
} else if (mode === 2) {
97+
randomizeTick(images.length);
12798
}
99+
tick = 0;
100+
} else { // next slide
101+
tick++;
128102
}
129-
);
103+
}
104+
105+
fadeInTop = !fadeInTop;
130106
}
107+
108+
function slideshow() {
109+
if (fadeInTop) {
110+
topImage.src = images[indexes[tick]];
111+
112+
$("#botImage").animate(
113+
{ opacity: 0.0 },
114+
{ duration: fadeDuration }
115+
);
116+
117+
$("#topImage").animate(
118+
{ opacity: 1.0 },
119+
{
120+
duration: fadeDuration,
121+
done: nextSlide
122+
}
123+
);
131124

132-
if (images.length > 0) {
133-
botImage.src = images[indexes[tick]];
134-
botImage.style.opacity = "0.0";
135-
136-
//initial fade in
137-
$("#botImage").animate({
138-
opacity:1.0
139-
}, { duration:fadeDuration }
140-
);
125+
} else {
126+
botImage.src = images[indexes[tick]];
127+
128+
$("#botImage").animate(
129+
{ opacity: 1.0 },
130+
{ duration: fadeDuration }
131+
);
132+
133+
$("#topImage").animate(
134+
{ opacity: 0.0 },
135+
{
136+
duration: fadeDuration,
137+
done: nextSlide
138+
}
139+
);
140+
}
141+
}
142+
143+
if (mode === 0) { // random mode
144+
shuffle(indexes);
145+
} else if (mode === 2) { // choose random image to start on
146+
randomizeTick(images.length);
147+
}
148+
149+
// if only 1 image in slide show, fade in the image
150+
if (images.length == 1) {
151+
botImage.src = images[indexes[0]];
141152

142-
$("#topImage").animate({
143-
opacity:0
144-
}, { duration:fadeDuration }
153+
$("#botImage").animate(
154+
{ opacity: 1.0 },
155+
{ duration: fadeDuration }
145156
);
146157

147-
if (images.length > 1) {
148-
slideshow();
149-
slideshowFunc = setInterval(slideshow, slideDuration);
150-
}
158+
// else start the slideshow
159+
} else if (images.length > 1) {
160+
slideshow();
161+
slideshowFunc = setInterval(slideshow, slideDuration);
151162
}
152163
</script>

‎README.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
BrowserImageSlideshow v1.3
1+
BrowserImageSlideshow
22
https://github.com/dustymethod/BrowserImageSlideshow
33
Discussion & support: https://obsproject.com/forum/threads/browser-image-slideshow.110157/
44

‎RefreshImagesLua.lua‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
--[=====[
22
3-
v1.2
43
https://github.com/dustymethod/BrowserImageSlideshow
54
https://obsproject.com/forum/resources/browser-image-slideshow.852/
65

0 commit comments

Comments
 (0)