выбор изображение по тэгу img, а не по id
С Новым Годом всех! ))
Работаю с javascript-плагином ресайза изображений. Принцип визуально понятный. Изображению в css присваевается курсор nw-resize, нажимаешь на изображение и тянешь в сторону уменьшения или увеличения. Но в данном скрипте каждое изображение инициируется по его id. Подскажите плиз, как инициализировать любое изображение (точнее все), которые находятся например в родительском div, по тэгу img? Это нужно для того, чтоб не присваивать каждому изображению новый id (а потом ещё и инициализировать его в скрипте), например в случае загрузки изображения пользователем ) Первое, что я попробовал сделать, это получить элемент по getElementsByTagName('img'), но завершилось это неудачей. На сайте mdsn прочитал, что функция getObject вообще не поддерживается в IE9 и IE10, отсюда мой второй вопрос - на что можно заменить getObject? И 3й вопрос - Существует ли подобное решение на jQuery? <!DOCTYPE html> <html><head> <meta charset="utf-8"> <style type="text/css"> #page img {float:left; margin:0px 15px 15px 0px; cursor:nw-resize; min-width:20px; min-height:20px;} </style> <script type="text/javascript" src="resize.js"></script> <script type="text/javascript"> resize.getObject("photo1").init({onUpdate:function(){}}); </script> </head><body> <div id="page"> <img id="photo1" src="photo1.jpg"> next text </div> </body></html> и содержимое файла resize.js: var resize = { archive : {}, getObject : function(id) { this.archive[id] = new this.rs(id); return this.archive[id]; } }; resize.rs = function(id) { // Vars this.id = id; // Image data this.iWidth = 0; this.iHeight = 0; this.iTop = 0; this.iLeft = 0; this.iRate = 0; // Resize move this.iBuferWidth = 0; this.iBuferHeight = 0; // Flags this.resizeMoveState = false; this.saveProportions = true; this.stopSelection = true; // Handlers this.onUpdate = null; // Nodes this.image = null; this.resize = null; } resize.rs.prototype = { // Methods // Default gebi : function(id) { return document.getElementById(id); }, addHandler : function(object, event, handler, useCapture) { if (object.addEventListener) { object.addEventListener(event, handler, useCapture ? useCapture : false); } else if (object.attachEvent) { object.attachEvent('on' + event, handler); } else alert(this.errorArray[9]); }, defPosition : function(event) { var x = y = 0; if (document.attachEvent != null) { x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop; } if (!document.attachEvent && document.addEventListener) { // Gecko x = event.clientX + window.scrollX; y = event.clientY + window.scrollY; } return {x:x, y:y}; }, absPosition : function(obj) { var x = y = 0; while(obj) { x += obj.offsetLeft; y += obj.offsetTop; obj = obj.offsetParent; } return {x:x, y:y}; }, domReady : function(i) { var u =navigator.userAgent; var e=/*@cc_on!@*/false; var st = setTimeout; if (/webkit/i.test(u)) { st( function() { var dr=document.readyState; if(dr=="loaded"||dr=="complete") i(); else st(arguments.callee,10); }, 10 ); } else if ((/mozilla/i.test(u)&&!/(compati)/.test(u)) || (/opera/i.test(u))) { document.addEventListener("DOMContentLoaded", i, false); } else if (e) {( function(){ var t=document.createElement('doc:rdy'); try { t.doScroll('left'); i(); t=null; } catch(e) {st(arguments.callee,0);} })(); } else window.onload=i; }, // Common init : function(hash, node) { if (typeof node == "undefined") { var _this = this; this.domReady( function() {_this.init(hash, 1)} ); return; } this.image = this.gebi(this.id); if (this.image == null) { this; return; } if (this.image.nodeName.toLowerCase() != "img") { this; return; } try { for (var i in hash) this[i] = hash[i]; if (this.onUpdate == null) { this; return; } if (!document.body) { this; return; } this.image.ondragstart = function() {return false;} // IE fix // Set default this.redefine(); this.iRate = this.iWidth / this.iHeight; this.drawResizeBlock(); // Add handers var _this = this; this.addHandler(document, "mousemove", function (evt) { _this.resizeMoveHandler(evt); }); this.addHandler(document, "mouseup", function () { _this.resizeMoveState = false; _this.redefine(); }); this.addHandler(_this.resize, "mousedown", function (evt) { _this.resizeMoveState = true; evt = evt || window.event; if (evt.preventDefault && _this.stopSelection) evt.preventDefault(); _this.X0 = _this.defPosition(evt).x; _this.Y0 = _this.defPosition(evt).y; _this.iBuferWidth = _this.iWidth; _this.iBuferHeight = _this.iHeight; }); } catch(e) {this} }, redefine : function() { this.iTop = this.absPosition(this.image).y; this.iLeft = this.absPosition(this.image).x; this.iWidth = this.image.style.width ? parseInt(this.image.style.width) : this.image.offsetWidth; this.iHeight = this.image.style.height ? parseInt(this.image.style.height) : this.image.offsetHeight; this.resizeTop = this.iTop + this.iHeight; this.resizeLeft = this.iLeft + this.iWidth; this.onUpdate(); }, // Resize drawResizeBlock : function() { this.resize = this.gebi(this.id); }, resizeMoveHandler : function(evt) { if (!this.resizeMoveState) return; evt = evt || window.event; var nW, nH; hW = this.iBuferWidth + this.defPosition(evt).x - this.X0; hH = this.iBuferHeight + this.defPosition(evt).y - this.Y0; if (this.iRate < 1) { hW = this.iBuferWidth + this.defPosition(evt).x - this.X0; if (this.saveProportions) hH = hW / this.iRate; else hH = this.iBuferHeight + this.defPosition(evt).y - this.Y0; } else { hH = this.iBuferHeight + this.defPosition(evt).y - this.Y0; if (this.saveProportions) hW = this.iRate * hH; else hW = this.iBuferWidth + this.defPosition(evt).x - this.X0; } if (hW <= this.iMinWidth) hW = this.iMinWidth; if (hW > this.iMaxWidth) hW = this.iMaxWidth; if (hH <= this.iMinHeight) hH = this.iMinHeight; if (hH > this.iMaxHeight) hH = this.iMaxHeight; if (this.iRate < 1) { this.image.style.width = hW + "px"; this.image.style.height = (this.saveProportions ? hW / this.iRate : hH) + "px"; } else { this.image.style.height = hH + "px"; this.image.style.width = (this.saveProportions ? this.iRate * hH : hW) + "px"; } } } |
Задача решена на jQuery 20 строками кода, тему можно закрыть
|
Часовой пояс GMT +3, время: 22:17. |