natashawylie / iviewer Goto Github PK

Rotate value of 90 or 270 doesnt work. It is setting 90 as 180 degrees rotate and giving error on containerToImage in js file

TypeError: coords is undefined
return { x : util.descaleValue(coords.x, this.current_zoom),

Have a bit of a problem with rotate. If you set angle 90 the co-ordinates of imagetocontainer is not correct. it is still reading the co-ordinates of the image before the rotate. If you go to 270....it gets worse. The co-ordinates are very far out.

Any ideas? I assume its not rotating on center point and hence throws them off?

hi coders,
after loading with zoom:100
my iviewer image (embedded in a centered div) has a css rule left:-200px and is half hidden

ok i can move with mouse for full sight

and a window.trigger("resize") helps for future image loading

but is there an more elegant way to setcoords or another trick

thanks

marc

just a question, can i use the plugin on a div even if its content is not an image? i want to zoom the content of a div

You can add the option Pan?.
Currently I am simulating through the mousemove event (x, y). on the image.

$("#iviewer").mousemove(function (e) {
    //var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
    var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";

    viewer.iviewer('moveTo', e.clientX, e.clientY);
});

But this causes the transition is choppy.

This is a site to prove the above.

http://kilowatt.softwarearm.com/Campa%C3%B1a.aspx

You need to click on the image to enable dynamically iViewer

From already thank you very much.

Hi,

How can i add a svg object over my img, wich reacts in the same way (zoom, drag, etc) as my img?

Thank in advance,

It turns out it was because bootstrap's CSS sets 'max-width': '100%' on ALL img elements. This makes the image distort and slide about if you zoom in too far (at least it does on chrome).

Fixed it by changing: .css({ position: "absolute", top :"0px", left: "0px"})
to: .css({ position: "absolute", top :"0px", left: "0px", 'max-width': 'none' })

in this.load()

I have tested and implemented (http://arqhis.diocese-vilareal.pt ) your great plugin, and it zoom (touch zoom) fine with ipad / iphone, but i can't get it to zoom with my android tablet. Is it the right behavior or am i missing something?

Best Regards,
Jorge Borges

Hi,

I am currently using iviewer and all works great. However I am using this plugin on a ajax updatepanel and this gets refreshed every few seconds. Because of postbacks when a user has zoomed in i get the zoom value using the info method and then store the value in hiddenfield and when a postback occurs i and page loaded i then set the zoom value. But now i want to get the info method to get me the x and y positions and then set them ..

Please can you give me some guidance on how to do this? Or can you include this in the next version release?

The lightbox example included in the archive uses initCallback, which has been removed from the API.

Hi,

I have already set "update_on_resize: true" even though when i resized the window image is not get resized automatically i have to refresh the page.

Please suggest, how could i update the canvas on window resize.

Thanks
pratik91s

Hi,

when I try to set multiple properties (e.g. angle, zoom, coordinates) at the same time the image is not properly placed within the canvas.

Example:
If you try something like

 $('#iviewer').iviewer('angle', 90).iviewer('set_zoom', 200).iviewer('setCoords', -500, -500);

the angle and zoom is set correctly but the image is not placed with the given coordinates. If you now start to drag the image it jumps to the correct coordinates.

Thanks in advance for your help.

In Google chrome, after rotating image, try to zoom in and zoom out. Some border type lines appear on the background white space. This is only in chrome, I have checked other browsers it is working fine.

I'm working on a project that acts as a document viewer (scanned text pages and the like) It's a requirement for me to have a rotation function, so I've been using CSS3 transforms tied to JS so we only rotate at 90 degree angles. This works great in modern browsers with the exception of the height and width not switching for the purposes of panning. It's still detecting the boundaries of the image as if it were in it's original orientation. In other words, if I start with a tall "portrait" image, and rotate it to be a wide "landscape" image, it is still behaving like a portrait image when I try to drag the image while zoomed in.

I was hoping the update() or update update_container_info() would help me out, but no. I don't mind editing the plugin if you tell me which function to look in and which variables define the bounding box for panning.

Thanks, I tried a few plugins like this and this one is the best and most extensible yet.

By the way: http://mocavo.com/docs/A-brief-genealogy-of-the-Usher-family-of-New-England-1869#0
Is an example of what I'm working with here.

I've been trying iviewer and it works great, but when i try to show an image over 4000 x 5000 px it' starts to slow down, on firefox is acceptable but not in chrome. Thanks and great work.

The grab and move doesn't work on an Ipad. Does anyone know how to fix this?

On line: 123
useIeTransforms = (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) <= 8);

jQuery.browser was removed from jQuery 1.9+ and code needs updated to use http://api.jquery.com/jQuery.support/

Hi, thank for the plugin works great, i found an issue, i cant get to work properly the moveTo function, i get the icons in the layout but the behavior isnt right, thanks you.

I let a piece of the code below:

$("

Hi,
first of all: thanks for this nice piece of code!

In the documentation there is a note about an "update()" method.

I wanted to use this in order to update two differently sized views after swapping their images and let them be placed centred on their new position.

The problem is: I can't find the method. Am I doing something completely wrong or is it really missing?

Thanks in advance for respone!

Call to moveTo() function has no effect.
I chaged follow two lines and it seem work now:

    moveTo: function(x, y)
    {
        var dx = x-Math.round(this.settings.width/2);
        var dy = y-Math.round(this.settings.height/2);

        //byBerny  3/6/2011          
        //var new_x = this.img_object.x - this.dx;
        //var new_y = this.img_object.y - this.dy;
        var new_x = this.img_object.x - dx;
        var new_y = this.img_object.y - dy;

        this.setCoords(new_x, new_y);
    },

Hope this help.

Hello,

I'm new to coding and I was wondering if the image's current width, height and position values are already in some variables. I would like them to show up next to the viewer and update as I'm panning the image. Would this be possible?

Thanks :)

This line gives error in 0.7.7 verion of jquery.iviewer.js (and does not exist in min.js version). The minified version works for me perfectly, but not the un-minified version for this reason.

Line 132:
if ( !contains(prop, "-") && mStyle[prop] !== undefined ) {

Fix:
// if ( !contains(prop, "-") && mStyle[prop] !== undefined ) {
if ( prop.indexOf("-") == -1 && mStyle[prop] !== undefined ) {

Also, have you considered using some type of transparency on the side of the viewable cropping area like Twitter? This makes the UI much more intuitive; the lighter opacity on the sides gives the user a very clear hint that they can move the image.

I'm using iviewer for an online image gallery.

I was previously using the code below for a 'next' button to cycle through the images in the gallery (which are all named 001.jpg, 002.jpg, 003.jpg and so on):

var i = 1; $("#next").click(function(){ i++; iv1.iviewer('loadImage', "/folder/" + ("00" + i).slice(-3) + ".jpg"); return false; });

However, the problem is that elsewhere on the same page I'm using some jquery code to change the displayed image in the iviewer on the basis of the class attribute of the relevant links (which are numbered similarly to the images - chimg001, chimg002 and so on):

$("ul.imageThumbs > li > a").click(function(){ var k = $(this).attr("class"); iv1.iviewer('loadImage', "/folder/" + ((k).slice(-3)) + ".jpg"); return false; });

When I use this code to change the image and then try to cycle through using the 'next' button, the 'next' function doesn't refer to the new image source, but only the initial image source of the iviewer.

Is there any way of changing the image src in iviewer by adding or substracting 1 to the current image src name?

The comment header of iviewer currently includes

• Author: Dmitry Petrov
• Version: dev
• Date:

It'd be useful if you started providing version numbers and dates.

Thanks,
Sam

Hi,

I tried to integrate the Lightbox2 in wordpress but it isn't working, (I just got the image in a new page) do you have any idea of what i should change in order to make it work ? (Or just some clues, I'm not very good)

Thanks.

When I load a new image using the iviewer.loadImage() function, the image picks up the size of the previous image.

Looking at the code, the issue in the loadImage() function.

this.img_object.object.unbind('load').
    removeAttr("src").
    removeAttr("width").
    removeAttr("height").
    css({ top: 0, left: 0 }).
    load(function(){

The problem is that the width and height are not controlled by the width and height attributes, but by inline CSS width and height.

I've fixed this issue locally by replacing the css() line with

    css({ top: 0, left: 0, width: '', height: '' }).

first a big thank you to the author of this plugin, it is a great addition to my tool chest.
I am using iviewer to provide zooming to images in a view pane that is loaded via ajax after the page is loaded. When clicking the "+" zoom-in button several times so the image is displayed at it max setting (800%) and then clicking the "fit" button the image disappears. The zoom factor is correctly displayed in the status display and when clicking the zoom-out button the image starts showing again. Clicking then the fit button puts the image somewhat above the view port so just the lower third of the image shows.

I found that changing line 227 in iviewer.js from this.set_zoom(new_zoom); to this.set_zoom(parseInt(new_zoom)); will fix the problem. Why? I have no idea. Does anybody have an idea why this is happening?

When removing the mousewheel plugin or the reference to it, the images disappear (Firefox 3.6.12) - they stay white. No errors in the Firebug console or a clear reference in the core plugin to the mousewheel plugin.

I thought it was possible to remove the plugin, as the homepage says "For zooming with mousewheel requires jquery.mousewheel plugin". Implying that it can live without.

In a previous version of iviewer I was getting:

this.options.width,
this.options.height,
this.img_object.orig_width,
this.img_object.orig_height

...from within the callbacks. Now those are unavailable, what is the best way of getting at them?

Also, what is the best may of getting the src of the loaded image?

Many thanks for a great plugin!

The image will not be loaded in Internet Explorer 8 if it is cached in the browser.

It seems the problem can be fixed by letting the manipulation of the this._img-object (in this.load) happen before the "var img = new Image()" actions. This fix seems to be working fine in IE8/9, Firefox and Chrome.

Destroyed iviewer on clicking a button. Using the below code.
$(selector).iviewer('destroy');

How to create/re-enable this. i tried using
$(selector).iviewer('update'); - Not working

Hello:

Great job iviewer zoom tool is really great.
My problem is that I dont need pixel interpolation after zoom an image, for me Its really important to left pixels as they are.
The issue happens with IE, Opera and Firefox I dont really know if its matter of iviewer or web explorers, anyway I really appreciate if you can give me a solution.

Best wishes
Walter

I'm a beginner Rails programmer. Help integrate "iviever" with Rails.

Hello... I am having a issue.. Will you please correct me where i am going wrong ? Whenever the Ajax Modal Popup Extender Opens up... All the buttons on the Canvas like Zoom-In, Zoom-out etc get disabled ?

How can i enabled that ? whenever the Modal Popup Extender Opens Up ?

Is there a function to set the x and y position of the image on load. Basically we have an app that submits info to server, it regenerates the view but we want user to have image in same position as it was before refresh

set_zoom works great for setting the old zoom level, but is there an abilitity to set x and y?

I find it a bit inconsistent to have onAfterZoom / onStopDrag / onFinishLoad for similar events (fired after the onZoom / onDrag / (onLoad) ). Wouldn't it be more convenient to name them consistently onAfterZoom / onAfterDrag / onAfterLoad for instance?

There should be more callback events available in the settings.

One callback event that would be especially helpful is a afterZoom callback, so other elements can get update themselves, and access the new size of the image. Currently the only zoom callback is called before the zoom, so the callback can only access the previous size of the image.

Disregard.

Hi,
I think iviewer works very well.

Do you think it's possible to change img tag with HTML5 canvas tag?
I tried to change some part like this.img_object.object = $("") on row 129 but with no luck.

In version was the effect when the image loaded is not now.

It shows a small box in the upper left corner and sometimes does not load the image on the canvas.

Thank you.

I got an js error while running the demo index.html(TheWorld Chrome a branch of Chromium 17.0.963.79 and on Opera 12.16).

Here's the error log on the console:
Uncaught ReferenceError: contains is not defined
(anonymous function) jquery.iviewer.js:132
(anonymous function) jquery.iviewer.js:137
(anonymous function) jquery.iviewer.js:1169
index.html:13

Uncaught TypeError: Object [object Object] has no method 'iviewer'
(anonymous function) index.html:13
f.Callbacks.n jquery.js:2
f.Callbacks.o.fireWith jquery.js:2
e.extend.ready jquery.js:2
c.addEventListener.B jquery.js:2

I got no errors while running index.html of user sap1ens.

Hope to fix the problem, thx.

Hello,

I'm using iviewer with the lightbox demo, it's working great execpt that I can't seems to be able to use any method or option.
I want to load the image with a zoom of 50% instead of fit, it's all fine just I can't understand how to call the center() function. Because my image being smaller than the container I want is center by default.
I'm sure it's very easy but I try everything and it never work.

I also try to set a max zoom and min zoom but it doesn't work.

I use the example for lightbox and almost didn't change anything.

var viewer = $("#iviewer .viewer").
width(920).
height(560).
iviewer({
src : src,
ui_disabled : true,
zoom : '50%',
zoom_min: '50%',
zoom_max: '300%',
initCallback : function() {
var self = this;

            },
            onZoom : function() {
                if (!firstZoom) return;

                $("#iviewer .loader").fadeOut();
                $("#iviewer .viewer").fadeIn();
                firstZoom = true;
            }
        }
    );

Thanks for the help.

That plugin is just awesome!
It would be nice to have an option to disable the mousewheel.
Bye bye

I'm using the IViewer in a light box style set up. When a user clicks a thumbnail to display the image in IViewer, closes the image, and redisplays the image, the image doesn't display correctly. The reason for this is that the img 'load' event doesn't fire if the src of the img doesn't change.

Based on http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached/3877079#3877079, I've updated the loadImage method to have the load as follows.

        this.img_object.object.unbind('load').
            removeAttr("src").
            removeAttr("width").
            removeAttr("height").
            css({ top: 0, left: 0, width: '', height: '' }).
            one('load', function () {
                me.image_loaded = true;
                me.img_object.display_width = me.img_object.orig_width = this.width;
                me.img_object.display_height = me.img_object.orig_height = this.height;

                if (!me.container.hasClass("iviewer_cursor")) {
                    me.container.addClass("iviewer_cursor");
                }

                if (me.options.zoom == "fit") {
                    me.fit();
                }
                else {
                    me.set_zoom(me.options.zoom);
                }

                if (me.options.onFinishLoad) {
                    me.options.onFinishLoad.call(me);
                }

                //src attribute is after setting load event, or it won't work
            }).
            attr("src", src).
            each(function () {
                // Ensures load event fires even if src hasn't changed
                if (this.complete) $(this).load();
            });

Hey mate, regards from Serbia!

I was using your previous version of iviewer and it was working pretty fine. But when I switched to a new version with smooth zooming I have noticed that all loaded images have the absolutely same proportions like the one which is initially loaded. On your new demo its also like that when you click on ,,change image" link . So If I am in ,,fit" mode all images which will be displayed in absolutely same dimensions (same width and same height). So it isn't a big difference on your demo , but try to change an horizontal oriented image with the vertical one, and you will surely notice the problem.

If you can, please reply to [email protected] or just notice me when you post your answer here.
Thanks in advance!

Hi,

In my app I'm using dojo but I use iviewer to display image.
In dialog window where dimensions for container div has values in pixels whole working fine, but when I used iviewer in container component where width and height ar set to 100% the function fit on load dosnet work.
I modified fit function:

fit: function(skip_animation)
{
this.options.height = $(this.container).height();
this.options.width = $(this.container).width();

    var aspect_ratio = this.img_object.orig_width() / this.img_object.orig_height();
    var window_ratio = this.options.width /  this.options.height;
    console.log("CONTAINER w:" + this.options.width + "  h:" + this.options.height)
    console.log("IMG w:" + this.img_object.orig_width() + "  h:" + this.img_object.orig_height())
    var choose_left = (aspect_ratio > window_ratio);
    var new_zoom = 0;
    if(choose_left){
        new_zoom = this.options.width / this.img_object.orig_width() * 100;
    }
    else {
        new_zoom = this.options.height / this.img_object.orig_height() * 100;
    }
  this.set_zoom(new_zoom, skip_animation);
},

And this.options.height and this.options.width has values set to 100 (on load on console i'm getting : 'CONTAINER w:100 h:100'. I suposed it is value from percent.
And image is displayed in left upper corner.
Strange is that, when I try to drage image (little bit), it swap to center and values for : this.options.height, this.options.width are now correct.
Second think is when I manually fit (by click on button) it will work (corect values)

I'm working with iviewer but I'm having some problem to fit the image to the container on start.
My container is w 398px and h 378px, but the image has alwasy a width of 600px and a height of 570px.
Is it a bug or am I wrong?

I'm using the Version: 0.5.3

There should be some kind of loading screen or simply function showing small image until main picture is loaded and positioned into coords. This would be useful when using big picture that takes some time to fully load.

Problem caused by this part of code (lines 883-887):
self._img
.removeAttr("src")
.removeAttr("width")
.removeAttr("height")
.removeAttr("style")
.css({ position: "absolute", top :"0px", left: "0px"})

it looks like .removeAttr("src") triggers some browsers (this problem appears in Safary 4.0.3 Win, Safary 5.1.7 Mac, MSIE 7-8) to perform GET request to same page URL.
As a transitory solution I've removed .removeAttr("src") (line 884) and this is solved the issue.

Hi, a wee suggestion: when you zoom in/out using a scrollwheel, could it focus on the position of the mouse rather than just the centre of the image?