С Новым Годом всех! ))
Работаю с 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";
}
}
}
