Текстовые ссылки в сообщениях с всплывающими изображениями - Дизайн и модификация Invision Power Board

Перейти к содержимому

 

СвернутьПрикрепленные теги

Теги не найдены

Страница 1 из 1

Текстовые ссылки в сообщениях с всплывающими изображениями

#1 Пользователь не на сайте   Fantik ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 57
  • Регистрация: 06-Февраль 17
  • Репутация: 2
  • IPB version:3.4.x
 

Отправлено 22 Апрель 2018 - 18:26

Есть ли хук, который позволяет делать ссылки на изображения в постах, чтоб их было видно только когда наводишь мышкой на текстовую ссылку и изображение всплывает, убираешь мышку и оно исчезает.
Вроде на jquery такое есть на некоторых CMS, текст с ссылками там подчёркнут многоточием ........

Для IPS 4 такого нет?
Как реализовать?
0

#2 Пользователь не на сайте   Zero108 ответил: »

 
 
  • Advanced
  • ***
  • Смотреть галерею
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 1 757
  • Регистрация: 25-Июль 09
  • Репутация: 112
  • IPB version:4.1.x
 

Отправлено 22 Апрель 2018 - 21:22

Если по-простому, то можно так сделать, но только для тех групп, которые могут использовать HTML в сообщениях.

1. Открыть globalTemplate и вставить перед </body> следующий код:

            <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <link href="http://codegena.com/assets/css/image-preview-for-link.css" rel="stylesheet">     
  <script type="text/javascript">
    $(function() {
                $('#p1 a').miniPreview({ prefetch: 'pageload' });
                $('#p2 a').miniPreview({ prefetch: 'parenthover' });
                $('#p3 a').miniPreview({ prefetch: 'none' });
            });
  </script> <script src="http://codegena.com/assets/js/image-preview-for-link.js"></script>


2. Добавить в редакторе текст сообщения в HTML-режиме:

<p id="p1"><a href="https://artsgallery.pro">Cnet</a></p>
<p id="p2"><a href="https://artsgallery.pro">Codegena</a></p>
<p id="p3"><a href="https://artsgallery.pro">Apple</a></p>


Атрибуты:
id="p1" - создать и показать при наведении курсора мыши предварительный просмотр страницы по ссылке при загрузке страницы (заранее).
id="p2" - создать и показать предварительный просмотр страницы по ссылке при наведении курсора мыши на ссылку (в момент наведения).
id="p3" - создавать и показывать предварительный просмотр страницы при наведении курсора на ссылку каждый раз при наведении.

Очевидно, что предпочтителен вариант p2, так как будет меньше всего нагружать браузер.

Можно попытаться сделать так, чтобы атрибут id="p2" добавлялся в каждый тег p в редакторе автоматически. Но это нужно копать редактор. Так далеко я не заходил. Если же речь идет о простых манипуляциях, то атрибут можно добавлять руками каждый раз, когда нужно.

-IMG-

Пример в аттаче.

PS Превью,кстати, кликабельны ↓

Вложений

  • Вложение  new 3.html (993байт)
    Количество загрузок: 6

Сообщение изменено: Zero108 (22 Апрель 2018 - 22:02)

1

Сообщить об этой теме:


Страница 1 из 1


Быстрый ответ

  

1 пользователей читают эту тему
0 зарегистрированных, 1 гостей, 0 скрытых


Контактная информация

Вопросы по работе сайта

+7 (917) 501-4765
C 10 до 20 в рабочие дни (время московское)

Техническая поддержка

Контактные данные специалистов

Дизайн форумов

IPB 3.x ¦ IPB 2.x

Бесплатные шаблоны

IPB 3.2 – 3.4 ¦ IPB 3.1 ¦ IPB 3.0 ¦ IPB 2.2 – 2.3 ¦ IPB 2.1 ¦ Клипарт
Лицензия на использование ¦ Ваша поддержка ¦ О проекте
Copyright © 2005-2018 IPBSkins.ru Team
При копировании материалов с сайта
прямая ссылка на источник обязательна