jQuery (mb)ImgNavigator 2.0 (New!)
Navigate into extralarge images!
A photogallery for extralarg images with navigator.
You can drag your extralarge image in the display by the navigator or the image itself.
Enjoy yourself into images.
Go to the component page: http://pupunzi.open-lab.com/mb-jquery-components/mb-imagenavigator/
Tnx!
Great work!
thanks!
I found out a bug:
I left a “console.log()” call in the code that make the component unusable on explorer and on firefox without console active.
I fix this bug so if you found problems please download it again!
thnx,
Matteo
This is a wonderful tool. I just need it to do one more thing. If you give me some pointers, I can get it done.
I want to be able to add some notes or symbols that attach to the image. They should float above the image but below the inset window. They must also move with the image as if they’re attached to it.
I’ve tried several different ways of adding the DIVs but I can’t seem to make them follow the underlying image when it’s dragged.
If you can help, I would be grateful.
Thanks for all of the work you’ve done so far. It’s a great tool.
This is great! Can you let me know if it’s possible to have the navArea start zoomed out – then double click to zoom in and pan around the image?
Thanks! + D .
Hi Dana,
Thnx, I’ll get your suggestion for next release,
bye,
Matteo
Hi Matteo,
Excellent work here, I’m using several of your jQuery components.
I think I have found a bug today… I haven’t found too much time to check it and see the real cause, but in explorer, and in chrome (in Windows XP) I’m getting the same behavior.
I have a mbImgNavigator in a mbContainerPlus. When I hit F5 to recharge the page, the browser increase its memory usage and keeps growing (about 16 Mb each time)
I belive the problem is in mbImageNavigator but I can’t really tell.
bye Limo
Hi Limo,
I’ve to make some test…
Never notice this behaviour,
Thnx for your help,
bye
Matteo
Have a little bug when I drag to right side or down side. The small window will disappear. I use Firefox 3
Hi Dominix,
that’s a known bug… but I don’t have any solution at the moment…
hope soon,
bye
Matteo
Very nice plugin, I’m using it on http://cnipsy.fr
!)
(student association for those who don’t understand french
I customized it a bit, only by css, and I now have a problem with mouse pointer, that only show “move” cursor.
Users asked if dragging images could be stop when reaching the border to not show the black background.
If you have any idea, I would be glad to have a try…
Mael
Hi Mael,
I’m still working to solve the border bug (it’s not really a bug, it depends to the jQuery.UI draggable and I couldn’t find a way to limit the draggable area…).
As soon as I solve it I’ll publish a new release.
Bye,
Matteo
Did you find something about the cursor bug ?
Hi Mael,
I solved the reaching border bug,
you can download the latest 2.0 release;
it works only with jquery 1.3.2 and the UI 1.7.1; so, if you where using previous version you have to upgrade.
Bye,
Matteo
Hi,
I updated my ImgNavigator, it works fine !
I just had to disable cursor type from “move” to “default” to avoid it staying at “move” state” on the whole page instead of only on the navigator.
It is on line 320 :
function refreshThumbPos(x,y){
$(document.body).css({
cursor:”move”
});
ratio= imageH/navH;
var posX=-(arguments[0]+1)/ratio;
var posY=-(arguments [1]+1)/ratio;
$(navLocator).css({
top:posY,
left:posX
});
}
I can’t figure how to fix it .
Anyway, the border feature is just great !
Hello,
I fixed the cursor like by removing it from document, but it would be better if the move cursor could appear at hover in the imgNavigator DIV.
Any pointer ?
Hi Matteo,
excellent work. I addded a NaN-check of posX & posY in
funktion: refreshImagePos to work in the IE. The other browsers had no problem with it.
Thanks
Wolfgang
Hi, thank you for the great plugin! I was looking for something like that for ages as my images are terribly large (eg. 18954px height)
I’ve was implementing this plugin when I notice it wasn’t working well in IE.
After digging into your code, and with your helpful console log comments, I figured out that you forgot to add the check for navCoordinates for image[0].
Thus if navCoordinates are set, the initial load for image[0] will not define the navCoordinateX and Y.
I’ve added:
if ($(images[0]).attr(“NavCoordinates”)){
navCoordinateX=$(images[0]).attr(“NavCoordinates”).split(“,”)[0];
navCoordinateY=$(images[0]).attr(“NavCoordinates”).split(“,”)[1];
}
after
var navWidth= $(images[0]).attr(“navWidth”)?$(this).attr(“navWidth”):imgNav.options.defaultnavWidth;//100;
and it is working fine now.
As again, thank you very much for the great plugin!
Great resources!
Thanks…
ST
I’m trying to place my google map divisions inside an mb container – but the two are not playing well together.
http://www.stjohnhistoricalsociety.org/Maps6.htm is without mb_c.
http://www.stjohnhistoricalsociety.org/Maps9.htm is using mb_c.
Comparing Maps6.htm with Maps9.htm finds at least 3 differences:
1) the internals of “map navigator” windows differ;
2) All the map placemarks do not appear within the mb_container
3) Not all the map tiles appear within the mb_container
4) The map zoom controls are messed up within the mb_container.
————
Because of a an overlooked css file earlier today, I couldn’t get Maps9.htm to work at all on the webserver, just locally — so I made a (lousey)video to show you the differences:
http://blip.tv/file/get/Sjhs-ProblemsPlacingGoogleMapDivsWithinAMb_container895.flv
should be uploaded in 20 min
The video link is http://blip.tv/file/2732904
oddly, google maps api has a method called checkResize() which needs to be called whenever the map container size changes. So I changed the buildContainers code to be
$(“.containerPlus”).buildContainers({
containment:”document”,
elementsPath:”Includes/mb.containerPlus.2.3.2/elements/”,
onResize:function(o){mapResize();},
onClose:function(o){},
onCollapse:function(o){},
onIconize:function(o){mapResize;},
onDrag:function(o){mapResize;},
onLoad:function(o){}
});
Much better behavior now.
Did I get all the events?
Also I should have posted this report on the mbContainer page – not on the mbImgNavigator page!
Hi Peter,
you should set the mapResize() function to be call also for
onRestore:function(o){});And you can remove it from onDrag event. (the correct sintax is the one you wrote on the onResize callback function: mapResize(); with parentesis).
The starting problem (the container size once you restore it from iconized state) should be solved by giving a with and a height to the container; and maybe I would remove the grid parameter from the container so that when you drag it it’s more fluid. For the rest it’s working fine for me…
Bye,
Matteo
It doesn’t work.
Hi Jim,
In which browser did you test it?
It doesn’t work, using Chrome.
on Chrome 5.0.375.29 beta Mac it’s working fine…
Which is your problem?