Jump to content
  • Всплывающие превью при наведении мыши на текстовую ссылку


    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



    User Feedback

    Recommended Comments

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

    	</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>

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

    Share this comment


    Link to comment
    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

×