всем привет,
в 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)
}
но ругается сильно. как это верно прописать?
спасибо.
