بسم الله الرحمن الرحیم

آموزش ساخت اسلایدر

بخش ششم (آموزش ساخت اسلایدشو)

نمایش لیست آموزش های Bootstrap

 آموزش ساخت slide show

در آموزش پیش نحوه ایجاد منو را در بوت استرپ با هم بررسی کردیم. در این بخش از آموزش قصد داریم بخش مربوط به Slide show را طراحی کنیم.

در این بخش بیشتر فعالیت هایی را انجام خواهیم داد که بوت استرپ در آن تاثیر زیادی نخواهد داشت. در این آموزش نحوه طراحی انواع Slide Show ها را برای سایت های مختلف بررسی خواهیم کرد و نحوه ایجاد Slide Show های زیبا را برای سایت های مختلف و موضوعات مختلف خواهیم آموخت.

یکی از بخش هایی که در تمامی سایت های امروزی وجود دارد Slide Show می باشد، طراحی و ساخت اسلایدشوهای حرفه ای کار بسیار پیچیده ای می باشد زیرا شما باید در jQuery تخصص بسیار زیادی داشته باشید که بتوانید اسلاید شوهای جذاب ایجاد کنید.

اما سایت های زیادی وجود دارند که اسلایدر های زیادی را برای دانلود در اختیار شما قرار می دهند. یکی از این سایت ها، سایت http://www.jssor.com می باشد. در این سایت شما می توانید اسلایدر های زیادی را مشاهده کنید و در میان آنها اسلایدر مورد نظر خود را انتخاب و دانلود کنید. اما طبیعتا این اسلایدری که انتخاب می کنید نیاز به تغییرات دارد، در برخی موارد هزینه ی تغییر این اسلایدر ها به قدری زیاد است که شاید شما ترجیح دهید از این اسلایدر ها استفاده نکنید!.

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

بسم الله الرحمن الرحیم

کرک کردن WowSlider

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

پیشنهاد می کنم برای اینکار از ابزار WowSlide استفاده کنید. این ابزار با در اختیار گذاشتن نمونه های متفاوتی از اسلاید شو ها به شما اجازه می دهد Slideshow مورد نظر خود را با تمامی پاارمترهای مورد نیاز خود طراحی و با یک Wizard ساده ایجاد کنید.

شما می توانید این ابزار را از لینک زیر دانلود کنید

http://wowslider.com

این ابزار رایگان نبوده و در صورتی که هزینه آن را پرداخت نکنید، اگر یک اسلاید شو ایجاد کنید در پایین تمامی تصاویر لولگو مربوط به نرم افزار دیده می شود.

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

می توان به سادگی لوگو نرم افزار را حذف کرد برای اینکار باید ابتدا تصاویر اصلی خود را بر روی تصاویر ایجاد شده Paste کنید زیر را بر روی تصاویر لوگو نرم اضافه شده است.

پس از جایگزین کردن تصاویر اصلی به مسیر engine1 بروید (البته مدتی است که نام فولدرها توسط این نرم افزار تغییر داده می شود اما مشخصا باید شما پس از ایجاد اسلاید شو خود دو فولدر داشته باشید یکی برای تصاویر و دیگری برای فایلها و اسکریپت های jQuery، به هر حال فولدر اسکریپتها را باز کنید) در فولدر مربوطه فایل wowslider.js را در یک Editor باز کنید.

در فایل مربوطه باید به دنبال کد زیر بگردید:

position:”absolute”,right:”2px”, bottom:”2px”,padding:”0 0 0 0″,”z-index”:10

طبیعتا یافتن این خط کد مابین تمامی کدهای نامرتب این فایل کار آسانی نیست و شخصا تجربه کردم که برخی از این پارامترها مانند مقدار z-index در نسخه های مختلف این نرم افزار متفاوت است اما معمولا در تمامی نسخه های فاصله ی لوگو نرم افزار از پایین 2 پیکسل است (bottom:” 2px”) پس بهتر است شما عدد 2px را در فایل مربوطه جستجو کنید و پس از یافتن خط مربوطه کد زیر را به آن اضافه کنید:

{position:”absolute”,right:”2px”, display:”none”,bottom:”2px”,padding:”0 0 0 0″,”z-index”:10

لطفا کد "display:"none دقیقا به همین صورت قرار دهید.

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

http://designscrazed.net/free-responsive-jquery-image-sliders/