269 Для человека, создающего много плагинов, ресурс MooTools Forge — это как большое кремовое пирожное для ребенка.
На этом ресурсе и был найден плагин MooTools Zoomer Антона Самойлова. Сам Zoomer предоставляет нам элегантный способ для масштабирования больших изображений.
HTML
|
1 |
<img src="greeeeen_by_Amanmahi_small.jpg" alt="greeeeen by Amanmahi" big="greeeeen_by_Amanmahi.jpg" id="ama" /> |
Обратите внимание на атрибут изображения big. В этом атрибуте вы указываете путь к увеличенному изображению. Но так же есть возможность указать путь к увеличенному изображению в опциях плагина для экземпляра объекта (в нашем случае для id="ama").
MooTools Javascript
|
1 |
<script type="text/javascript" src="mootools-1.2.4.js"></script> |
Подключаем MooTools библиотеку.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
<script type="text/javascript"> var Zoomer = new Class({ version: '1.8', Implements: [Options], options: { smooth: 6 }, initialize: function(element, options){ this.setOptions(options); this.small = document.id(element); if(!this.small.complete){ this.small.addEvent('load', function(){ this.prepareSmall(); }.bind(this)); }else{ this.prepareSmall(); } var src = this.options.big || this.small.get('big'); this.big = new Element('img', { src: src, styles: { position: 'absolute', top: 0, left: 0, opacity: 0, cursor: 'crosshair' } }); if(!this.big.complete){ this.big.addEvent('load', function(){ this.prepareBig(); }.bind(this)); }else{ this.prepareBig(); } }, prepareSmall: function(){ this.wrapper = new Element('div', {'class': 'zoomer-wrapper'}).wraps(this.small); ['margin', 'left', 'top', 'bottom', 'right', 'float', 'clear', 'border', 'padding'].each(function(p){ var style = this.small.getStyle(p); var dflt = 'auto'; if(['float', 'clear', 'border'].contains(p)) dflt = 'none'; if(p == 'padding') dflt = '0'; try{ this.small.setStyle(p, dflt); this.wrapper.setStyle(p, style); }catch(e){}; }, this); this.wrapper.setStyles({ width: this.small.offsetWidth, height: this.small.offsetHeight, position: 'relative', overflow: 'hidden' }); this.smallSize = { width: this.small.width, height: this.small.height }; if(this.bigPrepared){ this.ready(); }else{ this.smallPrepared = true; } }, prepareBig: function(){ this.bigSize = { width: this.big.width, height: this.big.height }; if(this.smallPrepared){ this.ready(); }else{ this.bigPrepared = true; } }, ready: function(){ this.big.inject(this.wrapper); this.bigWrapper = new Element('div', { 'class': 'zoomer-wrapper-big', styles: { position: 'absolute', overflow: 'hidden', top: this.small.getPosition().y - this.wrapper.getPosition().y - this.wrapper.getStyle('border-top-width').toInt(), left: this.small.getPosition().x - this.wrapper.getPosition().x - this.wrapper.getStyle('border-left-width').toInt(), width: this.small.offsetWidth, height: this.small.offsetHeight, background: 'url(_)' }, events: { mouseenter: this.startZoom.bind(this), mouseleave: this.stopZoom.bind(this), mousemove: this.move.bind(this) } }).wraps(this.big); }, move: function(event){ this.dstPos = event.page; }, startZoom: function(){ this.position = this.small.getPosition(); /** precalculations **/ this.ratio = { x: 1 - this.bigSize.width / this.smallSize.width, y: 1 - this.bigSize.height / this.smallSize.height } this.current = { left: this.big.getStyle('left').toInt(), top: this.big.getStyle('top').toInt() } this.timer = this.zoom.periodical(10, this); this.big.fade('in'); }, stopZoom: function(){ $clear(this.timer); this.big.fade('out'); }, zoom: function(){ if(!this.dstPos) return; var steps = this.options.smooth; var dst = { left: parseInt((this.dstPos.x - this.position.x) * this.ratio.x), top: parseInt((this.dstPos.y - this.position.y) * this.ratio.y) }; this.current.left -= (this.current.left - dst.left) / steps; this.current.top -= (this.current.top - dst.top) / steps; this.big.setStyles(this.current); } }); /* usage */ window.addEvent('domready',function() { new Zoomer('ama',{ smooth: 10 }); }); </script> |
Подключаем код и в window.addEvent просто указываем ID изображения и значение сглаживания. Как уже упоминалось выше, вы также можете указать путь к увеличенному изображению.
Возможное применение
Конечно же этот плагин пригодится для галерей, магазинов и может быть для портфолио в сайтах-визитках.
Наши похвалы Антону за его прекрасный плагин. Плюсы плагина в том, что его легко реализовать, минусы — требует MooTools библиотеку. А у Вас есть плагины на Forge?
