Good day everyone!

In general, I want to make a slider, like on Amazon, not even the slider itself, but the opportunity to enlarge the photo and when you move the mouse over the picture, it moves (so that you can see the details)

My attempt failed, here's the HTML code:

<div class="main"> <div id="carousel" class="slider"> <div data-thumb="https://allstringsnylon.com/media/catalog/product/cache/1/image/17f82f742ffe127f42dca9de82fb58b1/c/o/cordoba-15cm-concert-uke-top_lrg_1.png"><img src="https://allstringsnylon.com/media/catalog/product/cache/1/image/17f82f742ffe127f42dca9de82fb58b1/c/o/cordoba-15cm-concert-uke-top_lrg_1.png" alt=""></div> <div data-thumb="http://rolandblog.ca/wp-content/uploads/2013/11/13082_MATON-UKULELE-CEDAR-TOP__98800_zoom.jpg"><img src="http://rolandblog.ca/wp-content/uploads/2013/11/13082_MATON-UKULELE-CEDAR-TOP__98800_zoom.jpg" alt=""></div> <div data-thumb="http://www.lunaguitars.com/productimages/uketribal6/uketribal6.jpg"><img src="http://www.lunaguitars.com/productimages/uketribal6/uketribal6.jpg" alt=""></div> </div> </div>

Js:

 $(function () { $(".slider").slick({ autoplay: true, dots: true, customPaging : function(slider, i) { var thumb = $(slider.$slides[i]).data('thumb'); return '<a><img src="'+thumb+'"></a>'; }, }); var trueHeight, trueWidth, img; $('.slick-slider div img').hover(function(e){ img = $(this); trueHeight = $(this).height(); trueWidth = $(this).width(); $(this).css('position', 'absolute'); var imgHeight = $(this).prop('naturalHeight'); var imgWidth = $(this).prop('naturalWidth'); $(this).height(imgHeight); $(this).width(imgWidth); $(this).mousemove(function(e) { var relativeX = e.clientX; var relativeY = e.clientY; console.log(relativeX+ ' ' +relativeY); img.css({'left': relativeX / -6 + 'px', 'top': relativeY / -1.0 + 'px'}); }); }, function(){ img.css({'position': 'relative', 'top': 0,'left': 0}); $(this).height(trueHeight); $(this).width(trueWidth); }); });

Codepen example

It turned out not very much, everything jumps, twitches and I would like to know, maybe there are ready-made solutions? Or can someone advise how to improve my "code", can someone already did this and is ready to share! Thank!

  • one
    When you hover on the picture it should increase and when driving on the zoom, it should move on the sides? - Yuri
  • And you do not twitch. Which browser are you using? - Yuri
  • I'm just experimenting until now) try it now using chrome - Alexander Reizan
  • Show me a link with this function and I will try to implement it if you don’t work out - Yuri
  • one
    If success is written in half an hour, then I will show, and if not, then after 4 hours or tomorrow :) - Yuri

1 answer 1

So I sketched this option. I am a fan of complex equations, so understand and use :)

 $(function() { var imagebox = $('.imagebox'); imagebox.mousemove(function(e) { var cursor_position = { x: e.clientX - $(this).offset().left + $(window).scrollLeft(), // Положение курсора слева y: e.clientY - $(this).offset().top + $(window).scrollTop() // Положение курсора сверху }, imagebox__img = $(this).find('.imagebox__img'), image_position = { left: ((cursor_position.x / $(this).innerWidth()) * imagebox__img.width() - cursor_position.x) * -1, // Вычисляем позицию картинки слева top: ((cursor_position.y / $(this).innerHeight()) * imagebox__img.height() - cursor_position.y) * -1 // Вычисляем позицию картинки сверху } imagebox__img.css({ position: 'absolute', top: image_position.top, left: image_position.left }); }); }); 
 .imagebox { position: relative; width: 250px; height: 250px; overflow: hidden; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="imagebox"> <img class="imagebox__img" src="https://i.ytimg.com/vi/Jom-LKUuPgI/maxresdefault.jpg"> </div>