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

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем Supermaximus, 14 янв 2010.

  1. Supermaximus

    Supermaximus Well-Known Member

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

    vital Больной Компом Детектед

    Регистрация:
    29 янв 2006
    Сообщения:
    2.468
    Симпатии:
    27
    А одной функцией этого и не сделаешь=) Либо писать с нуля пару сотен строк кода, либо использовать уже написанный кем-то.. Во всех фреймворках есть такая штука. Один из них приведен выше.Я лишь могу посоветовать jquery или http://highslide.com/. Тем более, последний специально под показ картинок и заточен..
     
  3. BlackApricot

    BlackApricot Гость

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

    Supermaximus Well-Known Member

    Регистрация:
    1 ноя 2008
    Сообщения:
    84
    Симпатии:
    0
    Прости, но ты не прав, так делает то, что я хочу этот форум:

    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 работает.
     
  5. Supermaximus

    Supermaximus Well-Known Member

    Регистрация:
    1 ноя 2008
    Сообщения:
    84
    Симпатии:
    0
    Честно говоря мне никто толком не помог, но всё равно спасибо за участие. Я нашёл ответ в 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:
     
  6. vital

    vital Больной Компом Детектед

    Регистрация:
    29 янв 2006
    Сообщения:
    2.468
    Симпатии:
    27
    Supermaximus, не хотелось бы тебя смущать, но форум точно так же использует готовый фреймворк. Какой - я уже давал ссылку.
     
  7. Mavrun

    Mavrun Гость

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

    Supermaximus Well-Known Member

    Регистрация:
    1 ноя 2008
    Сообщения:
    84
    Симпатии:
    0
    Ты прав, я поспешил и не заметил, ссылка, которую ты давал http://highslide.com/ там это есть. Спасибо


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

    Mavrun Гость

    Ноу праблем 8) Рад помочь=)
     
Загрузка...

Поделиться этой страницей