Показать сообщение отдельно
  #1 (permalink)  
Старый 16.03.2010, 03:54
Интересующийся
Отправить личное сообщение для dschmitz Посмотреть профиль Найти все сообщения от dschmitz
 
Регистрация: 16.03.2010
Сообщений: 27

узнать координаты 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)

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

спасибо.
Ответить с цитированием