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

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

کرک کردن 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/