/ اسلایدر فول Css | اتوماتیک اسلاید | | پاس شدن با بردن موس روی آن |قابل استفاده برای وردپرس و ویبولتین |
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
صفحه 3 از 5 نخستنخست 12345 آخرینآخرین
نمایش نتایج: از 21 به 30 از 44

مقاله: اسلایدر فول Css | اتوماتیک اسلاید | | پاس شدن با بردن موس روی آن |قابل استفاده برای وردپرس و ویبولتین |

    1. اسلایدر فول Css | اتوماتیک اسلاید | | پاس شدن با بردن موس روی آن |قابل استفاده برای وردپرس و ویبولتین |

      اسلایدر فول Css | اتوماتیک اسلاید | | پاس شدن با بردن موس روی آن |قابل استفاده برای وردپرس و ویبولتین |

      بسم الله الرحمن الرحیم

      این اسلایدر خیلی سبک و شاهکاره (در یک کلام) مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

      | دمو و فولدر عکس ها و استایل سی اس اس | داخل فایل دانلودی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

      برای وردپرس این کد هارو داخل تگ های بادی قرار بدید


      کد:
      <div class="container">
              <div id="content-slider">
                  <div class="nivoSlider" style="position: relative; background: url("http://www.wikivb.ir/images/img_1.jpg") no-repeat scroll 0% 0% transparent;" id="slider">
                      <div id="mask">
                      <ul>
                  <li id="first" class="firstanimation">
                  <a href="#">
                      <img style="display: none;" src="http://www.wikivb.ir/images/img_1.jpg" alt="Cougar">
                      </a>
                  <div class="tooltip">
                      <h1>متن دلخواه</h1>
                      </div>
                      </li>
                      <li id="second" class="secondanimation">
                      <a href="#">
                      <img src="http://www.wikivb.ir/images/img_2.jpg" alt="Lions">
                      </a>
                  <div class="tooltip">
                      <h1>متن دلخواه</h1>
                      </div>
                      </li>
                       
                      <li id="third" class="thirdanimation">
                      <a href="#">
                      <img src="http://www.wikivb.ir/images/img_3.jpg" alt="Snowalker">
                      </a>
                      <div class="tooltip">
                      <h1>متن دلخواه</h1>
                      </div>
                      </li>
                                   
                      <li id="fourth" class="fourthanimation">
                      <a href="#">
                      <img src="http://www.wikivb.ir/images/img_4.jpg" alt="Howling">
                      </a>
                      <div class="tooltip">
                      <h1>متن دلخواه</h1>
                      </div>
                      </li>
                                   
                      <li id="fifth" class="fifthanimation">
                      <a href="#">
                      <img src="http://www.wikivb.ir/images/img_5.jpg" alt="Sunbathing">
                      </a>
                      <div class="tooltip">
                      <h1>متن دلخواه</h1>
                      </div>
                      </li>
                      </ul>
                      </div>
                      <div class="progress-bar"></div>
                  <div style="display: none; opacity: 0.8;" class="nivo-caption"><p></p></div><div style="display: none;" class="nivo-directionNav"><a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div><div class="nivo-controlNav"><a class="nivo-control active" rel="0">1</a><a class="nivo-control" rel="1">2</a></div></div>
              </div>
          </div>
      سپس این کد هارو داخل تگ های استایل بگذارید

      کد:
          /* wikivb css3 slider */
          html, body, div, span, applet, object, iframe,
          h1, h2, h3, h4, h5, h6, p, blockquote, pre,
          a, abbr, acronym, address, big, cite, code,
          del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
          dl, dt, dd, ol, ul, li,
          fieldset, form, label, legend,
          table, caption, tbody, tfoot, thead, tr, th, td,
          article, aside, canvas, details, embed,
          figure, figcaption, footer, header, hgroup,
          menu, nav, output, ruby, section, summary,
          time, mark, audio, video {
              margin: 0;
              padding: 0;
              border: 0;
          font-size: 100%;
          font: inherit;
          vertical-align: baseline;
      }
      /* LAYOUT */
          .container {
              margin:0 auto;
              overflow:hidden;
              width:960px;
          }
          /* CONTENT SLIDER */
          #content-slider {
              width:100%;
              height:360px;
              margin:10px auto 0;
          }
          /* SLIDER */
          #slider {
          background:#000;
              border:5px solid #eaeaea;
              box-shadow:1px 1px 5px rgba(0,0,0,0.7);
          height:320px;
              width:680px;
          margin:10px auto 0;
          overflow:visible;
          position:relative;
          }
          #mask {
          overflow:hidden;
              height:320px;
          }
          #slider ul {
              margin:0;
              padding:0;
              position:relative;
          }
          #slider li {
              width:680px;
              height:320px;
              position:absolute;
          top:-325px;
              list-style:none;
          }
          #slider li.firstanimation {
              -moz-animation:cycle 25s linear infinite;  
              -webkit-animation:cycle 25s linear infinite;       
          }
          #slider li.secondanimation {
          -moz-animation:cycletwo 25s linear infinite;
              -webkit-animation:cycletwo 25s linear infinite;    
          }
          #slider li.thirdanimation {
              -moz-animation:cyclethree 25s linear infinite;
              -webkit-animation:cyclethree 25s linear infinite;      
          }
          #slider li.fourthanimation {
              -moz-animation:cyclefour 25s linear infinite;
              -webkit-animation:cyclefour 25s linear infinite;       
          }
          #slider li.fifthanimation {
          -moz-animation:cyclefive 25s linear infinite;
              -webkit-animation:cyclefive 25s linear infinite;       
          }
          #slider .tooltip {
              background:rgba(0,0,0,0.7);
              width:300px;
          height:60px;
          position:relative;
              bottom:75px;
              left:690px;
          -moz-transition:all 0.3s ease-in-out;
              -webkit-transition:all 0.3s ease-in-out; 
          }
          #slider .tooltip h1 {
              color:#fff;
          font-size:24px;
              font-weight:300;
          line-height:60px;
          direction:rtl;
          padding:0 20px 0 0;
          }
          #slider li#first:hover .tooltip,
          #slider li#second:hover .tooltip,
          #slider li#third:hover .tooltip,
          #slider li#fourth:hover .tooltip,
          #slider li#fifth:hover .tooltip {
          left:390px;
      }
          #slider:hover li,
          #slider:hover .progress-bar {
          -moz-animation-play-state:paused;
              -webkit-animation-play-state:paused;
          }
      /* PROGRESS BAR */
          .progress-bar {
              position:relative;
          top:-5px;
          width:680px;
          height:5px;
              background:#000;
          -moz-animation:fullexpand 25s ease-out infinite;
        -webkit-animation:fullexpand 25s ease-out infinite;
          }
          /* ANIMATION */
          @-moz-keyframes cycle {
              0%  { top:0px; }
          4%  { top:0px; }
              16% { top:0px; opacity:1; z-index:0; }
          20% { top:325px; opacity:0; z-index:0; }
          21% { top:-325px; opacity:0; z-index:-1; }
              92% { top:-325px; opacity:0; z-index:0; }
              96% { top:-325px; opacity:0; }
              100%{ top:0px; opacity:1; }
               
          }
          @-moz-keyframes cycletwo {
              0%  { top:-325px; opacity:0; }
         16% { top:-325px; opacity:0; }
              20% { top:0px; opacity:1; }
          24% { top:0px; opacity:1; }
          36% { top:0px; opacity:1; z-index:0; }
          40% { top:325px; opacity:0; z-index:0; }
          41% { top:-325px; opacity:0; z-index:-1; }
          100%{ top:-325px; opacity:0; z-index:-1; }
      }
          @-moz-keyframes cyclethree {
          0%  { top:-325px; opacity:0; }
          36% { top:-325px; opacity:0; }
              40% { top:0px; opacity:1; }
              44% { top:0px; opacity:1; }
          56% { top:0px; opacity:1; }
          60% { top:325px; opacity:0; z-index:0; }
              61% { top:-325px; opacity:0; z-index:-1; }
              100%{ top:-325px; opacity:0; z-index:-1; }
      }
          @-moz-keyframes cyclefour {
              0%  { top:-325px; opacity:0; }
              56% { top:-325px; opacity:0; }
         60% { top:0px; opacity:1; }
              64% { top:0px; opacity:1; }
          76% { top:0px; opacity:1; z-index:0; }
          80% { top:325px; opacity:0; z-index:0; }
              81% { top:-325px; opacity:0; z-index:-1; }
              100%{ top:-325px; opacity:0; z-index:-1; }
          }
      @-moz-keyframes cyclefive {
          0%  { top:-325px; opacity:0; }
              76% { top:-325px; opacity:0; }
         80% { top:0px; opacity:1; }
              84% { top:0px; opacity:1; }
          96% { top:0px; opacity:1; z-index:0; }
              100%{ top:325px; opacity:0; z-index:0; }
          }
          @-webkit-keyframes cycle {
          0%  { top:0px; }
          4%  { top:0px; }
        16% { top:0px; opacity:1; z-index:0; }
          20% { top:325px; opacity:0; z-index:0; }
          21% { top:-325px; opacity:0; z-index:-1; }
              50% { top:-325px; opacity:0; z-index:-1; }
              92% { top:-325px; opacity:0; z-index:0; }
          96% { top:-325px; opacity:0; }
          100%{ top:0px; opacity:1; }
               
      }
          @-webkit-keyframes cycletwo {
              0%  { top:-325px; opacity:0; }
          16% { top:-325px; opacity:0; }
          20% { top:0px; opacity:1; }
          24% { top:0px; opacity:1; }
          36% { top:0px; opacity:1; z-index:0; }
          40% { top:325px; opacity:0; z-index:0; }
          41% { top:-325px; opacity:0; z-index:-1; } 
         100%{ top:-325px; opacity:0; z-index:-1; }
          }
          @-webkit-keyframes cyclethree {
          0%  { top:-325px; opacity:0; }
          36% { top:-325px; opacity:0; }
              40% { top:0px; opacity:1; }
              44% { top:0px; opacity:1; }
          56% { top:0px; opacity:1; z-index:0; }
              60% { top:325px; opacity:0; z-index:0; }
              61% { top:-325px; opacity:0; z-index:-1; }
          100%{ top:-325px; opacity:0; z-index:-1; }
      }
      @-webkit-keyframes cyclefour {
          0%  { top:-325px; opacity:0; }
          56% { top:-325px; opacity:0; }
              60% { top:0px; opacity:1; }
          64% { top:0px; opacity:1; }
          76% { top:0px; opacity:1; z-index:0; }
              80% { top:325px; opacity:0; z-index:0; }
              81% { top:-325px; opacity:0; z-index:-1; }
          100%{ top:-325px; opacity:0; z-index:-1; }
          }
          @-webkit-keyframes cyclefive {
          0%  { top:-325px; opacity:0; }
              76% { top:-325px; opacity:0; }
              80% { top:0px; opacity:1; }
          84% { top:0px; opacity:1; }
          96% { top:0px; opacity:1; z-index:0; }
          100%{ top:325px; opacity:0; z-index:0; }
      }
          /* ANIMATION BAR */
          @-moz-keyframes fullexpand {
              0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
              4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
             16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
             17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
             18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }  
          }
          @-webkit-keyframes fullexpand {
              0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
              4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
         16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
         17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
             18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }  
          }
          /* HTML5 display-role reset for older browsers */
          article, aside, details, figcaption, figure,
          footer, header, hgroup, menu, nav, section {
              display: block;
          }
          body {
          line-height: 1;
          }
          ol, ul {
          list-style: none;
          }
          blockquote, q {
              quotes: none;
          }
          blockquote:before, blockquote:after,
          q:before, q:after {
              content: '';
          content: none;
      }
          table {
          border-collapse: collapse;
              border-spacing: 0;
          }
      برای ویبولتین کد های اول رو به هرجایی که دوست دارید قرار بدید مثلا ناو بار و کد های دوم رو توی ادیشنال
      ولی یادتون نره که ادرس دهی باید عوض شه و فولدر که توی فایل دانلودی هست باید توی فولدر اون استایلی که دارید اسلایدر رو توش میزارید اکسترکت شه

      سایز عکس ها هم باید 320*680 باشه .
      و در ضمن اسم عکس هاهم باید همینی باشه که توی فولدر دانلود هست

      در پناه حق مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
      ویرایش توسط xperiairan : 05-01-2014 در ساعت 11:46 PM
      چنانچه این مطلب مورد پسند شما واقع شده بر روی کلیک کنید .

      12 نفر از اعضا پست xperiairan را پسندیده اند


  1. #21
    M4hdi آنلاین نیست.
    M4hdi
    کاربر اخراجي
    308نوشته26مورد پسند

    تاریخ عضویت
    Feb 2014
    شماره عضویت
    4363
    پسندیده است
    111 پست
    بلاگ
    پست
    میزان امتیاز
    36
    gamestart.ir
    نقل قول نوشته اصلی توسط xperiairan نمایش پست ها
    غیر ممکنه عزیز چون استایل وردپرس بر اساس این سه تگ اساسی ساخته شده مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی



    عزیز با دوتا کپی پیست نصب میشه سعی کنید خودتون کار های انجمن های خودتون رو انجام بدید و به هر کسی دسترسی ندید مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    خوب شما بگید چجوری نصب کنم؟ آموزش بدید ...

  2. #22
    xperiairan آنلاین نیست.
    xperiairan
    کاربر اخراجي
    532نوشته662مورد پسند

    تاریخ عضویت
    Sep 2013
    شماره عضویت
    3018
    پسندیده است
    327 پست
    بلاگ
    پست
    میزان امتیاز
    672
    wikivb.ir
    نقل قول نوشته اصلی توسط M4hdi نمایش پست ها
    خوب شما بگید چجوری نصب کنم؟ آموزش بدید ...
    @برای ویبولتین کد های اول رو به هرجایی که دوست دارید قرار بدید مثلا ناو بار و کد های دوم رو توی ادیشنال

  3. #23
    tlove آنلاین نیست.
    tlove
    کاربر سايت
    327نوشته94مورد پسند

    تاریخ عضویت
    Mar 2013
    شماره عضویت
    1120
    پسندیده است
    41 پست
    بلاگ
    پست
    میزان امتیاز
    104
    www.wikimovie.in
    چرا فایل ضمیمه دانلود نمیشه

  4. #24
    xperiairan آنلاین نیست.
    xperiairan
    کاربر اخراجي
    532نوشته662مورد پسند

    تاریخ عضویت
    Sep 2013
    شماره عضویت
    3018
    پسندیده است
    327 پست
    بلاگ
    پست
    میزان امتیاز
    672
    wikivb.ir
    نقل قول نوشته اصلی توسط tlove نمایش پست ها
    چرا فایل ضمیمه دانلود نمیشه
    برید به صفحه اول مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  5. #25
    tlove آنلاین نیست.
    tlove
    کاربر سايت
    327نوشته94مورد پسند

    تاریخ عضویت
    Mar 2013
    شماره عضویت
    1120
    پسندیده است
    41 پست
    بلاگ
    پست
    میزان امتیاز
    104
    www.wikimovie.in
    از صفحه اول دانلود نیشه

  6. #26
    xperiairan آنلاین نیست.
    xperiairan
    کاربر اخراجي
    532نوشته662مورد پسند

    تاریخ عضویت
    Sep 2013
    شماره عضویت
    3018
    پسندیده است
    327 پست
    بلاگ
    پست
    میزان امتیاز
    672
    wikivb.ir
    نقل قول نوشته اصلی توسط tlove نمایش پست ها
    از صفحه اول دانلود نیشه
    تست شد مشکلی نداره عزیز مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  7. #27
    FooKaHi آنلاین نیست.
    FooKaHi
    کاربر سايت
    106نوشته91مورد پسند

    تاریخ عضویت
    Mar 2014
    شماره عضویت
    4775
    پسندیده است
    84 پست
    بلاگ
    پست
    میزان امتیاز
    101
    FooKaHi.In
    بنده هم تست کردم و مشکلی نداشت . /

    موفق باشید . / مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    FooKaHi Coming Soon !

    Enjoyed This !


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  8. #28
    M4hdi آنلاین نیست.
    M4hdi
    کاربر اخراجي
    308نوشته26مورد پسند

    تاریخ عضویت
    Feb 2014
    شماره عضویت
    4363
    پسندیده است
    111 پست
    بلاگ
    پست
    میزان امتیاز
    36
    gamestart.ir
    نقل قول نوشته اصلی توسط TaktArinA نمایش پست ها
    ممنون از شما
    دو تا سوال داشتم :

    1- برای وردپرس ، فایل پیوست رو هم باید دانلود کرد؟ اگر باید دانلود کرد، باید کجا آپلود کنیم؟
    2- منظور از تگ های بادی و تگ های استایل ، دقیقا کدوم فایل ها هستن؟ این تگ ها کجا قرار دارند؟ من تازه وردپرس نصب کردم
    این اسلایدر مشکل زیاد داره.

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

    کلا مشکل داره ... دوستان کسی اسلایدر ساده و تمیز سراغ نداره؟

  9. #29
    xperiairan آنلاین نیست.
    xperiairan
    کاربر اخراجي
    532نوشته662مورد پسند

    تاریخ عضویت
    Sep 2013
    شماره عضویت
    3018
    پسندیده است
    327 پست
    بلاگ
    پست
    میزان امتیاز
    672
    wikivb.ir
    نقل قول نوشته اصلی توسط M4hdi نمایش پست ها
    این اسلایدر مشکل زیاد داره.

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

    کلا مشکل داره ... دوستان کسی اسلایدر ساده و تمیز سراغ نداره؟
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی عزیز شما بلد نیستید نصب کنید ایراد نگیرید مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  10. #30
    M4hdi آنلاین نیست.
    M4hdi
    کاربر اخراجي
    308نوشته26مورد پسند

    تاریخ عضویت
    Feb 2014
    شماره عضویت
    4363
    پسندیده است
    111 پست
    بلاگ
    پست
    میزان امتیاز
    36
    gamestart.ir
    نقل قول نوشته اصلی توسط xperiairan نمایش پست ها
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی عزیز شما بلد نیستید نصب کنید ایراد نگیرید مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    خوب عزیزم اینکه ناراحت شدن نداره ...

    شما اگر همون اول پست آموزش رو بطور کامل برای VB و WP و vBadvanced قرار میدادی الان ما راحت بودیم دیگه ...

    من میگم وقتی کد ها رو توی ادیشنال اضافه میکنم فونت سایر بخش ها بزرگ میشه شما میگید بلد نیستم؟

صفحه 3 از 5 نخستنخست 12345 آخرینآخرین

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

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

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

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

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