1. در صورتی که برای اولین بار از این سایت بازدید میکنید, لازم است تا راهنمای سایت را مطالعه فرمایید. در صورتی که هنوز عضو نشده اید برای ارسال مطالب , دانلود فایل ها و ...عضو شده و در سایت ثبت نام کنید.با کلیک بر روی ثبت نام در مدت کوتاهی عضو سایت شده و از مطالب و امکانات سایت بهره مند شوید.
  2. هر گونه بحث سیاسی و خلاف قوانین جمهوری اسلامی ایران ممنوع می باشد و به شدت برخورد می شود.
  3. در صورت شکایت از مدیران و ناظران انجمن با کاربر farbod در ارتباط باشید.

معرفی پلاگینی بهینه برای تصاویر گالری

شروع موضوع توسط nooshin88 ‏15/8/16 در انجمن ترفندکده

  1. nooshin88

    nooshin88 کاربر اخراجی

    تاریخ عضویت:
    ‏30/1/16
    ارسال ها:
    23
    تشکر شده:
    22
    امتیاز دستاورد:
    18
    وب سایت:
    [​IMG]
    در این‌جا قصد داریم اندکی از تجربیات خود را با علاقه‌مندان طراحی سایت به اشتراک بگذاریم –پلاگین Touch-touch.

    Touch-touch یک پلاگین j-query است که مجموعه‌ای از عکس‌های یک صفحه وب را به یک گالری موبایل سازگار با لمس دست تبدیل می‌کند.

    این پلاگین با کلیه مرورگرهای شناس و معروف سازگار است (به استثناء مرورگر اینترنت اکسپلورر ورژن پایینتر از ۷).

    از همه مهمتر آن‌که برای سیستم‌عامل‌های IOS و اندروید بهینه شده‌است.

    نکات:

    - قابلیت انیمیشنی و انتقال با کمک دستورات CSS3.

    - دارای قابلیت ریسپانسیو، پوشانندگی کل صفحه نمایشی و تطبیق با جهت صفحه نمایشی.

    - بارگذاری تصاویر ازقبل، تنها در زمانی که مورد نیاز است.

    -پشتیبانی از عملیات swing میان عکس‌ها.

    - نمایش فلش‌ها بر روی صفحه

    انیمیشن‌ها در Touch- touch کاملا مبتنی بر CSS3 هستند. از سویی دیگر، در این پلاگین ویژگی انتقال را داریم که یک ویژگی اضافی برای دستگاه‌های موبایل به حساب می‌آید. (طبیعتا این بدان معنی است که شما نمی‌توانید آن را بر روی مرورگرهای قدیمی‌تر ببینید.)

    با بکارگیری هوشمندانه CSS، این پلاگین با اندازه و جهت دستگاه‌ شما قابل تنظیم خواهد بود. به این‌صورت که عکس‌ها کوچک و بزرگ می‌شوند تا بتوانند صفحه نمایشی حاضر را پر کنند.( می‌توانید این قابلیت را با کوچک کردن اندازه پنجره مرورگر خود آزمایش کنید.)

    بر روی دسکتاپ نیز، شما می‌توانید قابلیت ریسپانسیو و انیمیشن های روان را داشته باشید. در این حالت مرور کردن گالری هم از طریق فلش های روی صفحه امکان‌پذیر خواهد بود و هم از طریق فلش های روی صفحه کلید.

    [​IMG]

    روش استفاده:

    استفاده از آن بسیار ساده می‌باشد. فولدر touchTouch را که در زیر شاخه assets/ در فایل دانلود قرار دارد باز کنید. سپس در قسمت <head> از کدهای خود touchTouch/touchTouch.css و touchTouch.jquery.js را قرار دهید لازم به یادآوری است که فایل touchTouch.jquery.js می‌بایست بلافاصله پس از کتابخانه jquery شما قرار بگیرد.

    کد:
    <head>
    <link rel="stylesheet" href="/assets/touchTouch/touchTouch.css">
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="/assets/touchTouch/touchTouch.jquery.js"></script>
    </head>
    
    پس از آن در تگ body، با کمک تگ‌های a، تصاویر گالری را قرار دهید.
    کد:
    <div class="thumbs">
    <a href="/images/img0.jpg" title="Lion Rock">
      <img src="/images/img0_thumb">
    </a>
    <a href="/images/img1.jpg" title="Waikato Landscape">
      <img src="/images/img1_thumb">
    </a>
    <a href="/images/img2.jpg" title="Tauranga Bridge">
      <img src="/images/img2_thumb">
    </a>
    </div>
    
    بعد از آنکه تمامی مراحل بالا را انجام دادید، شما دو راه دارید یا کد مربوط به گالری را در فایل Html خود بیاورید یا کد زیر را در فایل javascript خود فراخوانی کنید.
    کد:
    <script type="text/javascript">
      $(function(){
        // Initialize the gallery
        $('#thumbs a').touchTouch();
      });
    </script>
    
     
    آخرین بار توسط مدیر ویرایش شد: ‏16/8/16
    sama0 و Sig از این پست تشکر کرده اند.
  2. ッ

    مدیر کل انجمن عضو کادر مدیریت برنده مسابقات پاپ موزیکی

    تاریخ عضویت:
    ‏12/3/15
    ارسال ها:
    23,928
    تشکر شده:
    65,422
    امتیاز دستاورد:
    113
    ويرايش شد..:shifty:
     
    sama0 و Sig از این پست تشکر کرده اند.
بارگذاری...