طراحی وب سایت | طراحی سایت | شرکت طراحی وب سایت پروگ پارس

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

با استفاده از این پلاگین می توانید به هر محل از عکس خود یک 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>

برای تغیر جای دایره ها به پوشه js رفته بعد به فایل main.js رفته و تغیر دهید

نظر فراموش نشه

2 نظر

دانلود و پیش نمایش

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

دانلود پلاگین پیش نمایش آنلاین

سوالی دارید؟

● در تلگرام، پاسخگوی شما :)