https://thirdman.ru/files/themes/yootheme-Third-Man/js/live-pic.js

1/* const picsnum = 30;
2
3// Функция для ограничения значения
4function clamp(value, max) {
5    return Math.trunc(Math.max(1, Math.min(value, max)));
6}
7
8// Функция для вычисления номера изображения на основе позиции курсора
9function offToNum(event) {
10    return clamp(picsnum / (window.innerWidth / event.clientX), picsnum);
11}
12
13let livePicCont, currentNum, moveNum;
14
15// Функция для изменения текущего изображения
16function change() {
17    if (currentNum != moveNum) {
18        let oldNum = currentNum;
19        currentNum < moveNum ? currentNum++ : currentNum--;
20        livePicCont.children[oldNum].setAttribute("class", "");
21        livePicCont.children[currentNum].setAttribute("class", "current");
22        window.requestAnimationFrame(change);
23    }
24}
25
26// Обработчик движения мыши
27document.onmousemove = (event) => {
28    moveNum = offToNum(event);
29    window.requestAnimationFrame(change);
30}
31
32// Загрузка изображений при загрузке документа
33document.addEventListener("DOMContentLoaded", (event) => {
34    livePicCont = document.getElementById("live-pic-container");
35
36    // Получение слага из глобального объекта, переданного через wp_localize_script
37    const projectSlug = portfolioData.slug;  // portfolioData.slug должен быть доступен
38
39    for (let n = 1; n <= picsnum; n++) {  // Начинаем цикл с 1
40        let i = document.createElement("img");
41        // Формирование пути к изображениям на основе слага проекта
42        i.setAttribute("src", `/files/uploads/portfolio/${projectSlug}/live-pic/anim-${n}.png`);
43        livePicCont.appendChild(i);
44    }
45
46    currentNum = Math.trunc(picsnum / 2);
47    livePicCont.children[currentNum - 1].setAttribute("class", "current");  // Учтите сдвиг на 1
48});
49*/
50
51
52
53/* Второй рабочий код! 
54const picsnum = 30;
55
56function clamp(value, max) {
57    return Math.trunc(Math.max(1, Math.min(value, max)));
58}
59
60function offToNum(event) {
61    return clamp(picsnum / (window.innerWidth / event.clientX), picsnum);
62}
63
64let livePicCont, currentNum, moveNum;
65let imagesLoaded = 0;
66const images = [];
67const imageElements = [];
68
69function change() {
70    if (currentNum !== moveNum) {
71        let oldNum = currentNum;
72        currentNum < moveNum ? currentNum++ : currentNum--;
73        livePicCont.children[oldNum].setAttribute("class", "");
74        livePicCont.children[currentNum].setAttribute("class", "current");
75        window.requestAnimationFrame(change);
76    }
77}
78
79document.onmousemove = (event) => {
80    moveNum = offToNum(event);
81    window.requestAnimationFrame(change);
82}
83
84document.addEventListener("DOMContentLoaded", () => {
85    livePicCont = document.getElementById("live-pic-container");
86    const spinner = document.getElementById("spinner");
87    const projectSlug = portfolioData.slug;
88
89    // Создание временных объектов Image для загрузки
90    for (let n = 1; n <= picsnum; n++) {
91        let img = new Image();
92        // 
93        img.src = `/files/uploads/portfolio/${projectSlug}/live-pic/anim-${n}.png`;
94        //img.src = `/files/uploads/portfolio/${projectSlug}/live-pic/anim-${n}.png?v=${Date.now()}`;
95
96        img.onload = function() {
97            imagesLoaded++;
98            if (imagesLoaded === picsnum) {
99                spinner.style.display = 'none';
100                // Все изображения загружены, теперь отображаем их
101                for (let i = 0; i < images.length; i++) {
102                    let imgElement = imageElements[i];
103                    livePicCont.appendChild(imgElement);
104                    imgElement.style.display = 'block'; // Показываем изображение
105                }
106                currentNum = Math.trunc(picsnum / 2);
107                livePicCont.children[currentNum].setAttribute("class", "current");
108            }
109        };
110
111        // Используем объект Image для кэширования
112        images.push(img.src);
113        imageElements.push(img);
114    }
115});
116*/
117
118
119const picsnum = 30;
120
121function clamp(value, max) {

122    return Math.trunc(Math.max(1, Math.min(value, max)));
123}
124
125function offToNum(event) {
126    return clamp(picsnum / (window.innerWidth / event.clientX), picsnum);
127}
128
129let livePicCont, currentNum, moveNum;
130let imagesLoaded = 0;
131const images = [];
132const imageElements = [];
133
134function change() {
135    // Убедимся, что контейнер и изображения существуют перед изменением
136    if (livePicCont && livePicCont.children.length > 0) {
137        if (currentNum !== moveNum) {
138            let oldNum = currentNum;
139            currentNum < moveNum ? currentNum++ : currentNum--;
140            
141            // Проверка, что есть изображение с индексом oldNum и currentNum
142            if (livePicCont.children[oldNum]) {
143                livePicCont.children[oldNum].setAttribute("class", "");
144            }
145            if (livePicCont.children[currentNum]) {
146                livePicCont.children[currentNum].setAttribute("class", "current");
147            }
148
149            window.requestAnimationFrame(change);
150        }
151    }
152}
153
154document.onmousemove = (event) => {
155    moveNum = offToNum(event);
156    window.requestAnimationFrame(change);
157}
158
159document.addEventListener("DOMContentLoaded", () => {
160    livePicCont = document.getElementById("live-pic-container");
161
162    if (!livePicCont) {
163        console.info("live-pic-container не найден!");
164        return;
165    }
166
167    const spinner = document.getElementById("spinner");
168    const projectSlug = portfolioData.slug;
169
170    // Создание временных объектов Image для загрузки
171    for (let n = 1; n <= picsnum; n++) {
172        let img = new Image();
173        img.src = `/files/uploads/portfolio/${projectSlug}/live-pic/anim-${n}.jpg`;
174
175        img.onload = function() {
176            imagesLoaded++;
177            if (imagesLoaded === picsnum) {
178                spinner.style.display = 'none';
179                // Все изображения загружены, теперь отображаем их
180                for (let i = 0; i < images.length; i++) {
181                    let imgElement = imageElements[i];
182                    livePicCont.appendChild(imgElement);
183                    imgElement.style.display = 'block'; // Показываем изображение
184                }
185                currentNum = Math.trunc(picsnum / 2);
186                if (livePicCont.children[currentNum]) {
187                    livePicCont.children[currentNum].setAttribute("class", "current");
188                }
189            }
190        };
191
192        // Используем объект Image для кэширования
193        images.push(img.src);
194        imageElements.push(img);
195    }
196});