Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Интересная галерея, добить
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » Интересная галерея, добить

Страниц (1): [1]
 

1. ZION3312 - 25 Января, 2022 - 02:36:04 - перейти к сообщению
Имеется красивая галерея, но нужна небольшая модернизация.
Когда наводишь курсор меняется картинка, и когда убираешь курсор то остается та картинка на которой убралась мышка.
Задача! Нужно что бы при убирании мышки, возвращалось на первую картинку.
Вот сам скрипт, типа что то допилить надо в js. Но тут я не силен.
https://dimox[dot]name/hover-images-slider-preview/
2. Vladimir Kheifets - 25 Января, 2022 - 06:38:30 - перейти к сообщению
ZION3312 пишет:
Имеется красивая галерея, но нужна небольшая модернизация.
Когда наводишь курсор меняется картинка, и когда убираешь курсор то остается та картинка на которой убралась мышка.
Задача! Нужно что бы при убирании мышки, возвращалось на первую картинку.
Вот сам скрипт, типа что то допилить надо в js. Но тут я не силен.
https://dimox.name/hover-images-slider-preview/


Добрый день!
Попробуйте добавить обработчик:
в native JavaScript
CODE (javascript):
скопировать код в буфер обмена
  1. hvrSectors.addEventListener('mouseout', function () {
  2.   setActiveEl(hvrSectors.firstChild);          
  3. });
в jQuery
CODE (javascript):
скопировать код в буфер обмена
  1. hvrSectors.on('mouseout', function () {
  2.   setActiveEl($(hvrSectors.firstChild));        
  3. });
Удачи!
3. ZION3312 - 25 Января, 2022 - 11:04:37 - перейти к сообщению
Vladimir Kheifets пишет:
ZION3312 пишет:
Имеется красивая галерея, но нужна небольшая модернизация.
Когда наводишь курсор меняется картинка, и когда убираешь курсор то остается та картинка на которой убралась мышка.
Задача! Нужно что бы при убирании мышки, возвращалось на первую картинку.
Вот сам скрипт, типа что то допилить надо в js. Но тут я не силен.
https://dimox.name/hover-images-slider-preview/


Добрый день!
Попробуйте добавить обработчик:
в native JavaScript
CODE (javascript):
скопировать код в буфер обмена
  1. hvrSectors.addEventListener('mouseout', function () {
  2.   setActiveEl(hvrSectors.firstChild);          
  3. });
в jQuery
CODE (javascript):
скопировать код в буфер обмена
  1. hvrSectors.on('mouseout', function () {
  2.   setActiveEl($(hvrSectors.firstChild));        
  3. });
Удачи!


Я в этом не шарю, но знал что параметр "mouseout" ток как дальше... было для меня не понятно. Ты для меня бог кодинга!!! Все работает!!!
4. ZION3312 - 25 Января, 2022 - 13:48:51 - перейти к сообщению
Vladimir Kheifets
Есть проблемка. В галерее к примеру 9 картинок. И когда только открыл страницу, выводит последнюю картинку.
При наведении и убирании мышки, появляется как надо первая картинка.
Как сделать что бы сразу первая появлялась а не последняя, после полной загрузки страницы.

Вот сам сайт https://cs-exe[dot]ru/ (первые 2 новости тестируются)
5. Vladimir Kheifets - 25 Января, 2022 - 15:24:52 - перейти к сообщению
ZION3312 пишет:
Vladimir Kheifets
Есть проблемка. В галерее к примеру 9 картинок. И когда только открыл страницу, выводит последнюю картинку.
При наведении и убирании мышки, появляется как надо первая картинка.
Как сделать что бы сразу первая появлялась а не последняя, после полной загрузки страницы.
Вот сам сайт https://cs-exe[dot]ru/ (первые 2 новости тестируются)


Вам нужно добавить обработчик загрузки последней картинки
CODE (javascript):
скопировать код в буфер обмена
  1. lastImgEl = document.querySelectorAll(".images").lastChild;
  2. lastImgEl.addEventListener('load', function () {
  3.   setActiveEl(hvrSectors.firstChild);          
  4. });
6. ZION3312 - 26 Января, 2022 - 01:43:20 - перейти к сообщению
Vladimir Kheifets пишет:
ZION3312 пишет:
Vladimir Kheifets
Есть проблемка. В галерее к примеру 9 картинок. И когда только открыл страницу, выводит последнюю картинку.
При наведении и убирании мышки, появляется как надо первая картинка.
Как сделать что бы сразу первая появлялась а не последняя, после полной загрузки страницы.
Вот сам сайт https://cs-exe[dot]ru/ (первые 2 новости тестируются)


Вам нужно добавить обработчик загрузки последней картинки
CODE (javascript):
скопировать код в буфер обмена
  1. lastImgEl = document.querySelectorAll(".images").lastChild;
  2. lastImgEl.addEventListener('load', function () {
  3.   setActiveEl(hvrSectors.firstChild);          
  4. });


Не помогло. Может както реализовать одновременную загрузку всех изображений?
7. Vladimir Kheifets - 26 Января, 2022 - 07:05:33 - перейти к сообщению
ZION3312 пишет:
Vladimir Kheifets пишет:
ZION3312 пишет:
Vladimir Kheifets
Есть проблемка. В галерее к примеру 9 картинок. И когда только открыл страницу, выводит последнюю картинку.
При наведении и убирании мышки, появляется как надо первая картинка.
Как сделать что бы сразу первая появлялась а не последняя, после полной загрузки страницы.
Вот сам сайт https://cs-exe[dot]ru/ (первые 2 новости тестируются)


Вам нужно добавить обработчик загрузки последней картинки
CODE (javascript):
скопировать код в буфер обмена
  1. lastImgEl = document.querySelectorAll(".images").lastChild;
  2. lastImgEl.addEventListener('load', function () {
  3.   setActiveEl(hvrSectors.firstChild);          
  4. });


Не помогло. Может както реализовать одновременную загрузку всех изображений?


Посмотрел страницу. Вы забыли написать, что на ней несколько слайдеров.
Посмотрите фрагмент нтмл кода, который повтряется для каждого слайдера.
CODE (html):
скопировать код в буфер обмена
  1. <div class="images">
  2. <ul class="xfieldimagegallery gallery">
  3. <li>
  4. <a href="https://cs-exe.ru/uploads/posts/2022-01/1643109488_1.jpg" onclick="return hs.expand(this, { slideshowGroup: 'xf_44_gallery' })" target="_blank">
  5. <img src="/uploads/posts/2022-01/thumbs/1643109488_1.jpg" alt="" class="lazy" style="display: block;"></a></li>
  6. <li>
  7. ...
  8. </div>
  9. <div class="hvr__sectors">
  10. <div class="hvr__sector"></div>
  11. <div class="hvr__sector"></div>
  12. <div class="hvr__sector"></div>
  13. ...
  14. </div>
Поэтому не помогло.
К сожалению, у меня нет возможности проверить. Попробуйте так:
CODE (javascript):
скопировать код в буфер обмена
  1. imagesNodeList = document.querySelectorAll(".images");
  2. hvr__sectorsNodeList = document.querySelectorAll(".hvr__sectors");
  3. for (i = 0; i < imagesNodeList.length; i++) {  
  4.   lazyNodeList=imagesNodeList[i].querySelectorAll(".lazy");  
  5.           lazyNodeList.lastChild.EventListener('load', function () {
  6.                  setActiveEl(hvr__sectorsNodeList[i].firstChild);          
  7.           });
  8.   }    
  9. }

 

Powered by ExBB FM 1.0 RC1