تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 1 از 2 12 آخرینآخرین
نمایش نتایج: از 1 به 10 از 13

مقاله: ساخت اسلایدر با جی کوئری

    1. ساخت اسلایدر با جی کوئری »

      ساخت اسلایدر با جی کوئری

      نگارش: , by (توسعه دهنده سایت)
      2013/06/02 01:49 PM
      امتیاز: 

      با سلام
      امروز یک پلاگین جی کوئری نوشتم که با اون می تونید برای خودتون اسلایدر بسازید.
      لینک پروژه
      برای استفاده اول باید لایبری جی کوئری و کد های سی اس اس رو قبل از </head> بذارید.
      کد:
      <style>
              .hamyar_slider{
                      list-style-type:none;
              position:relative;
              margin:auto;
                      direction:ltr !important; /* Dont' change this */
          }
          .hamyar_slider ul li{
              list-style-type:none;
              float:left;
              padding:5px;
              border:1px solid #ccc;
                      margin:5px;
              border-radius:5px;
              -webkit-transition : all 0.4s ease-in;
                      -moz-transition : all 0.4s ease-in;
                  -o-transition : all 0.4s ease-in;
              cursor:pointer;
              position:relative;
              width:140px;
              text-align:center;
                      direction:ltr; /* You can change it */
          }
          .hamyar_slider li:hover{
              border:1px solid #00F;
              -webkit-transition : all 0.4s ease-in;
                  -moz-transition : all 0.4s ease-in;
                  -o-transition : all 0.4s ease-in;
          }
          .disable{
              -webkit-transition : all 0.4s ease-in;
                      -moz-transition : all 0.4s ease-in;
                  -o-transition : all 0.4s ease-in;
              opacity:.5;
          }
      </style>
      <script src="js/jquery.js"></script>
      سپس کد های اچ تی ام ال:
      کد:
      <div class="hamyar_slider">
            <ul>
              <li><img src="img/n.png">1</li>
              <li><img src="img/n.png">2</li>
              <li><img src="img/n.png">3</li>
              <li><img src="img/n.png">4</li>
              <li><img src="img/n.png">5</li>
              <li><img src="img/n.png">6</li>
              <li><img src="img/n.png">7</li>
              <li><img src="img/n.png">8</li>
              <li><img src="img/n.png">9</li>
              <li><img src="img/n.png">10</li>
            </ul>
          </div>
      <div class="icon-arrow-left"></div>
      <div class="icon-arrow-right"></div>
      سپس اینکلود کردن پلاگین و ران کردن آن که باید قبل از </body> باشد:
      کد:
      <script src="js/hamyar_slider.js"></script>
      <script> 
      $('.hamyar_slider').hamyar_slider({
                show:5,
                btnprev:'.icon-arrow-right',
                btnext:'.icon-arrow-left',
                speed:500,
                disable_class: 'disable',
                auto :true,
                auto_time: 2500,
                slide:2
      });
      </script>
      توضیحات:
      show: تعداد اسلاید هایی است که باید نمایش داده شود.
      btnprev:سلکتور دکمه عقب رفتن هست.
      btnext:سلکتور دکمه جلو رفتن هست.
      speed:سرعت تغییر اسلاید ها.
      auto:حالت اتوماتیک را تعیین می کند. true برای فعال کردن و false برای غیر فعال کردن.
      auto_time:زمان تغییر اسلاید ها در حالت اتوماتیک است.به میلی ثانیه وارد شود.1ثانیه=1000میلی ثانیه.
      slide:تعداد اسلاید هایی که در هر بار جلو یا عقب برده می شود.
      موفق باشید.
      دریافت پلاگین
  1. Top | #2
    مدیر بازنشته

    ورژن ویبولتین
    4.2.0
    نوشته ها
    2,419
    میزان امتیاز
    301

    پیش فرض

    خسته نباشی دوست من

    2 تشکر توسط:


  2. Top | #3
    کاربر سایت

    ورژن ویبولتین
    4.2.1,4.2.2
    نوشته ها
    4,359
    میزان امتیاز
    517

    پیش فرض

    خسته نباشی محمد حسین جان

  3. Top | #4
    کاربر سایت

    ورژن ویبولتین
    5
    نوشته ها
    1,305
    میزان امتیاز
    139

    پیش فرض

    ببخشید راهی برای استفاده اون در ایندکس میدین و باید بگم بنده از css خارجی استفاده میکنم.

  4. Top | #5
    مدیر بازنشته

    ورژن ویبولتین
    4
    نوشته ها
    2,571
    میزان امتیاز
    304

    پیش فرض

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

    3 تشکر توسط:


  5. Top | #6
    کاربر سایت

    ورژن ویبولتین
    5
    نوشته ها
    1,305
    میزان امتیاز
    139

    پیش فرض

    نقل قول نوشته اصلی توسط Roach نمایش پست ها
    همه ی کد های بالا رو بریزید توی یه فایل اچ تی ام ال
    سی اس اس هاشم که تگ استایل داره و نیازی نیست فایل ضمیمه بشه واسه سی اس اس
    بعدش با ای فریم صفحه رو فراخوانی کنید
    خیلی ممنون میشه برای درک بیشتر شما این فایل به صورت کد نمایش بدی یهنی فایل های html و css رو ممنون.

  6. Top | #7
    کاربر سایت

    ورژن ویبولتین
    5
    نوشته ها
    1,305
    میزان امتیاز
    139

    پیش فرض

    دوستان خواهش کسی نیست.

  7. Top | #8
    کاربر سایت

    ورژن ویبولتین
    4.2
    نوشته ها
    93
    میزان امتیاز
    13

    پیش فرض

    دوست گرامی ممنون از این پلاگین
    فقط یک نکته :
    این تغییرات باید در فایل forum.php اعمال بشه ؟؟
    چون در فایل header.php که تگ <head> وچود نداره !!

    یه راهنمایی در این مورد انجام بدین ممنون میشم

    کاربر مقابل از alexi بابت این پست مفید تشکر کرده است:


  8. Top | #9
    کاربر سایت

    ورژن ویبولتین
    4.2.0
    نوشته ها
    863
    میزان امتیاز
    94

    پیش فرض

    دوستان من هم به این نیاز دارم، اما

    1. میخوام پایین سایت باشه
    2. گفتید از قبل باید چیکار کنیم ؟؟؟

    یکی اینو ترجمه کنه :

    برای استفاده اول باید لایبری جی کوئری و کد های سی اس اس رو قبل از </head> بذارید.

  9. Top | #10
    کاربر سایت

    ورژن ویبولتین
    4.1.5
    نوشته ها
    101
    میزان امتیاز
    15

    پیش فرض

    دوست عزیز خواهشآ درست توضیج بدید که هرکدام از کد ها باید در کدام قالب قرار بگیرند. اینجوری که گفتید هیچ ## متوجه نمیشه که باسد چیکار کنه

صفحه 1 از 2 12 آخرینآخرین

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •