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