Показать сообщение отдельно
  #1 (permalink)  
Старый 31.12.2012, 21:15
Аватар для mi.rafaylik
Кандидат Javascript-наук
Отправить личное сообщение для mi.rafaylik Посмотреть профиль Найти все сообщения от mi.rafaylik
 
Регистрация: 07.12.2012
Сообщений: 113

выбор изображение по тэгу 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";
		}

	}
}

Последний раз редактировалось mi.rafaylik, 01.01.2013 в 14:25.
Ответить с цитированием