سلام به همه دوستان وبمستر و بلاگر عزیز در این پست قصد داریم بهتون آموزش بدیم چطور برای وبسایت یا وبلاگتون اسلایدشو بسازید
این اسلایدشو با تکنولوژی جاوااسکریپت ساخته میشه و با سرویس های وبلاگدهی رایج کاملا سازگاره.
خب میریم سراغ ساخت این اسلایدر به صورت کاملا ساده:
ابتدا این کد رو قبل از کد <head> وبلاگ/وبسایتتون قرار بدید
این کد بخش اصلی جاوااسکریپت اسلایدشو رو بارگذاری میکنه ، در صورتی که فضای میزبان (هاستینگ) دارید میتونید این فایل رو دریافت کنید تو ضمیمه این پست و تو فضای خودتون قرارش بدید. در صورتی هم که ندارید یا نمیخواهید فایل رو در فضای میزبان خودتون قرار بدید هیچ مشکلی نیست از همین آدرس استفاده کنید.
حالا کد زیر رو قبل از <head> و بعد از کدی که در بالا اضافه کردید بزارید:
خط چهارم این کد دو شماره [۶۰۰, ۴۰۰] که با رنگ نارنجی مشخص شدند اندازه اسلایدشو رو تعیین میکنه بر حسب پیکسل برای تغییر اندازه اسلایدشو و تنظیم اون بر اساس وبلاگ/وبسایتتون کافیه فقط شماره ها رو تغییر بدید اولی اندازه افقی و دومی اندازه عمودی اسلایدشو هست.
پنج خط که به رنگ سبز مشخص شدند آدرس عکس هاییه که اسلایدشو باید نمایش بده
[“http://www.2createawebsites.com/resources/slide-show-how-2-create-a-website-image-1.jpg“],
بجای رنگ آبی در خط بالا آدرس تصویر دلخواهتون رو بزارید
برای اضافه کردن تصویر بیشتر یا کم کردن تعداد تصاویر محدودیتی وجود نداره
میتونید با حذف خط تصویر رو حذف کنید
فقط دقت کنید که اول خط تمام خط کدهای تصاویر مثل خط هایی که با سبز نشون داده شده با کاما , شروع میشه به غیر از آخرین تصویر، وقتی تصویری رو حذف یا اضافه کردید دقت کنید اول خط تمام آدرس عکس ها با , شروع شده باشه و آخرین عکس بدون , باشه ، مثل نمونه ی سبز رنگ شده.
دو خط بعد شماره ای هست که با رنگ قرمز مشخص شده این شماره زمان نمایش هر تصویر رو نشون میده که هر ۱۰۰۰ شماره به معنای یک ثانیه میباشد
۱۰۰۰ برابر با ۱ ثانیه ، ۲۰۰۰ برابر با ۲ ثانیه و …
و دو خط بعد از اون یه شماره دیگه هست که با رنگ قهوه ای مشخص شده این شماره سرعت افکت تغییر تصاویر رو مشخص میکنه ، این زمانیه که تصویر تار میشه و جای خودش رو به تصویر بعدی میده این شماره هم مثل شماره قبل هر ۱۰۰۰ شماره یک ثانیه محسوب میشه.
حالا نوبت به کدی میرسه که اسلایدشو رو نمایش میده…
این کد رو جایی بزارید که میخواهید اسلایدشو اونجا نمایش داده بشه:
<div id=”fadeshow2″></div>
حالا اسلایدشو شما آمادست ذخیره کنید و وبتون رو بروز کنید و لذت ببرید 