نحوه ساخت اسلایدر تصویری در jQuery با استفاده پلاگین Cycle
با استفاده از این پلاگین، می توانید یک اسلایدر تصویری همراه با متن ایجاد نمایید.
DEMO یا پیش نمایش اسلایدر Cycle
برای مشاهده نتیجه کار، روی لینک های زیر کلیک نمایید:
مراحل انجام کار
این آموزش شامل 9 قسمت زیر است:
- اضافه کردن فایل های لازم برای راه اندازی اسلایدر تصویری Cycle
- تعریف تگ های HTML و استایل CSS
- افکت های اسلایدر تصویری Cycle
- تنظیم گزینه های speed و timeout در اسلایدر تصویری Cycle
- تنظیم گزینه های pause و random در اسلایدر تصویری Cycle
- تنظیم گزینه easing در اسلایدر تصویری Cycle
- دکمه های "قبلی" و "بعدی"
- اسلایدر نیمه اتوماتیک
- ایجاد شمارنده برای اسلایدر cycle
- اسلاید تصویر بهمراه متن
- توقف (stop) و شروع مجدد (pause) اسلایدشو
- استفاده از متد callback در اسلایدر cycle
- دانلود فایل های پلاگین Cycle
1- اضافه کردن فایل های لازم برای راه اندازی اسلایدر تصویری Cycle
برای استفاده از پلاگین Cycle، ابتدا باید فایل های زیر را به صفحه تان اضافه کنید:
- jquery.min.js
- jquery.cycle.all.js
- در صورت مقداردهی گزینه easing لینک کردن jquery.easing.1.3.js
2- تعریف تگ های 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: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}برای کسب اطلاعات بیشتر در مورد HTML و CSS به لینک های زیر مراجعه فرمایید:
3- افکت های اسلایدر تصویری Cycle
در زیر، تمام افکت های موجود برای اسلایدر تصویری Cycle، لیست شده است:
blindXblindYblindZcovercurtainXcurtainYfadefadeZoomgrowXgrowYscrollUpscrollDownscrollLeft
scrollRightscrollHorzscrollVertshuffleslideXslideYtossturnUpturnDownturnLeftturnRightuncoverwipezoom
به دو روش ساده می توانید، افکت مورد نظرتان را مشخص نمایید:
1- پاس دادن نام افکت به تابع ()cycle
$('#slider').cycle('fade');2- استفاده از گزینه fx و مقدار دهی آن در تابع ()cycle
$('#slider').cycle({
fx: 'scrollDown'
});4- تنظیم گزینه های speed و timeout در اسلایدر تصویری Cycle
با استفاده از گزینه speed، می توانید سرعت افکت را به میلی ثانیه تنظیم نمایید و همچنین با استفاده از گزینه timeout می توانید وقفه بین هر اسلاید را به میلی ثانیه تعیین نمایید.
$('#slider').cycle({
fx: 'fade',
speed: 2500
});$('#slider').cycle({
fx: 'scrollDown',
speed: 300,
timeout: 2000
});5- تنظیم گزینه های pause و random در اسلایدر تصویری Cycle
با تنظیم گزینه pause، با مقدار "1" زمانی که مکان نما روی اسلایدر قرار گرفت، عملیات اسلاید، متوقف می شود و همچنین مقدار دهی گزینه random با مقدار "1" نیز همان طور که از اسمش پیداست باعث می شود تا تصاویر بصورت تصادفی نمایش داده شود.
<script>
$(document).ready(function(){
$('#slider').cycle({
fx: 'fade',
pause: 1
});
});
</script>
<script>
$(document).ready(function(){
$('#slider').cycle({
fx: 'scrollDown',
random: 1
});
});
</script>
6- تنظیم گزینه 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>7- دکمه های "قبلی" و "بعدی"
علاوه بر اسلاید اتوماتیک تصاویر، می توانید با استفاده از گزینه های "prev" و "next" تصاویر را بصورتی دستی اسلاید کنید. این گزینه ها با شناسه عناصری که به ازای کلیک شدن عملیات "قبلی" و "بعدی" اتفاق می افتد مقداردهی می شوند.
زمانی که "0=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>
8- اسلایدر نیمه اتوماتیک
می توانید با مقداردهی گزینه timeout با عددی بزرگتر از صفر، همراه با گزینه های "prev" و "next"، یک اسلایدر نیمه اتوماتیک یا دستی-اتوماتیک داشته باشید. در مثال زیر هر 3 ثانیه یکبار (timeout: 3000) عملیات اسلاید بصورت اتوماتیک انجام می شود، اما زمانی که موس روی اسلایدر قرار گرفت، عملیات اسلاید متوقف می شود (pause: 1) و به ازای هر کلیک روی اسلایدر، تصاویر جابه جا می شود:
<script>
$(document).ready(function(){
$('#slider').cycle({
fx: 'fade',
speed: 300,
timeout: 3000,
next: '#slider',
pause: 1
});
});
</script>9- ایجاد شمارنده برای اسلایدر 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; } 10- اسلاید تصویر بهمراه متن
برای اسلایدر cycle هیچ محدودیتی از نظر محتوی وجود ندارد و هر چیزی را می توانید اسلاید کنید:
<div class="pics" id="slider">
<div>
<img src="/images_cycle/beach1.jpg" width="200" height="200" />
<p>برای کسب اطلاعات بیشتر در مورد جاوا اسکریبت به لینک زیر مراجعه فرمایید:</p></br>
<a href="/http"//www.beyamooz.com/javascript">آموزش جاوا اسکریبت</a>
</div>
<div>
<img src="/images_cycle/beach2.jpg" width="200" height="200" />
<p>برای کسب اطلاعات بیشتر در مورد HTML به لینک زیر مراجعه فرمایید:</p></br>
<a href="/http"//www.beyamooz.com/html">آموزش HTML</a>
</div>
<div>
<img src="/images_cycle/beach3.jpg" width="200" height="200" />
<p>برای کسب اطلاعات بیشتر در مورد CSS به لینک زیر مراجعه فرمایید:</p></br>
<a href="/http"//www.beyamooz.com/css">آموزش CSS</a>
</div>
</div>
<script>
$(document).ready(function(){
$('#slider').cycle({
fx: 'scrollUp',
timeout: 1000,
delay: -2000
});
});
</script>
11- توقف (stop) و شروع مجدد (pause) اسلایدشو
با ارسال مقدار "stop" به متد ()cycle می توانید بصورت دستی اجرای اسلایدشو را متوقف کنید:
$('#slider').cycle('stop');با ارسال مقدار "pause" به متد ()cycle می توانید بصورت دستی اجرای اسلایدشو را از سر بگیرید:
$('#slider').cycle('pause');12- استفاده از متد callback در اسلایدر cycle
همان طور که می دانید تابع callback، بعد از اجرای کامل متحرک سازی اجرا می شود. برای کسب اطلاعات بیشتر به لینک آموزش jQuery-تابع callback مراجعه نمایید.
<div class="pics" id="slider">
<img src="/images_cycle/beach1.jpg" width="200" height="200" alt="توضیحی درباره عکس شماره 1" />
<img src="/images_cycle/beach2.jpg" width="200" height="200" alt="توضیحی درباره عکس شماره 2"/>
<img src="/images_cycle/beach3.jpg" width="200" height="200" alt="توضیحی درباره عکس شماره 3"/>
</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
دانلود مستقیم: beyamooz_slider_cycle.zip
حجم: 15.7 کیلو بایت
طبق آموزش خوبتون وقتی موس رو میبریم روی عکس با کد pause: 1 اسلایدر متوقف میشه
حالا راهنمایی بفرمایید علاوه بر آنکه متوقف بشه می خوام timeout از سر گرفته بشه یعنی مجددا زمانش تکرار بشه
اگر بخوام بهتر بگم مثلا ما تنظیم کردیم timeout رو روی 5 ثانیه اگر 2 ثانیه ازش گذشته باشه و موس بره روش اسلایدر متوقف میشه و وقتی موس رو برداریم timeout رو ادامه میده یعنی بعد از 3 ثانیه دیگه اسلاید عوض میشه
حالا می خوام وقتی موس میره روش متوقف بشه و زمانی که موس رو برمیداریم timeout دوباره 5 ثانیه دیگه متوقف بشه و بعد اسلاید عوض بشه
با سپاس فراوان از زحمات شما عزیزان و پاسخ خوبتون....
بالاخره بعد از این همه سرچ و آزمون و خطا تونستم با آموزش بی نظیرتون اسلایدر مورد علاقه ام رو در سایتم قرار بدم واقعا ممنون و سپاس بی کران...
یه سؤال هم داشتم اینکه اگر بخواهیم در هر باسلاید به جای یک تصویر مثلا دو یا چند تصویر کنار هم نشون داده بشه چه باید بکنیم.
ممنون از پاسختون
من الان بخوام اسلایدر سایکلی ک همراه با متن گذاشتید رو از دیتابیس بخونم عکس و متن هاشو باید چکارکنم؟؟؟
آموزش اتون عالی بود.
تو کل مطالب فارسی که دارن اسلایدر آموزش میدن اینجا اولین جایی هست که به این راحتی داره اسلایدر آموزش میده
ممنون
آیا افکتهای cycle همین هایی هست که در قسمت 3 معرفی کردید؟
آیا پلاگین cycle در نسخه 2ش افکت های جذاب تری داره؟
یا باید بدنبال اسلاید شوهای دیگه درکنارش باشیم
// use the 'all' fx option to randomly rotate through all available effects
$(document).ready(function() {
$('#slideshow1').cycle({
fx: 'all'
});
});
// or specify the exact effects you want using a comma delimited string;
// you can disable the effect randomization by setting the
// 'randomizeEffects' option to false
$(document).ready(function() {
$('#slideshow2').cycle({
fx: 'scrollLeft,scrollDown,scrollRight,scrollUp',
randomizeEffects: false,
easing: 'easeInBack' // easing supported via the easing plugin
});
});
چطوری میتونم به جای شمارنده متن اضافه کنم مثلا به جای شماره یک "متن دلخواه" قرار بگیره و برای بقیه شماره ها هم همینطور.
اگه میشه لطف کنید لینک های زیر رو ببینید من میخوام یه چیز شبیه اینا درست کنم.
http://cdn.livedemo00.template-help.com:82/wt_38234/#!/pageTraining
http://cdn.livedemo00.template-help.com:82/wt_39339/#!/pageHome
روی گزینه های منو این سایت ها کلیک کنید متوجه میشید.
ممنون
var titles = ['img1','img2','img3','img4','img5','img6','img7','img8'];
$('#slider')
.before('')
.cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav',
pagerAnchorBuilder: function (index) {
return '' + titles[index] + '';
}
});
});مثال خودتان امتحان کنید:
beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_slider_cycle_pager
ممنون از مطالب مفید سایتتون
من میخام مانند این سایت http://www.dddd.ir/ کلماتی رو داشته باشم که به صورت اسلاید جابه جا بشن
ممنون میشم اگه کسی میدونه لطفا راهنمایی کنه
یا اگر خودتون میشه راهنماییم کنید
ولی یه مشکل کوچیک نمیتونم توی صفحه جابجاش کنم و جای مورد نظر قرارش بدم..
برای جابه جایی شمارنده اسلایدر، خیلی راحت می توانید از CSS استفاده کنید. در واقع شما کاملاً به عنصر div ای که شمارنده در آن قرار دارد از طریق id آن دسترسی دارید:#nav{
position: absolute;
top: 250px;
}
البته می توانید بجای before از after استفاده کنید:$(document).ready(function(){
var titles = ['img1','img2','img3','img4','img5','img6','img7','img8'];
$('#slider')
.after('')
.cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav',
pagerAnchorBuil der: function (index) {
return '' + titles[index] + '';
}
});
});
************* واقعا ممنونم ازت امیرجان **************
دیگه ناشی ایم دیگه.. تا یاد بگیریم
*****بقول پیامبر عزیزمون زکات علم نشر اونه که شما اونو عملی کردید و حتی بیشتر*********
صفحه رو شلوغ نکنم بازم ممنون
امیر جان خیلی گلی.
خیلی خیلی ممنون از آموزش های کاملی که قرار دادین.
آموزش اسلایدر همراه متن واقعا لازم داشتم...ممنون.
ممنون بابت زحماتي که کشيديد.
در مثالهاي بالا وقتي 3 تا عکس نمايش داده ميشن بعد يه سري کد به نمايش در مي اد.
باید jquery.cycle رو دانلود بکنم؟؟؟
من همه ی کد هارو نوشتم و فایل های موردنیاز رو هم لینک کردم اما تصاویر هرکدوم جدا از هم ایستادن وهیچ اتفاقی نمیوفته لطفا بگید اشکال کارم کجاست
http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjquery_slider_cycle_example13