Is it possible to get the zoom functionality to happen when a user mouses over a slide, rather than double-taps? The double-tap method is great for touch, but for desktop it's not so intuitive, plus it plays havoc with other interactive elements (e.g. links, etc.)

Having the zoom by mouseover should allow a user to navigate around the zoomed slide image too in relation to the position of the mouse to the center of the slide. Moving the mouse to the top right would pan and zoom the slide image to the top right area, same with moving the mouse to any other corner or area within the zoom container.

If there was a switch to also enable inverted panning on the zoom that could be handy too (e.g. moving cursor to the top left would pan and zoom to bottom right of image).

Is it possible to get the zoom functionality to happen when a user mouses over a slide, rather than double-taps? The double-tap method is great for touch, but for desktop it's not so intuitive, plus it plays havoc with other interactive elements (e.g. links, etc.)

Having the zoom by mouseover should allow a user to navigate around the zoomed slide image too in relation to the position of the mouse to the center of the slide. Moving the mouse to the top right would pan and zoom the slide image to the top right area, same with moving the mouse to any other corner or area within the zoom container.

If there was a switch to also enable inverted panning on the zoom that could be handy too (e.g. moving cursor to the top left would pan and zoom to bottom right of image).

• javascript
• reactjs
• swiper.js

• 1 did you try to do this or just a theory question ? – Towkir Commented Oct 28, 2018 at 16:11
• I tried it man but no result that why I posted here. – Noman Commented Oct 30, 2018 at 13:41
• 1 Can you share the code what you tried ? it would help us figure out the issue. – Towkir Commented Oct 30, 2018 at 15:44

3 Answers 3

zoom in and zoom out of images using Swiper js library.

HTML

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="swiper-zoom-container">
                    <img src="https://s3.amazonaws.com/uifaces/faces/twitter/zakiwarfel/128.jpg" class="media-object img-circle thumbnail">
                </div>
            </div>
            <div class="swiper-slide">
                <div class="swiper-zoom-container">
                    <img src="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg" class="media-object img-circle thumbnail">
                </div>
            </div>
            <div class="swiper-slide">Plain slide with text</div>
            <div class="swiper-slide">
                <!-- Override maxRatio parameter -->
                <div class="swiper-zoom-container" data-swiper-zoom="5">
                    <img src="path/to/image1.jpg">
                </div>
            </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

JS

    var mySwiper = new Swiper('.swiper-container', {
      zoom: {
        maxRatio: 5,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
       }
    });
    
    var swiperSlide = document.getElementsByClassName('swiper-slide')
    for(var index = 0; index< swiperSlide.length; index++){
    swiperSlide[index].addEventListener('mouseover',function(e){
        mySwiper.zoom.in();
    })
    
    swiperSlide[index].addEventListener('mouseout',function(e){
        mySwiper.zoom.out();
    })
    }

You can call following method on mouse over event.

mySwiper.zoom.in

Here mySwiper is the instance of Swiper class.You can get information following link. Here is the example.

window.Myswiper = new Swiper('.swiper-container', {
  zoom: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
img1.addEventListener("mousemove", function() {
if(Myswiper.zoom.scale < 2)
  Myswiper.zoom.in()
})
img1.addEventListener("mouseout", function() {
  Myswiper.zoom.out()
})
img2.addEventListener("mousemove", function() {
  if(Myswiper.zoom.scale < 2)
  Myswiper.zoom.in()
})
img2.addEventListener("mouseout", function() {
  Myswiper.zoom.out()
})

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #000;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  overflow: hidden;
}

<link href="https://idangero.us/swiper/dist/css/swiper.min.css" rel="stylesheet" />
<script src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <img id="img1" src="http://www.clker.com/cliparts/3/m/v/Y/E/V/small-red-apple-hi.png">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <img id="img2" src="http://www.clker.com/cliparts/3/k/L/m/P/2/yellow-apple-md.png">
      </div>
    </div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination swiper-pagination-white"></div>
  <!-- Add Navigation -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

For those who are using react-id-swiper and also using Swiper Vertical Thumbnails

Here is the code example.

componentWillUpdate(nextProps, nextState) {
  if (nextState.gallerySwiper && nextState.thumbnailSwiper) {
    const { gallerySwiper, thumbnailSwiper } = nextState

    gallerySwiper.controller.control = thumbnailSwiper;
    thumbnailSwiper.controller.control = gallerySwiper;

    var swiperSlide = document.getElementsByClassName('swiper-zoom-container')
    for(var index = 0; index<swiperSlide.length; index++){
      swiperSlide[index].addEventListener('mouseover',function(e){
        gallerySwiper.zoom.in();
      })
      swiperSlide[index].addEventListener('mouseout',function(e){
        gallerySwiper.zoom.out();
      })
    }
  }
}