Hello,

I am sure this seems simple for most of you, but I can't seems to make this (http://jdbartlett.github.com/loupe/ ) Loupe Plugin toggle on and off. I have tried adding and removing the class the plugin uses to identify which element to zoom. I have also tried directly .hide the class used to style the loop itself. I've spend hours looking around the net, no help. Ideas?

All help is great.

Thanks everyone.


I tried this:

1. jQuery('.theloup').loupe({
2.             width: 200, // width of magnifier
3.             height: 200, // height of magnifier
4.             loupe: 'loupe' // css class for magnifier
5.  });
6. jQuery('.loupe-switch').toggle(
7.       function () {
8.     jQuery('.louped-img').addClass("loupe");
9.    
10.     loupe.hide();
11.       },
12.       function () {
13.     jQuery('.louped-img').removeClass("loupe");
14.   }
15. );

And I tried this:

1. jQuery('.theloup').loupe({
2.             width: 200, // width of magnifier
3.             height: 200, // height of magnifier
4.             loupe: 'loupe' // css class for magnifier
5.             });
6.    
7.     jQuery('.loupe-switch').toggle(
8.       function () {
9.     jQuery(this).addClass("loupe-on");
10.    
11.     jQuery('loupe').loupe.show();
12.       },
13.       function () {
14.        jQuery('loupe').loupe.hide();
15.   }
16. );