Matteo Bicocchi's Blog

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
  <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:

here is the code for each container:

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!