paulkr / blowup.js Goto Github PK

View Code? Open in Web Editor NEW

92.0 4.0 50.0 5.94 MB

🔍 jQuery plugin for image magnification.

Home Page: https://paulkr.github.io/blowup.js/

License: MIT License

JavaScript 69.24% HTML 30.76%

jquery-plugin image-magnification blowup image-enlarger magnifying-glass magnify

blowup.js's Introduction

blowup.js

A jQuery plugin for customizable image magnification.

Check out a demo!

Usage

You can install blowup through npm:

$ npm install blowup

or through bower:

$ bower install blowup

Alternatively, download the package and reference the blowup.js file in your HTML file. Ensure you have included the latest stable jQuery version before including blowup.js.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="lib/blowup.js"></script>

Then, apply the blowup effect to your image.

$(document).ready(function () {
    $("img").blowup();
})

Configuration Parameters

Listed are the customization options that blowup.js allows.

Parameter	Purpose	Default
round	If you want the magnification lens to be round. Setting this to false will give you a square lens.	true
width	Lens Width in pixels.	200
height	Lens height in pixels.	200
background	Color for background (will be visible on image edges).	"#FFF"
shadow	CSS style for lens shadow.	"0 8px 17px 0 rgba(0, 0, 0, 0.2)"
border	CSS style for lens border.	"6px solid #FFF"
cursor	Set to false if you do not want the crosshair cursor visible.	true
zIndex	z-index value of the lens.	999999
scale	Scale factor for zoom.	1
customClasses	Additional CSS classes to add to the magnification (separated by spaces).	""

Example

$("img").blowup({
    "background" : "#F39C12",
    "width" : 250,
    "height" : 250,
    "customClasses" : "class1 class2"
})

blowup.js's People

Contributors

Stargazers

Watchers

blowup.js's Issues

Couldn't work with <!doctype html>

Integrate with Dynamic Bootstrap 5 Carousel

I have a WordPress gallery site where images open up in a Bootstrap 5 Modal, which opens up a Bootstrap Carousel.

The images are loaded in a post loop with a php foreach loop, one per slide.

I am trying to add hover magnification to each image using blowup.js

I have the zoom function moving correctly with each slide, however only the first image tracks where the mouse is. Subsequent magnifications are stuck in the top left corner.

UPDATE
Fixed by implementing the bug fix in the pull request: "Fixed working with multiple images #19".

Shows a plain white image - not the zoomed in image

Trying to use this plugin in a bootstrap modal. Although the lens appears, it only shows a plain white image. Nothing from the original image.

Zoom Level

Hi , im using your plugin for image zoom but i cant set level of zoom, i want less zoom value for lens.
How can i do that?

Thanks in advance.

Hello,
I would like to include Blowup in my project, but I can not. After doing "npm install --save blowup" and adding "require ('blowup / lib / blowup')" in my config file I have an error "blowup is not a function"
Can you help me ?

How to change background lens on thumbnail change?

Hi,

I have a product page with its images (the first larger and the other thumbnails).
clicking on the thumbnails the first image changes .. ok
How can I apply the zoom to the new image?

Lens not synchronized to the image with 90 degrees of rotation

I am using rotate but when I use 90 degrees or 270 degrees, the lens doesn't match.

Do you know how to solve this problem?

The lens is behaving very strange, it looks like I am moving the image in the opposite direction, I am moving up in the image, but I am moving the mouse down.

Below is the blowup code along with the rotate:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <div style="margin-top: 100px;">
            <img id="target" style="margin-left: 160px; " src="https://iili.io/0hL7ou.png">
        </div>
        
        <button onclick="rotateImage()">Rotate</button>
        
        <script>

            function zoom(x, y) {
                
                var top = 8;
                var left = 168;
                var width = 599.344;
                var height = 500;
                var nativeWidth = 742;
                var nativeHeight = 619;

                var lensX = x - (200 / 2);
                var lensY = y - (200 / 2);

                var relX = x - left;
                var relY = y - top;

                var zoomX = -Math.floor(((relX / width) * nativeWidth) - (200 / 2));
                var zoomY = -Math.floor(((relY / height) * nativeHeight) - (200 / 2));

                var backPos180 = "calc(100% - " + zoomX + "px) calc(100% - " + zoomY + "px)";
                var backPos360 = zoomX + "px " + zoomY + "px";

                return [zoomX, zoomY, backPos180, backPos360]

            }

            var statusRotate = 4;
            rotateImage();
            
            function rotateImage() {
                if (statusRotate == 1) {
                    imageLen('90', '90');
                    statusRotate = 2
                } else if (statusRotate == 2){
                    imageLen('180', '-180')
                    statusRotate = 3
                } else if (statusRotate == 3){
                    imageLen('270', '270')
                    statusRotate = 4
                } else if (statusRotate == 4){
                    imageLen('360', '360')
                    statusRotate = 1
                } 
            }

            function imageLen(x, y){
                var degrees_image = x;
                var degrees_image_native = y;

                var $element = $('#target');
                $element.css({
                    'transform': 'rotate('+ degrees_image +'deg)'
                }); // rotate imagem in html

                // Constants
                var $IMAGE_URL    = $element.attr("src");
                var NATIVE_IMG    = new Image();
                NATIVE_IMG.src    = $element.attr("src");

                var lens = document.createElement("div");
                lens.id = "BlowupLens";
                $("body").append(lens);
                $blowupLens = $("#BlowupLens");

                $blowupLens.css({
                    "position"          : "absolute",
                    "display"           : "none",
                    "pointer-events"    : "none",
                    "zIndex"            : 999999,
                    "width"             : 200,
                    "height"            : 200,
                    "border"            : "6px solid #FFF",
                    "background"        : "#FFF",
                    "border-radius"     : "50%",
                    "box-shadow"        : "0 8px 17px 0 rgba(0, 0, 0, 0.2)",
                    "background-repeat" : "no-repeat",
                });

                // Show magnification lens
                $element.mouseenter(function () {
                    $blowupLens.css("display", "block");
                });


                // Mouse motion on image
                $element.mousemove(function (e) {

                // Lens position coordinates
                var lensX = e.pageX - (200 / 2);
                var lensY = e.pageY - (200 / 2);

                var width = $element.width();
                var height = $element.height();

                var left = $('#target').offset().left;
                var top = $('#target').offset().top;

                // Relative coordinates of image
                var relX = e.pageX - left;
                var relY = e.pageY - top;

                var nativeImageWidth = NATIVE_IMG.width;
                var nativeImageHeight = NATIVE_IMG.height;

                // Zoomed image coordinates 
                var zoomX = -Math.floor(relX / width * (NATIVE_IMG.width) - 200 / 2);
                var zoomY = -Math.floor(relY / height * (NATIVE_IMG.height) - 200 / 2);



                if(degrees_image == '90') {
                    var backPos = "calc(100% - " + zoomY + "px) calc(100% - " + zoomX + "px)";
                    //var backPos = zoomY + "px " + zoomX + "px";
                    var backgroundSize = NATIVE_IMG.width + "px " + NATIVE_IMG.height + "px";

                    //
                } else if(degrees_image == '180') {
                    var backPos = "calc(100% - " + zoomX + "px) calc(100% - " + zoomY + "px)";
                    var backgroundSize = NATIVE_IMG.width + "px " + NATIVE_IMG.height + "px";

                } else if(degrees_image == '270') {
                    var backPos = zoomY + "px " + zoomX + "px";
                    var backgroundSize = NATIVE_IMG.width + "px " + NATIVE_IMG.height + "px";

                } else if(degrees_image == '360') {
                    var backPos = zoomX + "px " + zoomY + "px";
                    var backgroundSize = NATIVE_IMG.width + "px " + NATIVE_IMG.height + "px";
                }

                // Apply styles to lens
                $blowupLens.css({
                    left                  : lensX,
                    top                   : lensY,
                    "background-image"    : "url(" + encodeURI($IMAGE_URL) + ")",
                    "background-size"     : backgroundSize,
                    "background-position" : backPos,
                    "transform"           : 'rotate('+ degrees_image_native +'deg)' //rotate the image original
                    });
                })

                // Hide magnification lens
                $element.mouseleave(function () {
                    $blowupLens.css("display", "none");
                });
            }      
        
        </script>
    </body>
</html>

blowup.js not following when changing src on preview element

Im letting the user to choose color on a product and when clicked then main image that has blowup.js included dose not follow and displays the first image.

`
$(".demo-img").blowup({background : "#ffffff"});

    jQuery('.product-preview-content').click(function(){
      var img_selected = $(this).children('img').attr('src');
      $(".product-preview").children('img').attr("src",img_selected);
    });

Lens background location is not exact

There are mistakes in both zoomX and in zoomY.

Current:
zoomX = -Math.floor(relX / $element.width() * (NATIVE_IMG.width * $options.scale) - $options.width / 2);
zoomY = -Math.floor(relY / $element.height() * (NATIVE_IMG.height * $options.scale) - $options.height / 2);

In this mistake state, this is wrong (even in the demo):

While cursor is in the edge of the photo, the lens position has mistake - you can see the cursor position is not on the edge in the zoom, although it was on edge in the photo).

The fix:
zoomX =-6 -Math.floor(relX / $element.width() * (NATIVE_IMG.width * $options.scale) - $options.width / 2);
zoomY =-6 -Math.floor(relY / $element.height() * (NATIVE_IMG.height * $options.scale) - $options.height / 2);
(Just added -6 to each calculation)

Don't really know why tho (LOL) but it works now for every image..

Multiple images error: zoom show always the 1st one

When more than one image has a 'zoom' class:

<img src="01.png" class="zoom" alt="img"/>
<img src="02.png" class="zoom" alt="img"/>
<img src="03.png" class="zoom" alt="img"/>

and we activate the zoom on them:

$(function() {
    $('img.zoom').blowup();
});

Then the zoom display a zoomed version of the first image, even if we are hover the second or third image.

I tested with latest version of FF and IE.

Best regards,

Rotation(like below) and magnification of the image

Ok, here are two and more problems. As it was said in prev issue the magnifying lens dosn't show the rotated image, if it is rotated. Moreover, what i've found out is that if we change the width and height of an image using css, the scale attribute will be counted according to original sizes. If we change some parameters of the image(like hue or tilt), the script won't work propperly, cause it's not taking into account any changes in styles. I'll try to fix scale in a PR, but first need to understand what the scale of '1' means.

Wrong calculation because of offsetTop&Left

Hi,

The current version contains the code

  // Relative coordinates of image
  var relX = e.pageX - this.offsetLeft;
  var relY = e.pageY - this.offsetTop;

which does not work when the image is inside any offsetParent that itself has an offset relative to the document's top-left corner. So, while this works in demo, it doesn't in many practical cases. The following works though:

  // Relative coordinates of image
  var relX = e.pageX - $(this).offset().left;
  var relY = e.pageY - $(this).offset().top;

Good day
D

BlowupLens does not work with Rotated Image

I tried rotating the image 90 degrees and the magnification does not show the correct part of Image.

Support base64 image source

// Constants
var $IMAGE_URL    = $element.attr("src");
if($IMAGE_URL.substr(0, 5) == "data:"){
	$IMAGE_URL = '"' + $IMAGE_URL + '"';
}

I don't know how to contribute the source with .min.js
so I post what I've done for my own use here.

#BlowupLens is adding white space to bottom of page on load

You can see in your demo, the #BlowupLens div is causing extra space at the bottom of the page until you hover over the image and trigger it to be moved.

You can see what I mean here: https://ibb.co/1QC0Q2X

I fixed this giving the #BlowupLens a default style of:

#BlowupLens {
  left: 0;
  top: 0;
}

Perhaps you can give it's default inline style these values.

hi,How to shut down blowup,help me

Lens not working properly when changing source of img

Hello there :)

I have tested blowup.js and it is working well with the first image. But if I change the source of my tag the zoomed image does not change.

I tried the following:

 $("#BlowupLens").remove();  (Removing the "BlowupLens" div via jQuery)
 $("img").blowup();    ( Using the .blowup function again after I changed my source)

Now the image is updated. But while moving the mouse the lens is white, and when I stop moving the zoomed image appears. I added screenshot to illustrate this

Thank you in advance !
Lessad

While Moving Mouse

Mouse Stopped

paulkr / blowup.js Goto Github PK

blowup.js's Introduction

blowup.js

Usage

Configuration Parameters

Example

blowup.js's People

Contributors

Stargazers

Watchers

Forkers

blowup.js's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs