Какой функцией можно добиться появление изображения

Supermaximus

Well-known member
01.11.2008
84
0
#1
Какой функцией можно добиться появление изображения посреди экрана, а сама страница как бы закрывается полупрозрачной пеленой, как например на этом форуме, если делать логин? А на fast-torrent.ru ещё круче: при нажатии на картинку-ссылку появляется сначала квадрат посреди экрана, а потом он раздвигается плавно до размеров, требующихся для картинки. Понятно, что зто javascript, но я даже предположить не могу направление поиска. Подскажите кто может. Спасибо!
 

vital

Больной Компом Детектед
29.01.2006
2 432
33
#2
А одной функцией этого и не сделаешь=) Либо писать с нуля пару сотен строк кода, либо использовать уже написанный кем-то.. Во всех фреймворках есть такая штука. Один из них приведен выше.Я лишь могу посоветовать jquery или http://highslide.com/. Тем более, последний специально под показ картинок и заточен..
 
B

BlackApricot

#3
Если тебе не интересны все эти библиотеки, на пиши мне, подумаем.
 

Supermaximus

Well-known member
01.11.2008
84
0
#4
Либо писать с нуля пару сотен строк кода
Прости, но ты не прав, так делает то, что я хочу этот форум:

function login_show() {

$('auth').style.display = "block";

$('authdialog').style.left = '50%';

$('loginfocusneeded').focus();

}

function login_hide() {

$('authdialog').style.position = 'absolute';

$('authdialog').style.left = '-2000px';

$('auth').style.display = "none";
}


Если тебе не интересны все эти библиотеки, на пиши мне, подумаем.
По-моему мне нужно только суметь сделать полупрозрачную пелену. Filter Alpha не подходит так как он работает только на IE. Мне кажется вот эта штука $('authdialog').style.left = '50%'; и есть пелена, но я не могу найти где создался этот "зверь" $('authdialog'). Я вообще не понимаю как это так $('ляляля') в javascript работает.
 

Supermaximus

Well-known member
01.11.2008
84
0
#5
Честно говоря мне никто толком не помог, но всё равно спасибо за участие. Я нашёл ответ в CSS , обратите внимание на последнюю строчку - она и есть пелена

.dialog {width: 290px; border: 7px solid #4C77B6; background: #fff; padding: 12px 15px; z-index: 1000; position: fixed; top: 0px; margin: 200px 0 0 -145px; left: 50%;}

.dialog h6 {margin: 0px; padding: 0px; font-size: 26px; color: #4c4c4c; font-family: Arial, Tahoma, Helvetica, sans-serif; padding: 0 0 12px;}

.dialog span {float: left; color: #7f7f7f; margin: 0 0 3px;}

.dialog a {float: right; font-size: 11px; margin: 0 0 3px; color: #4C77B6;}

.dialog input {font-size:16px; color: #4c4c4c; font-family: Arial, Tahoma, Helvetica, sans-serif;}

.dialog_form {display: block; width: 99%; margin: 0 0 12px; clear: both;}

.dialog_remember {clear: both; padding: 0 0 8px;}

.dialog_remember div {display: block; clear: both; color: #7f7f7f; width: 99%; text-align: left; margin: -2px 2px 0 0;}

.dialog_remember input {margin-left: 0px;}

.auth_bg {height: 100%; width: 100%; background: url(auth_bg.png); position: fixed; z-index: 999; top:0px; left:0px;}

Фон из *.png может быть частично прозрачным, так, что то, что я искал - это маленькая точка в верхнем левом углу по этой ссылке http://codeby.net/style_images/ckr/auth_bg.png

:) :rolleyes:
 

vital

Больной Компом Детектед
29.01.2006
2 432
33
#6
Supermaximus, не хотелось бы тебя смущать, но форум точно так же использует готовый фреймворк. Какой - я уже давал ссылку.
 
M

Mavrun

#7
то, что ты описал на фаст-торрент, это скорее всего галерея либо lightbox, либо highslide.
в принципе что тебе нужно, так это аяксовый скрипт галереи. советую почитать одну статью (ссылка) про галереи на jQuery. Посмотришь примеры, выберешь, скачаешь.
 

Supermaximus

Well-known member
01.11.2008
84
0
#8
форум точно так же использует готовый фреймворк. Какой - я уже давал ссылк
Ты прав, я поспешил и не заметил, ссылка, которую ты давал http://highslide.com/ там это есть. Спасибо


Посмотришь примеры, выберешь, скачаешь
Спасибо, очень классный источник http://shublog.ru/ajax/jquery/20-ajax-galerejj-na-jquery/ , я уже разобрался, всё работает и очень легко интегрировать на сайт.