اسلایدر متن و تصویر Cycle

اسلایدر متن و تصویر Cycle

نحوه ساخت اسلایدر تصویری در jQuery با استفاده پلاگین Cycle:

با استفاده از این پلاگین، می توانید یک اسلایدر تصویری همراه با متن ایجاد نمایید.


مراحل انجام کار

این آموزش شامل ۹ قسمت زیر است:

  1. اضافه کردن فایل های لازم برای راه اندازی اسلایدر تصویری Cycle
  2. تعریف تگ های HTML و استایل CSS
  3. افکت های اسلایدر تصویری Cycle
  4. تنظیم گزینه های speed و timeout در اسلایدر تصویری Cycle
  5. تنظیم گزینه های pause و random در اسلایدر تصویری Cycle
  6. تنظیم گزینه easing در اسلایدر تصویری Cycle
  7. دکمه های “قبلی” و “بعدی”
  8. اسلایدر نیمه اتوماتیک
  9. ایجاد شمارنده برای اسلایدر cycle
  10. اسلاید تصویر بهمراه متن
  11. توقف (stop) و شروع مجدد (pause) اسلایدشو
  12. استفاده از متد callback در اسلایدر cycle
  13. دانلود فایل های پلاگین Cycle

۱- اضافه کردن فایل های لازم برای راه اندازی اسلایدر تصویری Cycle

برای استفاده از پلاگین Cycle، ابتدا باید فایل های زیر را به صفحه تان اضافه کنید:

  1. jquery.min.js
  2. jquery.cycle.all.js
  3. در صورت مقداردهی گزینه easing لینک کردن jquery.easing.1.3.js

۲- تعریف تگ های HTML و استایل CSS

در تمام مثال های این آموزش از کد HTML و استایل CSS زیر استفاده شده است:

کد HTML

<div class="pics" id="slider"> 
 <img src="images/beach1.jpg" width="200" height="200" /> 
 <img src="images/beach2.jpg" width="200" height="200" /> 
 <img src="images/beach3.jpg" width="200" height="200" /> 
</div>

استایل CSS

.pics {
 height: 232px;
 width: 232px;
 padding: ۰;
 margin: 0;
} 
 
.pics img {
 padding: ۱۵px;
 border: 1px solid #ccc;
 background-color: #eee;
 width: 200px; 
 height: ۲۰۰px; 
 top: 0; 
 left: ۰ 
}

برای کسب اطلاعات بیشتر در مورد HTML و CSS به لینک های زیر مراجعه فرمایید:

  • آموزش HTML-مقدمه اچ تی ام ال
  • آموزش CSS-معرفی سی اس اس

۳- افکت های اسلایدر تصویری Cycle

در زیر، تمام افکت های موجود برای اسلایدر تصویری Cycle، لیست شده است:

  • blindX
  • blindY
  • blindZ
  • cover
  • curtainX
  • curtainY
  • fade
  • fadeZoom
  • growX
  • growY
  • scrollUp
  • scrollDown
  • scrollLeft
  • scrollRight
  • scrollHorz
  • scrollVert
  • shuffle
  • slideX
  • slideY
  • toss
  • turnUp
  • turnDown
  • turnLeft
  • turnRight
  • uncover
  • wipe
  • zoom

به دو روش ساده می توانید، افکت مورد نظرتان را مشخص نمایید:

۱- پاس دادن نام افکت به تابع ()cycle

$('#slider').cycle('fade');

۲- استفاده از گزینه fx و مقدار دهی آن در تابع ()cycle

$('#slider').cycle({ 
 fx: 'scrollDown' 
});

۴- تنظیم گزینه های speed و timeout در اسلایدر تصویری Cycle

با استفاده از گزینه speed، می توانید سرعت افکت را به میلی ثانیه تنظیم نمایید و همچنین با استفاده از گزینه timeout می توانید وقفه بین هر اسلاید را به میلی ثانیه تعیین نمایید.

$('#slider').cycle({ 
 fx: 'fade', 
 speed: 2500 
 });
$('#slider').cycle({ 
 fx: 'scrollDown', 
 speed: 300, 
 timeout: 2000 
});

۵- تنظیم گزینه های pause و random در اسلایدر تصویری Cycle

با تنظیم گزینه pause، با مقدار “۱” زمانی که مکان نما روی اسلایدر قرار گرفت، عملیات اسلاید، متوقف می شود و همچنین مقدار دهی گزینه random با مقدار “۱” نیز همان طور که از اسمش پیداست باعث می شود تا تصاویر بصورت تصادفی نمایش داده شود.

<script>
$(document).ready(function(){
 $('#slider').cycle({
 fx: 'fade',
 pause: 1
 });
});
</script>
<script>
$(document).ready(function(){
 $('#slider').cycle({
 fx: 'scrollDown',
 random: 1
 });
});
</script>

۶- تنظیم گزینه easing در اسلایدر تصویری cycle

اگر پلاگین Easing را به صفحه اضافه کرده باشید، می توانید گزینه easing را مقدار دهی و استفاده کنید:

<script>
$(document).ready(function(){
 $('#slider').cycle({
 fx: 'zoom',
 easing: 'easeInBounce',
 delay: -4000
 });
});
</script>
<script>
$(document).ready(function(){
 $('#slider').cycle({
 fx: 'scrollDown',
 easing: 'easeOutBounce',
 delay: -2000
 });
});
</script>

 ۷- دکمه های “قبلی” و “بعدی”

علاوه بر اسلاید اتوماتیک تصاویر، می توانید با استفاده از گزینه های “prev” و “next” تصاویر را بصورتی دستی اسلاید کنید. این گزینه ها با شناسه عناصری که به ازای کلیک شدن عملیات “قبلی” و “بعدی” اتفاق می افتد مقداردهی می شوند.

زمانی که “۰=timeout” باشد، یک اسلایدر کاملاً دستی خواهیم داشت. در مثال زیر زمانی که روی اسلایدر کلیک شود، عملیات اسلاید انجام می شود:

<script>
$(document).ready(function(){
 $('#slider').cycle({
 fx: 'slideY',
 speed: 300,
 next: '#slider',
 timeout: 0
 });
});
</script>

در مثال زیر، از دو لینک <a> با id یا شناسه “next2” و “prev2” استفاده شده است و زمانی که کاربر روی لینک ها کلیک کند، عملیات اسلاید انجام می شود:

<script>
$(document).ready(function(){
 $('#slider').cycle({
 fx: 'fade',
 speed: 'fast',
 timeout: 0,
 next: '#next2',
 prev: '#prev2'
 });
});
</script>

۸- اسلایدر نیمه اتوماتیک

می توانید با مقداردهی گزینه timeout با عددی بزرگتر از صفر، همراه با گزینه های “prev” و “next”، یک اسلایدر نیمه اتوماتیک یا دستی-اتوماتیک داشته باشید. در مثال زیر هر ۳ ثانیه یکبار (timeout: 3000) عملیات اسلاید بصورت اتوماتیک انجام می شود، اما زمانی که موس روی اسلایدر قرار گرفت، عملیات اسلاید متوقف می شود (pause: 1) و به ازای هر کلیک روی اسلایدر، تصاویر جابه جا می شود:

<script>
$(document).ready(function(){
 $('#slider').cycle({
 fx: 'fade',
 speed: 300,
 timeout: 3000,
 next: '#slider',
 pause: 1
 });
});
</script>

۹- ایجاد شمارنده برای اسلایدر cycle

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

<script>
$(document).ready(function(){
 $('#slider')
 .before('<div id="nav">')
 .cycle({
 fx: 'turnDown',
 speed: 'fast',
 timeout: 0,
 pager: '#nav'
 });
});
</script>

توجه: زمانی که از گزینه pager استفاده می کنید، می توانید براحتی شمارنده را استایل دهی کنید، همچنین برای متمایز کردن شماره فعال، می توانید از کلاس “activeSlide” استفاده کنید، این کلاس زمانی که روی شماره کلیک می کنید بصورت اتوماتیک تنظیم می شود:

#nav a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px; }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }

۱۰- اسلاید تصویر بهمراه متن

برای اسلایدر cycle هیچ محدودیتی از نظر محتوی وجود ندارد و هر چیزی را می توانید اسلاید کنید:

<div class="pics" id="slider">
 <div>
 <img src="/images_cycle/beach1.jpg" width="200" height="200" />
 <p>برای کسب اطلاعات بیشتر در مورد جاوا اسکریبت به لینک زیر مراجعه فرمایید:</p></br>
 <a href="/http"//www.webtekar.ir/javascript">آموزش جاوا اسکریبت</a>
 </div>
 <div>
 <img src="/images_cycle/beach2.jpg" width="200" height="200" />
 <p>برای کسب اطلاعات بیشتر در مورد HTML به لینک زیر مراجعه فرمایید:</p></br>
 <a href="/http"//www.webtekar.ir/html">آموزش HTML</a>
 </div>
 <div>
 <img src="/images_cycle/beach3.jpg" width="200" height="200" />
 <p>برای کسب اطلاعات بیشتر در مورد CSS به لینک زیر مراجعه فرمایید:</p></br>
 <a href="/http"//www.webtekar.ir/css">آموزش CSS</a>
 </div>
</div>
<script>
$(document).ready(function(){
 $('#slider').cycle({
 fx: 'scrollUp',
 timeout: 1000,
 delay: -2000
 });
});
</script>

۱۱- توقف (stop) و شروع مجدد (pause) اسلایدشو

با ارسال مقدار “stop” به متد ()cycle می توانید بصورت دستی اجرای اسلایدشو را متوقف کنید:

$('#slider').cycle('stop');

با ارسال مقدار “pause” به متد ()cycle می توانید بصورت دستی اجرای اسلایدشو را از سر بگیرید:

$('#slider').cycle('pause');

۱۲- استفاده از متد callback در اسلایدر cycle

همان طور که می دانید تابع callback، بعد از اجرای کامل متحرک سازی اجرا می شود. برای کسب اطلاعات بیشتر به لینک آموزش jQuery-تابع callback مراجعه نمایید.

<div class="pics" id="slider">
 <img src="/images_cycle/beach1.jpg" width="200" height="200" alt="توضیحی درباره عکس شماره ۱" />
 <img src="/images_cycle/beach2.jpg" width="200" height="200" alt="توضیحی درباره عکس شماره ۲"/>
 <img src="/images_cycle/beach3.jpg" width="200" height="200" alt="توضیحی درباره عکس شماره ۳"/>
</div>
<div id="output">وضعیت اسلایدر</div>
<script>
$(document).ready(function(){
 $('#slider').cycle({
 fx: 'scrollLeft',
 speed:5000,
 timeout: 5000,
 before: onBefore,
 after: onAfter
 });
 function onBefore() {
 $('#output').html("در حال حاضر، تصویر با آدرس زیر در حال اسلاید شدن است<br>" + this.src);
 }
 function onAfter() {
 $('#output').html("اسلاید برای تصویر با آدرس زیر بصورت کامل انجام شد:<br>" + this.src)
 .append('<h3>' + this.alt + '</h3>');
 }
});
</script>

دانلود فایل های پلاگین Cycle

حجم: ۱۵٫۷ کیلو بایت



اگه خوشت اومد به اشتراک بزار


اگه به اشتراک نزاشتی حداقل لایک کن:(

نظر شما در رابطه با این آموزش چیست


بالا

تمامی حقوق مادی و معنوی این وبسایت محفوظ میباشد و متعلق است به Webtekar.ir.
Google