Jump to content
Дизайн и модификация IPS Community IPBSkinsBETA
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
Fantik

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

Recommended Posts

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

Вроде на jquery такое есть на некоторых CMS, текст с ссылками там подчёркнут многоточием ........

 

Для IPS 4 такого нет?

Как реализовать?

Share this post


Link to post
Share on other sites

Если по-простому, то можно так сделать, но только для тех групп, которые могут использовать 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 в редакторе автоматически. Но это нужно копать редактор. Так далеко я не заходил. Если же речь идет о простых манипуляциях, то атрибут можно добавлять руками каждый раз, когда нужно.

 

vbtBynz.jpg

 

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

 

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

new 3.html

Edited by Zero108
  • Upvote 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...