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/
[…] Source Demo […]
It doesn’t work, using Chrome.
on Chrome 5.0.375.29 beta Mac it’s working fine…
Which is your problem?
It doesn’t work.
Hi Jim,
In which browser did you test it?
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
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
Great resources!
Thanks…
ST
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!
[…] the task of displaying a big image inside a controlled environment. I could have used a plugin like MbImgNavigator or ImageZoom. I implemented both but I wasn’t particularly satisfied with […]
[…] (mb)ImgNavigator 2.0 […]