marcaube / bootstrap-magnify Goto Github PK

Help, please!

http://stackoverflow.com/questions/43701026/magnifying-glass-for-images-dont-work-in-bootstrap-modal/43715561#43715561

using .container for the magnify screws up the main container and any other .container on the page. htm5

with square instead of circle?

Hi,
this is not really an issue but an enhancement.
For personal need I changed the code of your .js file... as I'm not either a good developper :( I just tell you what I've done.
I have a list of students in a table (.condensed) with a portrait picture (.rounded) of 100px reduced to 30px by CSS to not extend the row height.
Then I used your magnify plugin to allow the view of the orginal 100px portrait image size.
But in the actual behaviour I get the squared image corner and this was not really good looking.
So I try to follow your code and understood that the var bgp was calculated to change with the mouse position.
So I just change your code from:
//var bgp = rx + "px " + ry + "px";
to:
var bgp = "0px 0px";
I get exactly what I wanted.
May be this could be an option?

Do you have a destroy function to remove magnify on image
Because I'm reloading a new image and then execute magify but I still have a ghost of the previous image magnifyed.

thanks for advance

How to set the magnification ratio?

Hi,

I am using your library for magnifying a photo gallery in WordPress, but I got a problem because working on very variable widths/heights for my images. So, as a result, some of them would not be magnyfied as well.

For example, this works very well with a photo 1200x800, but looks not so fine when I magnify a 800x600 one.

Is there a way to enable / disable effect at run-time (switching data-toggle="magnify", if possible), i.e. after checking width/height of current image?

What is the "minimal" size for having a good zoom effect without affecting responsiveness?

i suggest to add:

this.$element.siblings(".magnify-large").css("background", "url('" + r.attr("src") + "') no-repeat");

in order to update background image when ng-src has been evaluated

so the check funciton become..

check: function (t) {
            var n = e(t.currentTarget), r = n.children("img"), i = n.children(".magnify-large");
            if (!this.nativeWidth && !this.nativeHeight) {
                var s = new Image;
                this.$element.siblings(".magnify-large").css("background", "url('" + r.attr("src") + "') no-repeat");
                s.src = r.attr("src");
                this.nativeWidth = s.width;
                this.nativeHeight = s.height
            } else {
                var o = n.offset(), u = t.pageX - o.left, a = t.pageY - o.top;
                u < n.width() && a < n.height() && u > 0 && a > 0 ? i.fadeIn(100) : i.fadeOut(100);
                if (i.is(":visible")) {
                    var f = Math.round(u / n.width() * this.nativeWidth - i.width() / 2) * -1, l = Math.round(a / n.height() * this.nativeHeight - i.height() / 2) * -1, c = f + "px " + l + "px", h = u - i.width() / 2, p = a - i.height() / 2;
                    i.css({left: h, top: p, backgroundPosition: c})
                }
            }
}

Hello, @marcaube. Thank you for sharing such a nice and easy-to-use magnifier. Recently I used it in one of my webapps to magnify the details of images. And I found the following interesting "bug".

I am using bootstrap-magnify with Bootstrap figure in the following way.

<figure class="figure">
    <img data-toggle="magnify" src="{{ image_info.image_file }}" class="figure-img img-fluid rounded">
</figure>

For some images, they are not as wide as figure and so the image area only occupies part of the width of figure. In this case, when I hovel my mouse outside of the image, there is still magnified content of the image.

Since I am not an expert of Bootstrap, I would like to know whether you could shed some lights on this issue. Thank you.