https://llewellyn.com/_theme/javascript/llewellyn/llewellyn_gallery.js?t=1790849670

1// JavaScript Document
2
3function galleryRight()
4{
5	//var current_image_id = document.getElementById('gallery_current_id').value;
6	var show_image_id = document.getElementById('gallery_next_id').value;
7
8	//set the next image source
9	document.getElementById('gallery_large_image_id').src=gallery_array[show_image_id][1];
10
11	//set current id to the new id
12	document.getElementById('gallery_current_id').value = show_image_id;
13
14	//reset the thumbail border classes
15	for(var i = 0; i < gallery_array.length; i++) 
16	{
17		document.getElementById("thumb"+i).classList.remove('gallery-thumb-active');
18		document.getElementById("thumb"+i).classList.add('gallery-thumb-inactive');
19
20	}
21
22	//change the selected image's thumb border to active
23	document.getElementById("thumb"+show_image_id).classList.remove('gallery-thumb-inactive');
24	document.getElementById("thumb"+show_image_id).classList.add('gallery-thumb-active');
25
26
27	//set the prev id
28	if(show_image_id == 0)
29	{	
30		//set to the last id of the array
31		document.getElementById('gallery_prev_id').value = gallery_array.length - 1;
32	}
33	else
34	{
35		//set to the prev id of the array
36		document.getElementById('gallery_prev_id').value = parseInt(show_image_id) - 1;
37	}
38
39
40	//set the next id
41	if(show_image_id == gallery_array.length-1)
42	{	
43		//we're on the last in the array so set it to the first id of the array
44		document.getElementById('gallery_next_id').value = 0;
45	}
46	else
47	{
48		//set to the next id of the array
49		document.getElementById('gallery_next_id').value = parseInt(show_image_id) + 1;
50	}
51
52	//scroll it into view
53	var myElement = document.getElementById('thumb' + show_image_id);
54	myElement.scrollIntoView();
55
56}
57
58
59function galleryLeft()
60{
61	var show_image_id = document.getElementById('gallery_prev_id').value;
62
63	//set the next image source
64	document.getElementById('gallery_large_image_id').src=gallery_array[show_image_id][1];
65
66	//set current id to the new id
67	document.getElementById('gallery_current_id').value = show_image_id;
68
69	//reset the thumbail border classes
70	for(var i = 0; i < gallery_array.length; i++) 
71	{
72		document.getElementById("thumb"+i).classList.remove('gallery-thumb-active');
73		document.getElementById("thumb"+i).classList.add('gallery-thumb-inactive');
74
75	}
76
77	//change the selected image's thumb border to active
78	document.getElementById("thumb"+show_image_id).classList.remove('gallery-thumb-inactive');
79	document.getElementById("thumb"+show_image_id).classList.add('gallery-thumb-active');
80
81
82	//set the prev id
83	if(show_image_id == 0)
84	{	
85		//set to the last id of the array
86		document.getElementById('gallery_prev_id').value = gallery_array.length - 1;
87	}
88	else
89	{
90		//set to the prev id of the array
91		document.getElementById('gallery_prev_id').value = parseInt(show_image_id) - 1;
92	}
93
94
95	//set the next id
96	if(show_image_id == gallery_array.length-1)
97	{	
98		//we're on the last in the array so set it to the first id of the array
99		document.getElementById('gallery_next_id').value = 0;
100	}
101	else
102	{
103		//set to the next id of the array
104		document.getElementById('gallery_next_id').value = parseInt(show_image_id) + 1;
105	}
106
107	//scroll it into view
108	var myElement = document.getElementById('thumb' + show_image_id);
109	myElement.scrollIntoView();
110	
111}
112
113
114function galleryChange(show_image_id)
115{
116	document.getElementById('gallery_large_image_id').src=gallery_array[show_image_id][1];
117
118	//reset the thumbail border classes
119	for(var i = 0; i < gallery_array.length; i++) 
120	{
121		document.getElementById("thumb"+i).classList.remove('gallery-thumb-active');
122		document.getElementById("thumb"+i).classList.add('gallery-thumb-inactive');
123
124	}
125
126	//change the selected image's thumb border to active
127	document.getElementById("thumb"+show_image_id).classList.remove('gallery-thumb-inactive');
128	document.getElementById("thumb"+show_image_id).classList.add('gallery-thumb-active');
129
130	//set the current id
131	document.getElementById('gallery_current_id').value = show_image_id;
132
133
134	//set the prev id
135	if(show_image_id == 0)
136	{	
137		//set to the last id of the array
138		document.getElementById('gallery_prev_id').value = gallery_array.length - 1;
139	}
140	else
141	{
142		//set to the prev id of the array
143		document.getElementById('gallery_prev_id').value = parseInt(show_image_id) - 1;
144	}
145
146
147	//set the next id
148	if(show_image_id == gallery_array.length-1)
149	{	
150		//we're on the last in the array so set it to the first id of the array
151		document.getElementById('gallery_next_id').value = 0;
152	}
153	else
154	{
155		//set to the next id of the array
156		document.getElementById('gallery_next_id').value = parseInt(show_image_id) + 1;
157	}
158
159}
160
161
162function gallery_popup()
163{
164	//turn on the loading image div
165	document.getElementById('gallery_blackoutdiv').style.display="block";
166	document.getElementById('gallery_loadingdiv').style.display="block";
167
168	//Select the image the user chose
169	galleryChange(document.getElementById('gallery_image').value);
170
171	//show the gallery and turn off the loading div
172	document.getElementById('gallery_popup').style.display="block";
173	document.getElementById('gallery_loadingdiv').style.display="none";
174
175
176}
177
178function galleryPopupClose()
179{
180	//hide the gallery
181	document.getElementById('gallery_popup').style.display="none";
182	document.getElementById('gallery_blackoutdiv').style.display="none";
183}