تجارت الکترونیکطراحی وب

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

طراحی وب

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

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

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

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

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

فایل ضمیمه:

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

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

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

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

گفتگو ها
    حسین مردانی

    مرسی

    موفق باشید

    مریم

    خیلی خیلی ممنون 🙂

    علیرضا

    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: “” })

      behghadam

      سلام

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

      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

    سلام خسته نباشید ممنون بابت وبلاگ خوب و مفیدتون.من تمام دستور العمل های شما رو انجام دادم اما متاسفانه بعد از ثبت کد درقالب وبلاگ تمام کدها در وبلاگ نمایش داده شد بدون نمایش هیچ اسلاید شویی.ممنون میشم اگه راهنمایی بفرمایید که علت چی هست؟

    behghadam

    با سلام.من نمیدونم وقتی اسلاید شو درست می کنم دقیقا باید کجا کدها رو بزارم.اگه امکانش هست لطفا خیلی ساده برام توضیح بدید.مثلا من lمیرم تو قسمت تنظیمات و دیگر امکانات بعدمیرم توقسمت ویرایش قالب وبلاک میشه این.مطمئنم که دارم اشتباه میکنم توروخدا ببخشید اگر میشه فک کنید دارید به یه بچه ابتدایی دارید آموزش میدید گرچه اونا بیشتر از من میدونن!و یه خواهش دیگه ایی که داشتم اینکه پاسخ رو به ایمیلم بفرستید ممنون میشم.

    در ضمن اگه اموزشتون در قالب فلیم یا عکس باشه که بفرستین به ایمیلم فوق العاده ازتون ممنون میشم

    با تشکر فراوان

    محمد

    سلام…من ی سایت اجتماعی دارم و هرکسی ک تو سایتم عضو ش عکس پروفایلش پایین سایت میاد…میخام این عکسا رو اسلاید نشون بدم باید چ کاار کنم؟؟؟سایتم http://www.roozgozarejavani.zgig.ir

    آقا من این مراحلو رفتم ولی نشد.خودت میتونی بری ببینی نتیجش چی شده.من تازه وبلاگمو ساختم.قالبشم از سایت پیچک گرفتم.دمت گرم یه حالی بده و راهنمایی کن.اگه بهم ایمیل بدی خیلی ممنونت میشم

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

    عرفان

    سلام

    چطوری می تونم به این عکس ها که نمایش داده میشه لینک وصل کنم ؟

    Thanks for this subject, this site is best site in tools for blogs iranian sites

    فرشته

    واقعا ممنون که انقدر ساده و قشنگ توضیح دادید

    فقط یه سوال این کدها رو توی برنامه asp.net میتونم استفاده کنم؟

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

    fatemeh

    سلام

    من فروشگاه آنلاین دارم حالا ک میخوام اسلاید شو بالای صفحه رو بسازم با مشکل مواجه شدم و سردرگم شدم.البته قبلا عکس بود اما من دستم خورد و پاکش کردم.حالا ک میخوام بزارم این ارور و میده خیلی فوریه.کمکم کنید Error loading images. One or more images were not found

    اینم اروری ک تو سایت نشون میده

    علی جمالی

    با سلام

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

    لطفا من راراهنمایی کنید

    maedeh

    دقیقا کجاست؟؟؟؟

    سلام

    ممنون از ابزارتون.من می خوام برا هر مطلبی که ثبت میشه و لازم دیدم توی همون پست یه اسلاید شو داشته باشم اگه میشه راهنمایی فرمائید.

    با تشکر

    alireza

    سلام چرا برای من اسلایدر رو نشون نمیده؟

    هدهد

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

    عباس متین نژاد

    باسلام خدمت مدیر سایت محترم.

    یه سوالی داشتم درمورد اسلاید شو.

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

    چجوری میشه همچین صفحه ای رد درست کرد.تقریبا می خواهم این فرم مثل منوی استارت ویندوز۸ یا۷ باشد.

    ممنون اگر راهنماییم کنید

    باسلام خدمت مدیر سایت محترم و عرض تشکر و سپاس از مطالب خوب سایت

    اولا آدرس فایل ضمیمه خراب است

    ثانیا می خواستم راهنمایی فرمایید اگر بخواهیم برای هر اسلاید یک آدرس ذکر شود باید چه تغییری در کد بدهیم با تشکر

    اگر راهنمایی فرمایید ممنون می شوم و جبران میک نم

    یه خواهشمند

    سلام خسته نباشید

    من این برنامه رو دارم.(JavaScript Slideshow Maker)

    ولی وقتی insert to web رو میزنم تا کدش رو تو front page ، past کنم جای کدش خالی (سفید) است .

    لطفا کمکم کنید

      سلام یک سوال وقتی ما این کدها رو گذاشتیم چطوری میشه عکس ها جدید برای این اسلاید شو گذاشت .. .. این دستورات شما برای زبان asp.net هم میشه استفاده کرد

    هدیه

    ممنونم خیلی ممنون

    سلام

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

    روحانی

    با سلام حالا چجوری باید در اسلایدر عکس گذاشت؟

    مرسی عالی بود

    m

    سلام

    قالب وبلاگ من اسلاید شو داره اما متاسفانه کار نمیکنه .مشکل از کجاست؟

    عرض ادب واقعا عالی بود دستتون درد نکنه

    از سایت خوبتون ممنونم. امیدوارم موفق باشین

    مطالب عالی بود . متشکرم.

    بسیار عالی و مفید بود متشکرم از زحماتتون

    عالی و کاربری بود ممنون

    عالی بود تشکر

    خیلی ممنون عالی بود