jquery mb.imageNavigator
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.
demo page:
http://pupunzi.com/#mb.components/mb.imageNavigator/imageNavigator.html
download page:
http://mbideasproject.googlecode.com/files/jquery.mbImgNavigator.2.0.zip
jQuery project page:
http://plugins.jquery.com/project/mbImgNavigator
Releases:
2.0 (NEW!)
Major issue released:
- Solved the containment issue; now the image never goes out from the screen!
It needs the jQuery UI 1.7.1
1.8.0
Major issue released:
- Now yo can define paramiters without writing custom attributes on the tag, and the component is W3C compliant!:
>> before
<divimageUrl="iStock_2.jpg"navPosition="TR"navWidth="100">
>> Now
<div style="display:none;">
You can still use both sintax, but if you want to be w3c compliant than you nee the second one and you have to include jquery.metadata.js in your page. - you can add an additional content layer that overlay image and moves with it:
Ex:
<div style='color:white; font-size:100px; top:0; width:1000px; height:1000px; text-align:left;'>
this is an additional content div that is over the image and it moves with it!
</div>
dependencies:
jquery.js (1.3)
ui.core.js (1.7.1)
ui.draggable.js (1.7.1)
How does it work:
here is the js call:
$(function(){
$("#navArea").imageNavigator( {
areaWidth: 700,
areaHeight:500,
draggerStyle:"1px dotted red",
navOpacity:.8
})
})here is the code for each container:
<div id="navArea"><div imageUrl="DSC00844.JPG" navPosition="BR" navWidth="100" style="display:none;">
<span>zuccheriera</span>
<div><STRONG>description1</STRONG></div>
</div></div>
Params:
areaWidth and areaHeight are the width and the height of the display;
draggerStyleis the style of the draggable rectangle on the thumb;
navOpacity is the alpha opacity of the thumb on the image.
Then, on each element, you set the url of the big image (imageUrl), the position of the thumb (navPosition : BL, BR, TL, TR) and the width of the navigator(navWidth);
there is a span with the title of the mage, and a div with the description.
You can navigate your image either dragging the big one or dragging the navigator into the thumbnail; if you want to see all the image in the display just doubleclick on the image or on the navigator; to restore the view doubleclick again.
That’s all; Enjoy yourself!
Hello Matteo,
You’ve developed really amazing collection of plugins.
I need to use a plugin like imageNavigator in one of my project, in which I’ll be using imagemap with the images wrapped in imageNavigator. Could you please give me any idea how can I approach that?
Thanks,
Moiz
Thanks for all you’ve done. I am working regularly with a couple of your plugins already and the results are wonderful. And now I’ve ht my first snag using imagenavigator. I can’t seem to get it to load an image (and the tabs are stuck) whenever I use it in any type of modal dialog. I’ve tried about 6 different “lightboxes” and jQuery’s Dialog with the same results. Please help. Thanks.
-Sean
I can’t get this to work in IE9.
here’s the url: http://give.fit.edu/sslpage.aspx?pid=2043
I’ve tried it straight from the download with no tweaks and it doesn’t work in IE. I didn’t see any tweaks for IE. Do you happen to have a fix?
with no tweaks straight from the download file:
http://development.fit.edu/jquery.mbImgNavigator/demo1.html
I love you work by the way.
Thanks. Really appreciate it as it’s a perfect effect for the floor plan page I’m trying to use it for.
Hi again.
I have it working really well and it looks great but it just doesn’t’ work in IE9. Definitely will contribute to your efforts via paypal as your script is outstanding and the best solution for what I’m trying to do on this page. http://give.fit.edu/sslpage.aspx?pid=2043
I’m an artist as well. I do a lot of different stuff but coding I could never really pick up. check out my site if you get a chance. http://www.byronking.com. your site is truly amazing. i wish i had your gift for programming. I’ve been doing web stuff about as long as you and I’m still a total hack. Your a truly talented artist mate. Keep up the great work.
peace… have a great weekend.