natashawylie / iviewer Goto Github PK
View Code? Open in Web Editor NEWimage viewer plugin for jquery
image viewer plugin for jquery
I'm a beginner Rails programmer. Help integrate "iviever" with Rails.
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!
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.
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)
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
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
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.
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
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.
The comment header of iviewer currently includes
It'd be useful if you started providing version numbers and dates.
Thanks,
Sam
The grab and move doesn't work on an Ipad. Does anyone know how to fix this?
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.
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?
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.
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
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.
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!
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?
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?
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
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
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.
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.
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?
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?
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),
That plugin is just awesome!
It would be nice to have an option to disable the mousewheel.
Bye bye
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.
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 ?
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();
});
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!
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.
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/
The lightbox example included in the archive uses initCallback, which has been removed from the API.
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: '' }).
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.
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 :)
Disregard.
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()
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?
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.
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.
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.
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,
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
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:
$("
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.