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.

2.0

see the demo download it

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
})
})

$(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>

<span>zuccheriera</span>

<div><STRONG>description1</STRONG></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!

15 Responses

Giacomo January 23, 2013 at 1:51 pm · Reply →

Ciao Matteo,
ho trovato il tuo sito quasi per caso e me ne sono innamorato,veramente molti complimenti.
A questo proposito però ho un problema.Stavo cercando di scaricare tramite il link che tu fornisci qui sopra,la demo del JQuery, ma appena lo apro carica l’immagine ma non riesco a fare il drag.la console mi da i seguenti errori:

TypeError: c.browser is undefined
[Interrompi per questo errore]

…d){d=d||this._uiHash();a.ui.plugin.call(this,b,[c,d]);if(b==”drag”){this.positio…

ui.dra….min.js (riga 13)

TypeError: a.ui is undefined
[Interrompi per questo errore]

…d){d=d||this._uiHash();a.ui.plugin.call(this,b,[c,d]);if(b==”drag”){this.positio…

ui.dra….min.js (riga 13)

TypeError: $(…).draggable is not a function
[Interrompi per questo errore]

stop:function(e,ui){

TypeError: $.browser is undefined
[Interrompi per questo errore]

if($.browser.msie) $(nav).hide();

A che cosa possono essere dovuti?io non ho cambiato nulla dal pacchetto che ho scaricato…
Grazie dell’aiuto!
1. Giacomo January 23, 2013 at 3:33 pm ·
  
  edit: ci sono riuscito..ora il mio intento e quello di creare con il tuo jquery un effetto tipo questo:
  http://www.tomdixon.net/products/eu/lustre-light-square. cioè con l’immagine che non parte in zoom, e al clik di un div posto in alto a sinistra si apre lo zoom e compare la thumb.
  Potresti aiutarmi grazie?
2. Matteo Bicocchi January 23, 2013 at 11:32 pm ·
  
  Ciao Giacomo,
  Forse potresti usare quest’altro componente sempre fatto da me: http://pupunzi.com/#mb.components/mb.zoomify/zoomify.html
  
  due demo:
  http://pupunzi.com/mb.components/mb.zoomify/demo/demo_overlay.html
  http://pupunzi.com/mb.components/mb.zoomify/demo/demo_screen.html
  
  Mi sembra che abbia caratteristiche più vicine a quelle che mi descrivi.
  
  Ciao,
  Matteo
Yohann October 19, 2012 at 9:58 am · Reply →

Hello, Very nice plugin but one problem. with the adblock plus chrome extension, the plugin displays a black screen when you move the draggableelement.

This is the error: https://adblockplus.org/forum/viewtopic.php?p=60005#p60005

Do you know how to at least avoid this error ? Lots of people use adblock

Thanks in advance !
1. Matteo Bicocchi October 19, 2012 at 3:15 pm ·
  
  I realy don’t know How to solve it but removing the adblock plugin
  As I can reed from their site:
  
  We are currently working on providing the same experience for Google Chrome as what you are used to from Firefox. Please keep in mind that we are not there yet and much work still needs to be done. There are also known Google Chrome bugs and limitations that need to be resolved.
  
  Sorry,
  Matteo
2. Yohann October 19, 2012 at 3:18 pm ·
  
  Thanks for the fast answer. I have good news, I tested last dev build of adblock plus and it’s working. So we just have to wait the release
  
  Yohann.
licson June 9, 2012 at 9:30 am · Reply →

This works great! But, can I bind a mousewheel event to zoom in? It’s perfect if I can zoom in using mousewheel. Great work!
byron kingg July 21, 2011 at 9:20 pm · Reply →

I can’t get this to work in IE9.

here’s the url: http://give.fit.edu/sslpage.aspx?pid=2043

I’ve tried it straight from the download with no tweaks and it doesn’t work in IE. I didn’t see any tweaks for IE. Do you happen to have a fix?

with no tweaks straight from the download file:
http://development.fit.edu/jquery.mbImgNavigator/demo1.html

I love you work by the way.

Thanks. Really appreciate it as it’s a perfect effect for the floor plan page I’m trying to use it for.
1. byron kingg July 22, 2011 at 9:49 pm ·
  
  Hi again.
  
  I have it working really well and it looks great but it just doesn’t’ work in IE9. Definitely will contribute to your efforts via paypal as your script is outstanding and the best solution for what I’m trying to do on this page. http://give.fit.edu/sslpage.aspx?pid=2043
  
  I’m an artist as well. I do a lot of different stuff but coding I could never really pick up. check out my site if you get a chance. http://www.byronking.com. your site is truly amazing. i wish i had your gift for programming. I’ve been doing web stuff about as long as you and I’m still a total hack. Your a truly talented artist mate. Keep up the great work.
  
  peace… have a great weekend.
Sean January 28, 2011 at 7:45 pm · Reply →

Thanks for all you’ve done. I am working regularly with a couple of your plugins already and the results are wonderful. And now I’ve ht my first snag using imagenavigator. I can’t seem to get it to load an image (and the tabs are stuck) whenever I use it in any type of modal dialog. I’ve tried about 6 different “lightboxes” and jQuery’s Dialog with the same results. Please help. Thanks.

-Sean
Found some awesome Jquery « Sannah's Info Architecture Blog October 2, 2010 at 7:09 pm ·

[...] http://pupunzi.open-lab.com/mb-jquery-components/mb-imagenavigator/ [...]
Moiz July 7, 2010 at 11:45 pm · Reply →

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
افكارنا » أرشيف المدونة » jquery mb.imageNavigator April 26, 2010 at 12:17 pm ·

[...] الرابط : http://pupunzi.open-lab.com/mb-jquery-components/mb-imagenavigator/ [...]
mb.imageNavigator, plugin de jQuery para imágenes | Recursos para Diseñadores Gráficos y Web | Creativos Online October 19, 2009 at 1:27 pm ·

[...] autor pone a disposición de todos su descarga y la demo, por lo que no podemos quejarnos, sino dar las [...]
jQuery (mb)ImgNavigator 2.0 (New!) « Matteo Bicocchi’s Blog October 13, 2009 at 6:29 pm ·

[...] 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 [...]