jquery mb.imageNavigator

imgnav

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.

W3C compliant

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

    <div imageUrl="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!

Comments
4 Responses to “jquery mb.imageNavigator”
  1. Moiz says:

    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

Trackbacks
Check out what others are saying...
  1. [...] to the component page: http://pupunzi.open-lab.com/mb-jquery-components/mb-imagenavigator/ Possibly related posts: (automatically generated)jQuery (mb)MaskedGallery 1.8 (new!)Simple CSS [...]

  2. [...] autor pone a disposición de todos su descarga y la demo, por lo que no podemos quejarnos, sino dar las [...]

  3. [...] الرابط :  http://pupunzi.open-lab.com/mb-jquery-components/mb-imagenavigator/ [...]



Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>