Перелистывание изображений движением курсора

InstantCMS 2.X
#1 8 июля 2022 в 18:30

Использую готовое решение  jQuery.Brazzers-Carousel и всё вроде бы хорошо, но вот загвоздка в том, как сделать так, что бы всё возвращалось к первичному изображению? js прикладываю

  1. /*!
  2. * jQuery Brazzers Carousel v1.0.0 (http://webdesign-master.ru)
  3. * Copyright 2015 WebDesign Master.
  4. */
  5. (function($) {
  6. $.fn.brazzersCarousel = function() {
  7. return this.addClass("brazzers-daddy").append("<div class='tmb-wrap'><div class='tmb-wrap-table'>").append("<div class='image-wrap'>").each(function() {
  8. var this_wrapper = $(this);
  9.  
  10. this_wrapper.removeClass("thumb-item");
  11. this_wrapper.find("img").appendTo(this_wrapper.find(".image-wrap")).each(function() {
  12. this_wrapper.find(".tmb-wrap-table").append("<div>");
  13. });
  14.  
  15. }).find(".tmb-wrap-table").bind('touchstart', function(event) {
  16. var xClick = event.originalEvent.touches[0].pageX;
  17.  
  18. $(this).one("touchmove", function (event) {
  19.  
  20. var xMove = event.originalEvent.touches[0].pageX;
  21.  
  22. if (Math.floor(xClick - xMove) > 5) {
  23. var this_img = $(this).closest(".brazzers-daddy").find("img");
  24. var all_thmbs = $(this).find("div");
  25. var index_div = $(this).find("div.active").index();
  26. all_thmbs.removeClass("active");
  27. next = index_div+1;
  28. if(!this_img.eq(next).length){
  29. next = 0;
  30. }
  31. this_img.hide().eq(next).css("display", "block");
  32. all_thmbs.eq(next).addClass("active");
  33.  
  34. }
  35. else if (Math.floor(xClick - xMove) < -5) {
  36.  
  37. var this_img = $(this).closest(".brazzers-daddy").find("img");
  38. var all_thmbs = $(this).find("div");
  39. var index_div = $(this).find("div.active").index();
  40. all_thmbs.removeClass("active");
  41. next = index_div-1;
  42. if(!this_img.eq(next).length){
  43. next = this_img.length;
  44. }
  45. this_img.hide().eq(next).css("display", "block");
  46. all_thmbs.eq(next).addClass("active");
  47. }
  48.  
  49. });
  50. $(".carousel").on("touchend", function () {
  51. $(this).off("touchmove");
  52. });
  53.  
  54. }).find("div").hover(function() {
  55. var this_img = $(this).parent(".tmb-wrap-table").closest(".brazzers-daddy").find("img");
  56. var all_thmbs = $(this).parent(".tmb-wrap-table").find("div");
  57. this_img.hide().eq($(this).index()).css("display", "block");
  58. all_thmbs.removeClass("active");
  59. $(this).addClass("active");
  60. }).parent().find(":first").addClass("active");
  61.  
  62.  
  63. };
  64. })(jQuery);
#2 9 июля 2022 в 21:50

После 54 строки вставьте

  1. $('main').hover(function() {
  2. this_img.hide();
  3. all_thmbs.removeClass("active");
  4. $(this_img[0]).css("display", "block");
  5. })

Вместо 'main' что то своё. Зависит от вашего шаблона. Какой блок у вас там рядом. Может и 'body' сработать.

И не пишите, что не работает). Если не работает, значит не верный блок нашли.

Пример Реагирует на сайдбар

Добавлено спустя 10 часов

PS. Хотя есть и лучшее решение)

#3 10 июля 2022 в 22:48

Всё получилось как надо! Огромное спасибо!

Добавлено спустя 2 часа

Хочу еще попробовать сделать ленивую\отложенную загрузку через lazyload например, но правильно ли я понимаю, что css не обойдешься и нужно будет так же в js прописывать?

#4 11 июля 2022 в 08:10

Да

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.