Перейти к содержанию
  • Всплывающие превью при наведении мыши на текстовую ссылку


    Zero108

    Если по-простому, то можно сделать так, но только для тех групп, которые могут использовать 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.fab65a7d21d8b19ed622bc2f08e41e78.jpg 

    Пример в аттаче (превью в примере кликабельны) ↓

     

    new 3.html


    Обратная связь

    Рекомендуемые комментарии

    А не подскажете, в чем у меня косяк. Вот кусок кода с вашими изменениями:

    	</footer>
    		{{if !in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses )}}{template="mobileNavigation" if="theme.responsive" app="core" group="global" params=""}{{endif}}
    		{template="includeJS" if="theme.js_include == 'footer'" app="core" group="global" location="global" params=""}
    		{template="viglink" if="settings.viglink_enabled" app="core" group="global" params=""}
    		{template="metaTagEditor" if="isset( $_SESSION['live_meta_tags'] ) and $_SESSION['live_meta_tags'] and member.isAdmin()" app="core" group="global" params=""}
    		{template="guestTermsBar" if="!\IPS\Member::loggedIn()->member_id and \IPS\Settings::i()->guest_terms_bar" app="core" group="global" params="base64_encode( \IPS\Settings::i()->base_url )"}
    		<!--ipsQueryLog-->
    		<!--ipsCachingLog-->
    		{expression="output.endBodyCode" raw="true"}
    		{{if settings.fb_pixel_enabled and settings.fb_pixel_id and $noscript = \IPS\core\Facebook\Pixel::i()->noscript()}}
    			<noscript>
    			{$noscript|raw}
    			</noscript>
    		{{endif}}
          <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>
    	</body>
    </html>

    Попробовал вставить в штмл ссылку в виде:

    <p id="p2"><a href="https://www,yandex.ru">Codegena</a></p>

    Ничего не изменилось. может туплю где?

    Ссылка на комментарий
    Поделиться на другие сайты



    Присоединяйтесь к обсуждению

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

    Гость
    Добавить комментарий...

    ×   Вставлено с форматированием.   Вставить как обычный текст

      Разрешено использовать не более 75 эмодзи.

    ×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

    ×   Ваш предыдущий контент был восстановлен.   Очистить редактор

    ×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.


×
×
  • Создать...