با سلام
ساخت اسلاید شو بوسیله پلاگین جی کوئری cycle fader - netnic.ir

برای این ساعت از سایت "نت نیک" ، ساخت اسلاید شو بوسیله پلاگین جی کوئری cycle fader رو می خوام آموزش بدم.

(افکت fade بدین صورت است که عکس اول کمرنگ و کمرنگ میشه  تا جایی که کاملا محو میشه و بعد عکس عوض میشه و عکس بعدی کم کم پر رنگ و پر رنگ میشه تا کاملا مرئی میشه و ....)

خوب ، برای ساخت یک اسلاید شو با افکت زیبای fade ابتدا باید یک سری کتابخونه های جاوا اسکریپت رو به پروژتون اضافه کنین:


فایل اول کتابخونه جی کوئری است (نسخه کم حجمش)
فایل دوم کتابخونه خود cycle  است (آخرین نسخه)
فایل سوم ، دستورات فعال کردن اسلاید شو است ، من برای قشنگی کار ، دستورات رو توی یک فایل جدا نوشتم ....
شما می تونین توی صفحتون یک تگ Script باز کنین و کدها رو توش بریزید ...

(متونی که بین تگ های اسکریپت نوشتم همشون کامنت هستند و می تونین اصلا ننویسینشون)

خوب ابتدا فایل این 3 کتابخونه رو از اینجا دانلود کنین:

دانلود کتابخانه های مورد نیاز جهت ساخت اسلاید شو با افکت fade


، خوب فایل بالا رو بعد از دانلود unzip کنین و درون فایلای سایتتون قرار بدین و بعد کد های بالا رو به پروژتون اضافه کنین ، فقط دقت کنین که مسیر فایلا رو درست بدین (در اینجا من فایلامو درون یک پوشه با نام js قرار دادم.)

خوب در ادامه باید یک کد بصورت زیر در بخش html صفحهتون اضافه کنین :




کدهای بالا همشون ثابت هستند و جزء استاندارد خود اساید شوی cycle هستند ، فقط شما هر چند تا دوست داشتین تگ img  اضافه کنین و اندازه همه رو هم یکجور ست کنین ، این تصاویر در اسلاید شوی شما نمایش داده می شوند .

در قسمت پایین دو تا دکمه برای عقب و جلو کردن تصاویر بصورت دستی وجود دارد که می تونین اونها رو مخفی کنین (با یک دستور css می تونین این کار رو انجام بدین)

کار تمام شد ، اسلاید شوی شما آمادست

صفحه رو ذخیره کنین و اون رو با مرورگر باز کنین و از اسلاید شوتون لذت ببرید

نکته : اگر قراره که یک اسلاید شو درون بخش بالایی ساییتون داشته باشید ، کافی است یک div رو با کد های css در جایی از صفحه که دوست دارین اسلاید شو در اونجا نمایش داده بشه ، قرار بدین و بعد کل کد های html بالا رو درون این تگ div قرار بدین.

به همین راحتی

آسون بود ؟
مزیت استفاده از کتابخونه همینه دیگه


این پلاگین کلی تنظیمات داره که باهاشون می تونین افکت و .... اسلایدشو رو عوض کنین ؛ می تونید همه تنظیمات رو اینجا ببینید

تا آموزشی دگر ، بدرود

نوشته شده در تاریخ سه شنبه 24 مرداد 1391    | توسط: ح.م    | طبقه بندی: آموزش پلاگین های جی کوئری،     | نظرات()