Я и Instant)))

Автор блога:

Эффект tooltip (всплывающие фотки)

Посмотрев в "Моем мире", а также на сайтах знакомств (при наведении на имя пользователя появляется его фото), захотелось увидеть данную штучку и на нашем инстанте. Думаю, это будет очень актуальной для социальной сети. Поискав в интернете, понял, что данная штука делается через iquery, а сам компонент называется tooltip.js.
Начав делать данную функцию, получилось сделать, только вывод имени пользователя при наезде мышью. Чтобы прикрутить фото и окончательно докончить наш тултип, помог нам Markus. Спасибо ему большое.  



И так, как вы поняли со скриншота, скрипт работает в модуле "Кто онлайн". Рабочюю версию скрипта можете посмотреть на сайте http://www.nsc.kz (сайт еще на тестировании, кто хочет помочь с дизайном, напишите пожалуйста в личку).

Как это прикрутить?

Напишу маленькую инструкцию:
1. Во-первых скачайте архив со всеми нужными файлами: Скачать

2. Нужные скрипты расположены в папке "JS". Данную папку можно закинуть в любое место, главное прописать его адрес. Так как у меня шаблон modern, буду показывать прикрутку примера на основе этого шаблона.
Папку js закидываем в templates/modern/

3. Таблицу стилей tooltip.css нужно положить в templates/moedrn/css. С помощью это таблицы стилей, можно будет изменять цвета, размеры нашей подсказки.

4. Файл userimg.php нужно записать в core/ajax/.

5.А измененный файл cms.php закидываем в папку core

Все прелюдия для установки "tooltip" уже сделаны. Теперь будем его подключать в файле template.php нашего шаблона.
1. Подключаем нужные компоненты jquery (вместо modern надо написать ваше название шаблона)
Код PHP:
<script type="text/javascript" src="/templates/modern/js/jquery.dimensions.js"></script>
<script type="text/javascript" src="/templates/modern/js/jquery.tooltip.js"></script>
2. Подключаем вызов скрипта:


Код PHP:
<script type="text/javascript">
    $(document).ready(function(){
      $("a.user_gender_link").tooltip({

        track: true,
        delay: 100,
        showBody: "::",
        showURL: false,
        opacity: 0.85
      });
    });
</script>
Вот и всё! Должно все заработать. Если хотите, чтобы выводились маленькие фотографии,то измените в core/userimg.php
  
Код PHP:
 $small = cmsRequest('size', 'str', 'big');
на

Код PHP:
 $small = cmsRequest('size', 'str', 'small');
Если у вас не получится установить тултип, напишите мне, обязательно помогу!

Источник

Видоизменение модуля

Немного изменил вид модуля. Теперь аватарка находится сверху и симметрично + добавил в меню ссылку на "Весь народ" от Захара.

Скачать


Источник

Запуск)))

Привет всем!
Решил я тоже завести свой блог. Здесь буду добавлять и описывать свои изменения и улучшения в системе. В основном делаю мелкие изменения в модулях и тд и тп, могут быть полезными для новичков, которые не знают что и где.