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.
2.0
Major issue released:
- Solved the containment issue; now the image never goes out from the screen!
It needs the jQuery UI 1.7.1
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!