سلام به همه دوستان وبمستر و بلاگر عزیز در این پست قصد داریم بهتون آموزش بدیم چطور برای وبسایت یا وبلاگتون اسلایدشو بسازید
این اسلایدشو با تکنولوژی جاوااسکریپت ساخته میشه و با سرویس های وبلاگدهی رایج کاملا سازگاره.
خب میریم سراغ ساخت این اسلایدر به صورت کاملا ساده:
ابتدا این کد رو قبل از کد <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>
خط چهارم این کد دو شماره [۶۰۰, ۴۰۰] که با رنگ نارنجی مشخص شدند اندازه اسلایدشو رو تعیین میکنه بر حسب پیکسل برای تغییر اندازه اسلایدشو و تنظیم اون بر اساس وبلاگ/وبسایتتون کافیه فقط شماره ها رو تغییر بدید اولی اندازه افقی و دومی اندازه عمودی اسلایدشو هست.
پنج خط که به رنگ سبز مشخص شدند آدرس عکس هاییه که اسلایدشو باید نمایش بده
[“http://www.2createawebsites.com/resources/slide-show-how-2-create-a-website-image-1.jpg“],
بجای رنگ آبی در خط بالا آدرس تصویر دلخواهتون رو بزارید
برای اضافه کردن تصویر بیشتر یا کم کردن تعداد تصاویر محدودیتی وجود نداره
میتونید با حذف خط تصویر رو حذف کنید
فقط دقت کنید که اول خط تمام خط کدهای تصاویر مثل خط هایی که با سبز نشون داده شده با کاما , شروع میشه به غیر از آخرین تصویر، وقتی تصویری رو حذف یا اضافه کردید دقت کنید اول خط تمام آدرس عکس ها با , شروع شده باشه و آخرین عکس بدون , باشه ، مثل نمونه ی سبز رنگ شده.
دو خط بعد شماره ای هست که با رنگ قرمز مشخص شده این شماره زمان نمایش هر تصویر رو نشون میده که هر ۱۰۰۰ شماره به معنای یک ثانیه میباشد
۱۰۰۰ برابر با ۱ ثانیه ، ۲۰۰۰ برابر با ۲ ثانیه و …
و دو خط بعد از اون یه شماره دیگه هست که با رنگ قهوه ای مشخص شده این شماره سرعت افکت تغییر تصاویر رو مشخص میکنه ، این زمانیه که تصویر تار میشه و جای خودش رو به تصویر بعدی میده این شماره هم مثل شماره قبل هر ۱۰۰۰ شماره یک ثانیه محسوب میشه.
حالا نوبت به کدی میرسه که اسلایدشو رو نمایش میده…
این کد رو جایی بزارید که میخواهید اسلایدشو اونجا نمایش داده بشه:
<div id=”fadeshow2″></div>
حالا اسلایدشو شما آمادست ذخیره کنید و وبتون رو بروز کنید و لذت ببرید 🙂
فایل ضمیمه:
* فایل اصلی جاوااسکریپت (در ابتدای بحث به آن اشاره شد)
اگر در ساخت این اسلایدر مشکلی داشتید یا سوالی بود از طریق دیدگاه همینجا بپرسید ، پاسخ براتون ایمیل میشه… 🙂
اگر از این مطلب خوشتون اومد از طریق دیدگاه اعلام کنید تا از آموزش های بعدی هم باخبر شوید.
در دنیای بیپایان نرمافزارها و فایلهای دیجیتال، امنیت در دانلود و استفاده از آنها یک…
شرکت ایسوس یکی از پیشتازان در صنعت فناوری اطلاعات و الکترونیک است که در زمینه…
آیا شما هم به دنبال کار با کد های پاورشل برای هک هستید؟ در این…
این روزها که همه افراد به دنبال یک شغل پردرآمد می گردند، مشغول به کار…
خطای page isn’t available right now یکی از آزار دهنده ترین مشکلاتی است که کاربران…
ویندوز پاورشل چیست؟ پاورشل ابزاری قدرتمند به حساب می آید که همه افراد علاقه مند…
View Comments
مرسی
موفق باشید
خواهش می کنم
پایدار باشید :)
خیلی خیلی ممنون :)
Error: DIV with ID "fadeshow2" not found on page.
سلام با تشکر بابت سایت خوبتان
این اروریه که هنگام باز شدن وبلاگم میاد و اسلاید شو رو نشون نمی ده میشه مشکلمو حل کنید
با سپاس
مشکل اینه که یکی از خط های کد اسلایدر که دارای آی دی fadeshow2 هست ، از سی اس اس فراخونی نمیشه و پیداش نمیکنه. آدرس سی اس اس و اسم آی دی fadeshow2 رو توی سی اس اس بررسی کنید.
سلام
من اول کد اصلی جاوا رو گذاشتم بعد هم همه ی کارایی رو که گفتین کردم ولی وقتی وبم رو باز کردم هیچی نمایش نمی ده.
یه خواهش دارم که اگه انجامش بدین دمتون گرم!
اگه یه اسلایدشو با آدرس های ذیل بسازید و به ایمیلم ارسال کنید تا آخر عمر ممنونتونم و دعاتون می کنم . خیلی به این اسلاید شو نیاز دارم:
["http://www.kungfutoa.tabaar.net/files/2011/05/kj.jpg"],
["http://www.kungfutoa.tabaar.net/files/2011/05/illi.jpg"],
["http://www.kungfutoa.tabaar.net/files/2011/05/FGHF-16.jpg"],
["http://www.kungfutoa.tabaar.net/files/2011/05/sdfgh.jpg"],
["http://www.kungfutoa.tabaar.net/files/2011/05/uiouk.jpg"]
سلام تشکر می کنم به خاطر این اسلاید شو زیباتون ام من یه مشکلی با اون داشتم اونم اینه که در سمت راست وبلاگ ظاهر میشه و من می خوام در سمت چپ باشه هر کاری کردم نشد اگه ممکنه کمکم کنید ممنون میشم
سلام
چرا این نوشتهرو بالای صفحه مینویسه
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: "" })
سلام
چرا این نوشتهرو بالای صفحه مینویسه
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
با سلام
فایل نمونه را دریافت کنید
http://www.itport.ir/wp-content/uploads/2012/12/itport_slide.txt
خیلی ....
سلام می شه بگید من کجا باید ین کد اخری که گفتین همینرو بزارم من می خوام که بالای صفحه باشه ولی فقط یه عالمه کد بالای وبلاگ میزاره اینم کد ویرایش شده با تغییرات میشه بگید کجاش مشکل داره؟ممنون
با سلام
فایل نمونه را دریافت کنید
http://www.itport.ir/wp-content/uploads/2012/12/itport_slide.txt
ببخشید من اینتر نتم قطع شد نتونستم کد رو بنویسم اینم کد میشه برای کد اصلاح شده این کد رو بفرستید بازم ممنونم
این کد اخری رو هم که گفتین بالای این کد گذاشتم
<script type="text/javascript" src="http://www.2createawebsites.com/resources/howtocreateawebsitefadeslide.js"></script>
<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: [
["httphttp://uplod.ir/upp9uwq5xsdo/is_(2).jpg.htm"],
["http://uplod.ir/rmbacing0fty/is_(3).jpg.htm"],
["http://uplod.ir/ruukn1ag3qfv/is_(1).jpg.htm "],
["http://uplod.ir/h6eoffr6dtjd/is_(4).jpg.htm "],
["http://uplod.ir/o7yifq4f6sjv/is.jpg.htm"]
],
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>
با سلام
فایل نمونه را دریافت کنید
http://www.itport.ir/wp-content/uploads/2012/12/itport_slide.txt
سلام
چرا این نوشتهرو بالای صفحه مینویسه
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
با سلام
فایل نمونه را دریافت کنید
http://www.itport.ir/wp-content/uploads/2012/12/itport_slide.txt