/ اسلایدر فول Css | اتوماتیک اسلاید | | پاس شدن با بردن موس روی آن |قابل استفاده برای وردپرس و ویبولتین |
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
فروش قالب وردپرس فروش فایل مشابه ژاکت وندا هاست
صفحه 2 از 5 نخستنخست 1234 ... آخرینآخرین
نمایش نتایج: از 11 به 20 از 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. #11
    CodeSaz آنلاین نیست.
    CodeSaz
    مدير بخش
    3,403نوشته6,851مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    54
    پسندیده است
    3,264 پست
    بلاگ
    0 پست
    میزان امتیاز
    6858
    مسئول 3 ستاره
    wikivb.ir
    درود.
    قابل توجه دوستانی که می گن ریپ شده و ... من یه مطلبی رو بگم !
    توی کشور ما ایران تا کنون فردی پیدا نشده که اسلایدر فرضا جی کوئری از بس بس بسازه ! یا اگرم هست افراد خاصی هستن ...
    تمامی اسلایدر هایی که گروهات طراحی انجام می دن یا هرکس دیگه ای ، از سایت ها هستن ! که منبع اصلی این اسلایدر ها سایت اچ تی ام ال درایو هست که دارای هزاران اسلیاردر همراه با کد و آموزش هست ...
    فقط یه دستی به سر و گوشش کشیده میشه ! زیاد چیز خاصی نیست ...
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    3 نفر از اعضا پست CodeSaz را پسندیده اند


    Coming Soon New Project ■

  2. #12
    Farshad Ghanbari آنلاین نیست.
    Farshad Ghanbari
    مدير بخش
    3,560نوشته8,085مورد پسند

    تاریخ عضویت
    Dec 2012
    شماره عضویت
    219
    پسندیده است
    7,092 پست
    بلاگ
    پست
    میزان امتیاز
    8092
    مسئول 2 ستاره
    www.farshadghanbari.ir
    درود

    طبق گفته های جناب دیزاینر، باید بگم که ساختن اسلایدر به این سادگیا نیست که طراح بخواد کلی از وقتشو بذاره که اسلایدر طراحی کنه!

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

    موفق باشید♥

    کاربر زیر پست Farshad Ghanbari را پسندیده است:



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

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

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

    کاربر زیر پست xperiairan را پسندیده است:



  4. #14
    TaktArinA آنلاین نیست.
    TaktArinA
    کاربر سايت
    885نوشته192مورد پسند

    تاریخ عضویت
    Jul 2013
    شماره عضویت
    2414
    پسندیده است
    1,123 پست
    بلاگ
    پست
    میزان امتیاز
    202
    www.forum.mihanvij.ir
    ممنون از شما
    اما من index.php رو نگاه کردم توش نه بادی بود و نه استایل بود
    حالا کجا بریزم کد ها شو؟

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

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

  6. #16
    TaktArinA آنلاین نیست.
    TaktArinA
    کاربر سايت
    885نوشته192مورد پسند

    تاریخ عضویت
    Jul 2013
    شماره عضویت
    2414
    پسندیده است
    1,123 پست
    بلاگ
    پست
    میزان امتیاز
    202
    www.forum.mihanvij.ir
    اصلا نه هد هست نه بادی هست نه استایل هست
    هیچی نیست جز چندتا کد

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

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

    دوستان من الان از vBadvanced استفاده میکنم. کسی هست دسترسی بدم این اسلایدر رو برای من رو صفحه ی اصلی نصب کنه؟

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

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

    نقل قول نوشته اصلی توسط M4hdi نمایش پست ها
    پسر این اسلایدر چقدر خوشگله مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بیمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بیمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

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

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


    ویرایش توسط xperiairan : 05-02-2014 در ساعت 03:29 PM

  9. #19
    TaktArinA آنلاین نیست.
    TaktArinA
    کاربر سايت
    885نوشته192مورد پسند

    تاریخ عضویت
    Jul 2013
    شماره عضویت
    2414
    پسندیده است
    1,123 پست
    بلاگ
    پست
    میزان امتیاز
    202
    www.forum.mihanvij.ir
    من کد های index.php قالب رو اینجا قرار بدم تا مشاهده کنید؟ جهت راهنمایی بیشتر
    ممنون مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

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

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

    کاربر زیر پست xperiairan را پسندیده است:



صفحه 2 از 5 نخستنخست 1234 ... آخرینآخرین

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

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

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

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

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

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