The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
(mb)ImgNavigator, a photo gallery for extralarge images!
A photogallery for extralarge images with navigator.
You can drag your extralarge image in the display by the navigator or the image itself.
Enjoy yourself into images!
dependencies:
jquery.js(1.3)
ui.core.js (1.6rc5)
ui.draggable.js(1.6rc5)
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 image:
<div id="navArea">
<div imageUrl="DSC00844.JPG" navPosition="BR" navWidth="100" style="display:none;" class="imagesContainer">
<span class="title">zuccheriera</span>
<div class="description"><STRONG>description1</STRONG></div>
</div>
[...]
</div>Params:
areaWidth and areaHeight are the width and the height of the display;
draggerStyle is 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.
demo page: http://pupunzi.wordpress.com/2009/01/20/mbimgnavigator/
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!
