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

Данный скрипт позволяет добавлять к Вашим изображениям отражение в стиле Web 2.0.
Например
Использование скрипта:
Скачиваете reflection.zip [63,18 Kb] (cкачиваний: 327)

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


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

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

Например:
<img src="http://mastermind.pp.ua/datalife-engine/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- настраиваем по своему вкусу :)
Другие новости по теме:

Категория: Вебмастеру ----- Просмотров: 6869 ----- Комментариев: 20

Вернуться

  • Hitmans

  • 4 февраля 2008 17:49
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
laughing
  • Seefon

  • 4 февраля 2008 18:35
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
Работает
  • Группа: User
  • ICQ: 288569677
  • Регистрация: 21.01.2008
  • Комментариев: 703
  • Публикаций: 245
^
Внатуре работает, во круто. Даж кнопку нажать не тяжело за такое. Респектище одним словом.
laughing
P.S. А у меня не работает чего то оказывается.
sad

--------------------
  • DImkA

  • 4 февраля 2008 22:24
  • Группа: r00t Admin
  • ICQ: 5160909
  • Регистрация: 12.12.2007
  • Комментариев: 137
  • Публикаций: 74
^
GauraStyle,
Ммм где именно? winked

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

--------------------
  • Группа: User
  • ICQ: 288569677
  • Регистрация: 21.01.2008
  • Комментариев: 703
  • Публикаций: 245
^
Ого как круто просто. Да Web 2.0 рулит.
bully

--------------------
  • Spider

  • 5 февраля 2008 02:29
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
Сейчас будем разбираться :)
  • DImkA

  • 5 февраля 2008 13:28
  • Группа: r00t Admin
  • ICQ: 5160909
  • Регистрация: 12.12.2007
  • Комментариев: 137
  • Публикаций: 74
^
Ну для новостей нужно в parse.class.php
Найти в 4-ех местах
<img src=\"$url\" ....

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

--------------------
  • Группа: User
  • ICQ: 288569677
  • Регистрация: 21.01.2008
  • Комментариев: 703
  • Публикаций: 245
^
Фикс для ИЕ:
reflection.js
line 50:
var d = document.createElement('span');

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

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


Пока всё.
laughing

--------------------
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
wink
  • DImkA

  • 8 февраля 2008 19:00
  • Группа: r00t Admin
  • ICQ: 5160909
  • Регистрация: 12.12.2007
  • Комментариев: 137
  • Публикаций: 74
^
GauraStyle,
А чо в ИЕ там не работает??
Какой в топку фикс??? "Автор" наверно сам не скачивал архив и не устанавливал....
Кароче бред ето полнейший...


--------------------
  • Группа: User
  • ICQ: 288569677
  • Регистрация: 21.01.2008
  • Комментариев: 703
  • Публикаций: 245
^
DImkA,
Это ты обомне как о Авторе говориш или типа как?
laughing

--------------------
  • DImkA

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

--------------------
  • sansan

  • 14 февраля 2008 23:06
  • Группа: Гости
  • 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
  • DImkA

  • 14 февраля 2008 23:26
  • Группа: r00t Admin
  • ICQ: 5160909
  • Регистрация: 12.12.2007
  • Комментариев: 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>

--------------------
  • alexben

  • 15 февраля 2008 05:27
  • Группа: Гости
  • 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 анимацией...
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
чёт у меня неработает,подскажите пожалуста!если я хочу что бы картинка темы была с отражение как нада прописать?допустим
[img]"http://192.168.21.8/images/news_14.jpg"[/img]

куда добавить class="reflect" что бы появилось отображение?
  • DImkA

  • 15 февраля 2008 19:13
  • Группа: r00t Admin
  • ICQ: 5160909
  • Регистрация: 12.12.2007
  • Комментариев: 137
  • Публикаций: 74
^
ADvocaTE_,
Напиши попростому
<img src="http://192.168.21.8/images/news_14.jpg" class="reflect"

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

--------------------
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^

<img src="http://192.168.21.8/images/news_14.jpg" class="reflect"
всё работает))есть 1-н вопросик,а как сделать этим тегом что б картинка по центру была?
  • sansan

  • 16 февраля 2008 00: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!
  • BasssTa

  • 21 января 2009 10:07
  • Группа: Гости
  • ICQ: --
  • Регистрация: --
  • Комментариев: 0
  • Публикаций: 0
^
прикольно