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


    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>

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

    Поделиться этим комментарием


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


    Для публикации сообщений создайте учётную запись или авторизуйтесь

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать учетную запись

    Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

    Регистрация нового пользователя

    Войти

    Уже есть аккаунт? Войти в систему.

    Войти


×