Wednesday, November 30, 2022
HomejQueryZoom Picture On Hover Utilizing jQuery

Zoom Picture On Hover Utilizing jQuery


A tiny jQuery picture zoom script that gives a pleasant magnifying glass impact when hovering over a picture.

This can be a easy and nice answer for web sites which have massive photographs and need to enable the consumer to see particulars utilizing a magnifier fairly than displaying the entire picture without delay. 

Tips on how to use it:

1. Add your picture to the web page as a component and as a background, respectively.

<div class="amplify">
  <div
    class="magnifier"
    model="
      background-image: url(instance.jpg);
    "
  ></div>
  <div class="magnified">
    <img
      src="instance.jpg"
    />
  </div>
</div>

2. Apply CSS types to the zoom space.

.amplify {
  place: absolute;
  remodel: translate(-50%,-50%);
  prime: 50%;
  left: 50%;
  show: inline-block;
}

.amplify .magnified {
  show: block;
  z-index: 10;
  margin: auto;
  width: 600px;
  top: 360px;
  border: 5px strong #fff;
}

3. Fashion the magnifying glass impact.

.amplify .magnifier {
  top: 200px;
  width: 200px;
  place: absolute;
  z-index: 20;
  border: 4px strong white;
  border-radius: 50%;
  background-size: 1000%;
  background-repeat: no-repeat;
  margin-left: -100px !necessary;
  margin-top: -100px !necessary;
  pointer-events: none;
}

4. Fashion the magnifying glass impact.

.amplify .magnifier {
  top: 200px;
  width: 200px;
  place: absolute;
  z-index: 20;
  border: 4px strong white;
  border-radius: 50%;
  background-size: 1000%;
  background-repeat: no-repeat;
  margin-left: -100px !necessary;
  margin-top: -100px !necessary;
  pointer-events: none;
  show: none;
}

5. Load the newest jQuery library on the finish of the doc.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

6. Allow the magnifying glass impact.

$(".magnified").hover(operate(e){

  // Retailer place & dimension info of picture
  var imgPosition = $(".amplify").place(),
      imgHeight = $(".magnified").top(),
      imgWidth = $(".magnified").width();

  // Present mangifier on hover
  $(".magnifier").present();
  
  // Whereas the mouse is shifting and over the picture transfer the magnifier and magnified picture
  $(this).mousemove(operate(e){

    // Retailer place of mouse because it strikes and calculate its place in %
    var posX = e.pageX - imgPosition.left,
        posY = e.pageY - imgPosition.prime,
        percX = (posX / imgWidth) * 100,
        percY = (posY / imgHeight) * 100,
        perc = percX + "% " + percY + "%";
    
    // Change CSS of magnifier, transfer it to mouse location and alter background place primarily based on the odds saved.
    $(".magnifier").css({
      prime:posY,
      left:posX,
      backgroundPosition: perc
    });
  });

}, operate(){

  // Disguise the magnifier when mouse is not hovering over picture.
  $(".magnifier").disguise();
  
});

This superior jQuery plugin is developed by Ak-ram. For extra Superior Usages, please verify the demo web page or go to the official web site.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments