ساخت اسلایدشو آسان برای سایت یا وبلاگ

سلام به همه دوستان وبمستر و بلاگر عزیز در این پست قصد داریم بهتون آموزش بدیم چطور برای وبسایت یا وبلاگتون اسلایدشو بسازید

این اسلایدشو با تکنولوژی جاوااسکریپت ساخته میشه و با سرویس های وبلاگدهی رایج کاملا سازگاره.

خب میریم سراغ ساخت این اسلایدر به صورت کاملا ساده:

ابتدا این کد رو قبل از کد <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>

حالا اسلایدشو شما آمادست ذخیره کنید و وبتون رو بروز کنید و لذت ببرید 🙂

فایل ضمیمه:

* فایل اصلی جاوااسکریپت (در ابتدای بحث به آن اشاره شد)

* فایل نمونه آماده اسلایدشو

اگر در ساخت این اسلایدر مشکلی داشتید یا سوالی بود از طریق دیدگاه همینجا بپرسید ، پاسخ براتون ایمیل میشه… 🙂

اگر از این مطلب خوشتون اومد از طریق دیدگاه اعلام کنید تا از آموزش های بعدی هم باخبر شوید.

محمد النصار

برنامه نویسم و از کد لذت میبرم. در حوزه طراحی وب و برنامه نویسی دانسته های خودم رو با شما به اشتراک میگذارم. و سعی میکنم برنامه نویسی ها و کارهای خودم رو که مفید باشه در سایت معرفی کنم. برای مطالعه مقالات و آموزش های بیشتر من میتونید وبلاگم رو دنبال کنید.

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

  • سلام می شه بگید من کجا باید ین کد اخری که گفتین همینرو بزارم من می خوام که بالای صفحه باشه ولی فقط یه عالمه کد بالای وبلاگ میزاره اینم کد ویرایش شده با تغییرات میشه بگید کجاش مشکل داره؟ممنون

  • ببخشید من اینتر نتم قطع شد نتونستم کد رو بنویسم اینم کد میشه برای کد اصلاح شده این کد رو بفرستید بازم ممنونم

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

    <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>

  • سلام

    چرا این نوشتهرو بالای صفحه مینویسه

    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

Recent Posts

نکات ضروری برای دانلود ایمن؛ چگونه از ورود به دام سایت‌های مخرب جلوگیری کنیم؟

در دنیای بی‌پایان نرم‌افزارها و فایل‌های دیجیتال، امنیت در دانلود و استفاده از آنها یک…

4 ماه ago

معرفی و بررسی سری های لپ تاپ ایسوس

شرکت ایسوس یکی از پیشتازان در صنعت فناوری اطلاعات و الکترونیک است که در زمینه…

4 ماه ago

آموزش دستورات پاورشل به همراه فهرست کامل کد های ویندوز پاورشل

آیا شما هم به دنبال کار با کد های پاورشل برای هک هستید؟ در این…

5 ماه ago

شغل ادمین اینستاگرام چیست و چگونه ادمین اینستاگرام شویم؟

این روزها که همه افراد به دنبال یک شغل پردرآمد می گردند، مشغول به کار…

6 ماه ago

آموزش حل مشکل page isn’t available right now در اینستاگرام

خطای page isn’t available right now یکی از آزار دهنده ترین مشکلاتی است که کاربران…

6 ماه ago

ویندوز پاورشل چیست ؟ کاربرد ها و نحوه فعال سازی powershell

ویندوز پاورشل چیست؟ پاورشل ابزاری قدرتمند به حساب می آید که همه افراد علاقه مند…

6 ماه ago