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

اسلاید شو حرفه ای (شماره 2)

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

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jquery.immersive-slider.js"></script>
    <link href='immersive-slider.css' rel='stylesheet' type='text/css' />
    <link href="main.css" rel='stylesheet' type='text/css' />

2-  کد html جهت استفاده پلاگین

  <div class="wrapper">
    <header>
      <a href="http://localhost/jquery"><h1>دنیای جی کوئری</h1></a>
    </header>
    <div class="main">
      <div class="page_container">
        <div id="immersive_slider">
          <div class="slide" data-blurred="img/slide1_blurred.jpg">
            <div class="content">
              <h2><a href="http://localhost/jquery" target="_blank">دنیای جی کوئری</a></h2>
              <p>دنیای جی کوئری در بهمن ماه ۱۳۹۱ فعالیت خود را با هدف ایجاد منبعی برای دانلود سورس های آماده جی کوئری برای طراحان وب آغاز کرده است.</p>
            </div>
            <div class="image">
              <a href="http://localhost/jquery" target="_blank">
                <img src="img/slide1.jpg" alt="Slider 1">
              </a>
            </div>
          </div>
          <div class="slide" data-blurred="img/slide2_blurred.jpg">
            <div class="content">
              <h2><a href="http://www.bucketlistly.com/apps" target="_blank">دنیای جی کوئری</a></h2>
              <p>دنیای جی کوئری در بهمن ماه ۱۳۹۱ فعالیت خود را با هدف ایجاد منبعی برای دانلود سورس های آماده جی کوئری برای طراحان وب آغاز کرده است.</p>
            </div>
            <div class="image">
             <a href="http://localhost/jquery" target="_blank"> <img src="img/slide2.jpg" alt="Slider 1"></a>
            </div>
          </div>
          <div class="slide" data-blurred="img/slide3_blurred.jpg">
            <div class="content">
              <h2><a href="http://www.thepetedesign.com" target="_blank">دنیای جی کوئری</a></h2>
              <p>دنیای جی کوئری در بهمن ماه ۱۳۹۱ فعالیت خود را با هدف ایجاد منبعی برای دانلود سورس های آماده جی کوئری برای طراحان وب آغاز کرده است</p>
            </div>
            <div class="image">
              <a href="http://localhost/jquery" target="_blank"><img src="img/slide3.jpg" alt="Slider 1"></a>
            </div>
          </div>

          <a href="#" class="is-prev">&laquo;</a>
          <a href="#" class="is-next">&raquo;</a>
        </div>
      </div>
  	</div>
  	<div class="benefits">
      <div class="page_container">

  	  </div>
  	</div>
  	<script type="text/javascript">
  	  $(document).ready( function() {
  	    $("#immersive_slider").immersive_slider({
  	      container: ".main"
  	    });
  	  });
    </script>
  </div>

15 نظر

  • سلام سوالی داشتم و این بود وقتی با برنامه ی wowslider اسلاید شو میزام قسمت پاینن سمت راست نوشته wowslider تو همه فایل هاش گشتم نبود اونو چه طور پاک کنم خیلی نیاز دارم ممنون

  • سلام احسان جان
    برو تو فایل wowslider.js
    بعد سرچ رو بیار کلمه http رو پیدا کن
    انقدر بزن تا به اخری برسه
    بعد یه کم جلو تر از http کلمه show وجود داره
    به جای اون کلمه hide رو بزار مثل کد زیر :
    href:”http://”+d.toLowerCase()}).html(d).bind(“contextmenu”,function(c){return false}).hide().appendTo

  • رضا جان این کارو کردم ولی الان دیدم رو خود عکس ها هم زده ، اینو چی کار کنم 😀

  • سلام مهدی جان
    ممنون از زحماتی که میکشی
    من یه اسلایدر میخوام به صورت نمودار باشه که کاربر بتونه با او رنج قیمت کالا رو مشخص کنه نمونش تو سایت دیجی کالا هست
    ممنون میشم کمکم کنید

  • دوست عزیز فکر کنم مشکل از css و display باشه البته فکر میکنم راستی سایتتونم عالیه اون کتابیم که معرفی کردین مرجع jquery بدک نیست ولی برای تازه کارا میتونه یه چیز وحشتناک باشه بازم ممنون

  • ,سلام شاهین جان میشه لینک بدی دقیقاً متوجه بشم کدوم قسمت رو میگی ؟

    ,مرسی یاشار جان اگر کتاب آقای بادپی رو میگید به نظر من هم کتاب خوبیه چون کل توابع جی کوئری و … رو توضیح داده .

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

دانلود و پیش نمایش فایل اسلاید شو حرفه ای (شماره 2)

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

سوالی دارید؟

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