dle.in.ua » Вебмастеру » Отражение картинки Web 2.0

Отражение картинки Web 2.0

Автор: DImkA от 4-02-2008, 16:04
Данный скрипт позволяет добавлять к Вашим изображениям отражение в стиле Web 2.0.
Например
Использование скрипта:
Скачиваете reflection.zip [63.18 Kb] (cкачиваний: 329)

Добавляете скрипт на вашу страницу
<script type="text/javascript" src="/reflection.js"></script>


И для вашего изображения class="reflect"
Например:
<img src="http://dle.in.ua/uploads/posts/2008-02/1202132389_smile.png" class="reflect">

Так же Вы можете регулировать размер и прозрачность отражения.
rheight - размер отображения;
ropacity - прозрачность отражения;

Например:
<img src="http://dle.in.ua/uploads/posts/2008-02/1202132389_smile.png" class="reflect rheight30 ropacity15">

В данном примере будет размер отражения 30px и прозрачность 15%
И выглядеть будет примерно вот так
Отражение картинки Web 2.0

Данный скрипт был протестирован в браузерах: Internet Explorer 6.0, Mozilla Firefox 1.5, Opera 9.0 и Safari
Данная модификация работает и у нас на сайте в коментариях winked
Updated:
И так после поступленния нескольких вопросов "Как такое сделать в профиле или\и в коментариях?" Обьясняю..:
Для коментариев:
открываем templates/Ваш шаблон/comments.tpl(для коментариев) или открываем templates/Ваш шаблон/userinfo.tpl(для "просмотра профиля)
Ищем строчку которая отвечает за аватарку:

<img src="{foto}" border="0"

И заменяем на
<img src="{foto}" border="0" class="reflect rheight51 ropacity37" />


где rheight и ropacity- настраиваем по своему вкусу :)
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • laughing
    • Hitmans
    • Регистрация: --
    • Репутация: (||)
    • 4 февраля 2008 17:49
    • 1
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Работает
    • Seefon
    • Регистрация: --
    • Репутация: (||)
    • 4 февраля 2008 18:35
    • 2
    ^
  • Группа: User
  • Icq: 288569677
  • Комментариев: 703
  • Публикаций: 245
  • Внатуре работает, во круто. Даж кнопку нажать не тяжело за такое. Респектище одним словом.
    laughing
    P.S. А у меня не работает чего то оказывается.
    sad

    --------------------
    • GauraStyle
    • Регистрация: 21.01.2008
    • Репутация: (0|0|0)
    • 4 февраля 2008 20:32
    • 3
    ^
  • Группа: r00t Admin
  • Icq: 5160909
  • Комментариев: 137
  • Публикаций: 74
  • GauraStyle,
    Ммм где именно? winked

    Ps написал как зделать для коментов и просмотра профиля

    --------------------
    • DImkA
    • Регистрация: 11.12.2007
    • Репутация: (2|2|0)
    • 4 февраля 2008 22:24
    • 4
    ^
  • Группа: User
  • Icq: 288569677
  • Комментариев: 703
  • Публикаций: 245
  • Ого как круто просто. Да Web 2.0 рулит.
    bully

    --------------------
    • GauraStyle
    • Регистрация: 21.01.2008
    • Репутация: (0|0|0)
    • 5 февраля 2008 00:06
    • 5
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Сейчас будем разбираться :)
    • Spider
    • Регистрация: --
    • Репутация: (||)
    • 5 февраля 2008 02:29
    • 6
    ^
  • Группа: r00t Admin
  • Icq: 5160909
  • Комментариев: 137
  • Публикаций: 74
  • Ну для новостей нужно в parse.class.php
    Найти в 4-ех местах
    <img src=\"$url\" ....

    ну и добавить class="reflect"
    должно выйти типа
    <img src=\"$url\" class="reflect" .....

    --------------------
    • DImkA
    • Регистрация: 11.12.2007
    • Репутация: (2|2|0)
    • 5 февраля 2008 13:28
    • 7
    ^
  • Группа: User
  • Icq: 288569677
  • Комментариев: 703
  • Публикаций: 245
  • Фикс для ИЕ:
    reflection.js
    line 50:
    var d = document.createElement('span');

    меняем на:
    var d = document.createElement('div');

    После line 109 добавляем :
    canvas.style.clear = 'both';


    Пока всё.
    laughing

    --------------------
    • GauraStyle
    • Регистрация: 21.01.2008
    • Репутация: (0|0|0)
    • 8 февраля 2008 12:29
    • 8
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • wink
    • al_capone
    • Регистрация: --
    • Репутация: (||)
    • 8 февраля 2008 15:48
    • 9
    ^
  • Группа: r00t Admin
  • Icq: 5160909
  • Комментариев: 137
  • Публикаций: 74
  • GauraStyle,
    А чо в ИЕ там не работает??
    Какой в топку фикс??? "Автор" наверно сам не скачивал архив и не устанавливал....
    Кароче бред ето полнейший...


    --------------------
    • DImkA
    • Регистрация: 11.12.2007
    • Репутация: (2|2|0)
    • 8 февраля 2008 19:00
    • 10
    ^
  • Группа: User
  • Icq: 288569677
  • Комментариев: 703
  • Публикаций: 245
  • DImkA,
    Это ты обомне как о Авторе говориш или типа как?
    laughing

    --------------------
    • GauraStyle
    • Регистрация: 21.01.2008
    • Репутация: (0|0|0)
    • 9 февраля 2008 00:24
    • 11
    ^
  • Группа: r00t Admin
  • Icq: 5160909
  • Комментариев: 137
  • Публикаций: 74
  • GauraStyle,
    Не я о авторе который ето запостил(О дей;))

    --------------------
    • DImkA
    • Регистрация: 11.12.2007
    • Репутация: (2|2|0)
    • 9 февраля 2008 11:21
    • 12
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Vsem privet! Izvinite ia nedavno nachal,mojet vopros pokajeca tupim!
    File reflection.js ia pomestil v papku ''/engine/classes/highslide'
    Добавляете скрипт на вашу страницу

    <script type="text/javascript" src="/reflection.js"></script> - Kuda imenno v shablon?

    A vot:
    открываем templates/Ваш шаблон/comments.tpl(для коментариев) или открываем templates/Ваш шаблон/userinfo.tpl(для "просмотра профиля)
    Ищем строчку которая отвечает за аватарку:


    <img src="{foto}" border="0"

    И заменяем на

    <img src="{foto}" border="0" class="reflect rheight51 ropacity37" />
    Vsio propisal no niche ne rabotaet pomogite plz, razlojite sho kuda vstavliat',zaranee sps smile
    • sansan
    • Регистрация: --
    • Репутация: (||)
    • 14 февраля 2008 23:06
    • 13
    ^
  • Группа: r00t Admin
  • Icq: 5160909
  • Комментариев: 137
  • Публикаций: 74
  • Цитата: sansan
    File reflection.js ia pomestil v papku ''/engine/classes/highslide'
    Добавляете скрипт на вашу страницу

    <script type="text/javascript" src="/reflection.js"></script> - Kuda imenno v shablon?

    в main.tpl вставляй:))
    только тебе надо вставить етот код
    <script type="text/javascript" src="/engine/classes/highslide/reflection.js"></script>

    --------------------
    • DImkA
    • Регистрация: 11.12.2007
    • Репутация: (2|2|0)
    • 14 февраля 2008 23:26
    • 14
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • короче я зделал так..
    1)открыл templates/Ваш шаблон/comments.tpl и в самый верх воткнул код <script type="text/javascript" src="/engine/classes/highslide/reflection.js"></script> ,после ЗАММЕНИЛ <img src="{foto}" border="0" НА <img src="{foto}" border="0" class="reflect rheight51 ropacity37" />....сохранил...
    И потом самое главное кинул в корень ФТП сайта сам етот Джава-скрипт...
    У МЕНЯ РАБОТАЕТ ВСЕ ПРЕКРАСНО...

    также и с templates/Ваш шаблон/userinfo.tpl

    цифры 51и 37 под себя настроил....(они отвечают за отражение и прозрачность в%)

    ___________________________________________________________
    ::::Жалко что непрокатывает ета фича с Gif анимацией...
    • alexben
    • Регистрация: --
    • Репутация: (||)
    • 15 февраля 2008 05:27
    • 15
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • чёт у меня неработает,подскажите пожалуста!если я хочу что бы картинка темы была с отражение как нада прописать?допустим
    [img]"http://192.168.21.8/images/news_14.jpg"[/img]

    куда добавить class="reflect" что бы появилось отображение?
    • ADvocaTE_
    • Регистрация: --
    • Репутация: (||)
    • 15 февраля 2008 19:02
    • 16
    ^
  • Группа: r00t Admin
  • Icq: 5160909
  • Комментариев: 137
  • Публикаций: 74
  • ADvocaTE_,
    Напиши попростому
    <img src="http://192.168.21.8/images/news_14.jpg" class="reflect"

    Если нужно для тега [img ] то нужно править парсер

    --------------------
    • DImkA
    • Регистрация: 11.12.2007
    • Репутация: (2|2|0)
    • 15 февраля 2008 19:13
    • 17
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0

  • <img src="http://192.168.21.8/images/news_14.jpg" class="reflect"
    всё работает))есть 1-н вопросик,а как сделать этим тегом что б картинка по центру была?
    • ADvocaTE_
    • Регистрация: --
    • Репутация: (||)
    • 15 февраля 2008 19:26
    • 18
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • K primeru ia na glavnoi kartinki (vilojenix failov), code propisan sled. obrazom
    [img]http://www.mysite.com/uploads/nokia.jpg[/img]


    kak dobavit' k nei reflect (gde v shablonax chto propisat'? zaranee sps!
    • sansan
    • Регистрация: --
    • Репутация: (||)
    • 16 февраля 2008 00:18
    • 19
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • прикольно
    • BasssTa
    • Регистрация: --
    • Репутация: (||)
    • 21 января 2009 10:07
    • 20
    ^
    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.