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.