ساخت اسلایدشو آسان برای سایت یا وبلاگ
سلام به همه دوستان وبمستر و بلاگر عزیز در این پست قصد داریم بهتون آموزش بدیم چطور برای وبسایت یا وبلاگتون اسلایدشو بسازید
این اسلایدشو با تکنولوژی جاوااسکریپت ساخته میشه و با سرویس های وبلاگدهی رایج کاملا سازگاره.
خب میریم سراغ ساخت این اسلایدر به صورت کاملا ساده:
ابتدا این کد رو قبل از کد <head> وبلاگ/وبسایتتون قرار بدید
<script type="text/javascript" src="http://www.2createawebsites.com/resources/howtocreateawebsitefadeslide.js"></script>
این کد بخش اصلی جاوااسکریپت اسلایدشو رو بارگذاری میکنه ، در صورتی که فضای میزبان (هاستینگ) دارید میتونید این فایل رو دریافت کنید تو ضمیمه این پست و تو فضای خودتون قرارش بدید. در صورتی هم که ندارید یا نمیخواهید فایل رو در فضای میزبان خودتون قرار بدید هیچ مشکلی نیست از همین آدرس استفاده کنید.
حالا کد زیر رو قبل از <head> و بعد از کدی که در بالا اضافه کردید بزارید:
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [600, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://www.2createawebsites.com/resources/slide-show-how-2-create-a-website-image-1.jpg"],
["http://www.2createawebsites.com/resources/slide-show-how-2-create-a-website-image-2.jpg"],
["http://www.2createawebsites.com/resources/slide-show-how-2-create-a-website-image-3.jpg"],
["http://www.2createawebsites.com/resources/slide-show-how-2-create-a-website-image-4.jpg"],
["http://www.2createawebsites.com/resources/slide-show-how-2-create-a-website-image-5.jpg"]
],
displaymode: {type:'auto', pause:1000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 2000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
خط چهارم این کد دو شماره [600, 400] که با رنگ نارنجی مشخص شدند اندازه اسلایدشو رو تعیین میکنه بر حسب پیکسل برای تغییر اندازه اسلایدشو و تنظیم اون بر اساس وبلاگ/وبسایتتون کافیه فقط شماره ها رو تغییر بدید اولی اندازه افقی و دومی اندازه عمودی اسلایدشو هست.
پنج خط که به رنگ سبز مشخص شدند آدرس عکس هاییه که اسلایدشو باید نمایش بده
[“http://www.2createawebsites.com/resources/slide-show-how-2-create-a-website-image-1.jpg“],
بجای رنگ آبی در خط بالا آدرس تصویر دلخواهتون رو بزارید
برای اضافه کردن تصویر بیشتر یا کم کردن تعداد تصاویر محدودیتی وجود نداره
میتونید با حذف خط تصویر رو حذف کنید
فقط دقت کنید که اول خط تمام خط کدهای تصاویر مثل خط هایی که با سبز نشون داده شده با کاما , شروع میشه به غیر از آخرین تصویر، وقتی تصویری رو حذف یا اضافه کردید دقت کنید اول خط تمام آدرس عکس ها با , شروع شده باشه و آخرین عکس بدون , باشه ، مثل نمونه ی سبز رنگ شده.
دو خط بعد شماره ای هست که با رنگ قرمز مشخص شده این شماره زمان نمایش هر تصویر رو نشون میده که هر 1000 شماره به معنای یک ثانیه میباشد
1000 برابر با 1 ثانیه ، 2000 برابر با 2 ثانیه و …
و دو خط بعد از اون یه شماره دیگه هست که با رنگ قهوه ای مشخص شده این شماره سرعت افکت تغییر تصاویر رو مشخص میکنه ، این زمانیه که تصویر تار میشه و جای خودش رو به تصویر بعدی میده این شماره هم مثل شماره قبل هر 1000 شماره یک ثانیه محسوب میشه.
حالا نوبت به کدی میرسه که اسلایدشو رو نمایش میده…
این کد رو جایی بزارید که میخواهید اسلایدشو اونجا نمایش داده بشه:
<div id=”fadeshow2″></div>
حالا اسلایدشو شما آمادست ذخیره کنید و وبتون رو بروز کنید و لذت ببرید 🙂
فایل ضمیمه:
* فایل اصلی جاوااسکریپت (در ابتدای بحث به آن اشاره شد)
اگر در ساخت این اسلایدر مشکلی داشتید یا سوالی بود از طریق دیدگاه همینجا بپرسید ، پاسخ براتون ایمیل میشه… 🙂
اگر از این مطلب خوشتون اومد از طریق دیدگاه اعلام کنید تا از آموزش های بعدی هم باخبر شوید.
خیلی ممنون عالی بود
عالی بود تشکر
عالی و کاربری بود ممنون
بسیار عالی و مفید بود متشکرم از زحماتتون
مطالب عالی بود . متشکرم.
از سایت خوبتون ممنونم. امیدوارم موفق باشین
عرض ادب واقعا عالی بود دستتون درد نکنه
سلام
قالب وبلاگ من اسلاید شو داره اما متاسفانه کار نمیکنه .مشکل از کجاست؟
مرسی عالی بود
با سلام حالا چجوری باید در اسلایدر عکس گذاشت؟
سلام
اموزش اسلاید گذاشتن در وبلاک بصورت پی دی اف برام ایمیل می کنید مرسی
ممنونم خیلی ممنون
سلام خسته نباشید
من این برنامه رو دارم.(JavaScript Slideshow Maker)
ولی وقتی insert to web رو میزنم تا کدش رو تو front page ، past کنم جای کدش خالی (سفید) است .
لطفا کمکم کنید
سلام یک سوال وقتی ما این کدها رو گذاشتیم چطوری میشه عکس ها جدید برای این اسلاید شو گذاشت .. .. این دستورات شما برای زبان asp.net هم میشه استفاده کرد
باسلام خدمت مدیر سایت محترم و عرض تشکر و سپاس از مطالب خوب سایت
اولا آدرس فایل ضمیمه خراب است
ثانیا می خواستم راهنمایی فرمایید اگر بخواهیم برای هر اسلاید یک آدرس ذکر شود باید چه تغییری در کد بدهیم با تشکر
اگر راهنمایی فرمایید ممنون می شوم و جبران میک نم
باسلام خدمت مدیر سایت محترم.
یه سوالی داشتم درمورد اسلاید شو.
ببینید من در صفحه ی وبم یک submitگذاشتم.حالا می خواهم وقتی که روی submit کلیک کردم یک فرم سیاه رنگ باشد که داخلش پر از عکس های ایکونی است و هر کدامشان به یک صفحه ی وب لینک شوند.
چجوری میشه همچین صفحه ای رد درست کرد.تقریبا می خواهم این فرم مثل منوی استارت ویندوز8 یا7 باشد.
ممنون اگر راهنماییم کنید
سلام هرکار میکنم اسلاید شو نمیشه فقط کدی که گذاشتینو رو صفحه وبلاگ بالای هدر نشون میده
سلام چرا برای من اسلایدر رو نشون نمیده؟
سلام
ممنون از ابزارتون.من می خوام برا هر مطلبی که ثبت میشه و لازم دیدم توی همون پست یه اسلاید شو داشته باشم اگه میشه راهنمایی فرمائید.
با تشکر
دقیقا کجاست؟؟؟؟
با سلام
من یه وبلاگ دارم ومیخواهم این اسلاید شو را در بخش بالای وبلاگم ویا در داخل متنم بارگذاری کنم
لطفا من راراهنمایی کنید