узнать координаты div и передать их в переменную
 

всем привет,

в js я начинающий, но есть опыт с actionscript, поэтому не совсем ноль. получить нужно следущее: есть серия div-ов - thumbnails, при клике на каждый из них всплывает соответствующий div поверх всего, где картинка покрупнее и поле с описанием. то есть по сути галерея с lightbox. только ни lightbox, ни fancуbox, ни shadowbox и тд меня как готовые решения не устроили , хочу гибкой адаптации под себя (div должен всплывать, "вырастая" из кликнутого thumbnail, то есть из исходных координат его левого верхнего угла и его начальных width и height). нашел на jquery практически то, что нужно: http://trevordavis.net/play/using-jq...or-a-lightbox/. не знаю только, как задать здесь координаты упомянутые выше.


вот скрипт

$(document).ready(function() {
	$('ul.ornaments a').click(function() {								   
		//Setup the modal window
		$('body').append('<div id="overlay"></div><div id="modal"><div id="modalInner"><a href="#" id="close" title="Close">Close</a><div id="modalImageColumn"></div><div id="modalTextColumn"></div><div class="clearing"></div></div></div>');
		
		if($.browser.msie && $.browser.version <= 6.0) {
			var windowHeight = $(document).height();
			$('#overlay').height(windowHeight);
		}
		
		$('#overlay').css('opacity', 0.5).fadeIn('fast');
		$('#modal').fadeIn('slow');
		
		//Position it in the viewport
		var scrollPos = $(window).scrollTop() + 50;		
		$('div#modal').css('top',scrollPos+'px');
		
		//Handle the clicking of close button or clicking the background
		$('div#modal a#close,div#overlay').bind('click', function() {
			$('div#modal').fadeOut('fast',function() {
				$('div#overlay').fadeOut('fast',function() {
					$(this).remove();							   
				});
				$(this).remove();							   
			});
			return false;
		});	
		
		//Get the image
		var imgUrl = $(this).attr('href');
		$('div#modalImageColumn').append('<img src="'+imgUrl+'" alt="" class="frame" height="400" id="ornament" width="400" />');
		$('img#ornament').load(function() {
			$(this).fadeIn();								
		});
		
		$(this).siblings('.stateDescription').clone().appendTo('div#modalTextColumn');
		
		return false;
	});
});

где через //Position it in the viewport надо вплести координаты кликнутого

ul.ornaments a

. отыскал вот такую хреновину для определения координат:

function findPos(obj) {
	var curleft = curtop = 0;
if (obj.offsetParent) {
do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curleft,curtop];
}

но не знаю правильного синтаксиса js. пробовал перед //Position it in the viewport вделать

function findPos(obj) {
	var curleft = curtop = 0;
if (obj.offsetParent) {
do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curleft,curtop];

var coordinates = findPos(this)

console.log(coordinates)

}

но ругается сильно. как это верно прописать?

спасибо.

dschmitz,
вот именно поэтому надо сначала учить сам язык, а не всякие jquery

Для расположения элемента от вьюпорта есть position: fixed. Не работает нативно в IE6, правда, но для него есть костыли.

@ Cr@ZyBoY:
вот я и хотел узнать такую базовую функцию на будущее. если кто-нибудь не сочтет за труд ответить, это мне прояснит принцип. другое дело, что может ответ нужен обширный. но мне как начинающему эта функция такой базисной кажется.

@ subzey: да, но как послать координату X кликнутого div в переменную?

http://javascript.ru/ui/offset

Что вы вообще понимаете под фразой "послать в переменную"?

ссылку сейчас посмотрю, спасибо. под "послать в переменную" я имею ввиду передать координату кликнутого div в переменную, которую потом подсунуть окну, отрывающемуся поверх, чтобы его X был таким же.

Как и во многих других языках, в JavaScript есть оператор присваивания.

спасибо за ссылку, Kolyaj. выглядит неплохо. буду пробовать...

мерси, Kolyaj. отличный способ с getBoundingClientRect() !