اضافه کردن tooltip به عکس با جی کوئری

دوشنبه ۲۸ مرداد ۱۳۹۲ comment

۲ دیدگاه

14,376 بازدید

با استفاده از این پلاگین می توانید به هر محل از عکس خود یک tooltips اضافه کنید

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

        <link rel="stylesheet" href="css/normalize.min.css" />
        <link rel="stylesheet" href="css/prettify.css" />
        <link rel="stylesheet" href="css/main.css" />
        <link rel="stylesheet" href="css/pictip.css" />
        <link rel="prefetch prerender" href="img/sunset.JPG" />
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
        <script src="js/vendor/prettify.js" ></script>

2- کد html جهت استفاده پلاگین

        <div class="main-container">
            <div class="main wrapper clearfix">
                <aside>
                    <h3>Demo</h3>
                    <div id="pictip-demo">
                        <img src="img/sunset.JPG" alt="Costa Rica Sunset">
                    </div>
                </aside>

            </div>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
        <script src="js/jquery.pictip.min.js" ></script>
        <script src="js/main.js"></script>

        <script>
          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-37854450-4']);
          _gaq.push(['_trackPageview']);
          (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
          })();
        </script>