ساخت Slide Show به وسیله jQuery سلام در ادامه ی مباحث JQuery این سری شروع به درست کردن یه Slid show میکنیم . اسلاید ها کاربرد های مختلفی دارند . از جمله نمایش اخبار ، محصولات ، دسته بندی کردن قسمت های مرتبط سایت با هم و ..... خوب ما قصد داریم تو این تاپیک آموزشی یک نمایشگر خبری بسازیم که با خوندن 5 خبر آخر از DataBase اون ها رو به صورت گردشی به ما نشون میده . برای این کار ما به پلاگین های JQuery ترجیحا آخرین ورژن ، Jquery.Cycle و jqFancyTransitions.1.8.min.js احتیاج داریم ( همه ی پلاگین ها در فایل پروژه ی ضمیمه موجود میباشند). نحوه ی کار به این صورته که تصاویری که درون یک Div مشخص هستند رو به صورت چرخشی نمایش میدیم. در زیر تصاویر هم میتونید توضیحاتی رو به صورت transparent بزارید . برای این کار باید توضیحاتتون رو داخل خاصیت alternateText کنترل Image قرار بدید. برای خوندن اطلاعات از DataBase از کنترل Repeater استفاده میکنیم که ساده عمل میکنه و مفید ! خوب برای شروع اسکریپت ها و فایل Stylesheet مورد نظر رو به صفحه اضافه میکنیم : 1.<link href="styles.css" rel="stylesheet" type="text/css" /> 2.<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 3.<script src="Scripts/jquery.cycle.all.min.js" type="text/javascript"></script> 4.<script src="Scripts/jqFancyTransitions.1.8.min.js" type="text/javascript"></script> بعد هم کنترل Repeater رو به DataBase بایند میکنیم به این صورت : 01.<div id="news"> 02. <asp:Repeater ID="Repeater1" runat="server"> 03. <ItemTemplate> 04. <asp:Image ID="imgNews" runat="server" 05. ImageUrl='<%# Eval("ImageUrl","~/Images/{0}") %>' 06. ToolTip='' 07. AlternateText='<%# GetALtText(Eval("Title"),Eval("ID")) %>' CssClass="imgNews" /> 08. </ItemTemplate> 09. </asp:Repeater> 10.</div> حالا با یه خلاقیت کوچولو میتونید خیلی کارها انجام بدید . مثلا من یه تابع نوشتم ( با اجازه ی علی آقا ) که عنوان خبر و شماره ش رو میگیره و یه رشته برمیگردونه . مشابه این روش رو علی آقا در یکی از مقالاتشون انجام دادن. در آخر هم که اسکریپت فعالشازی رو مینویسیم : 01.<script type="text/javascript"> 02. $(document).ready(function () { 03. $('#news').jqFancyTransitions({ 04. effect: 'zipper', // wave, zipper, curtain 05. width: 400, // width of panel 06. height: 300, // height of panel 07. strips: 20, // number of strips 08. delay: 4000, // delay between images in ms 09. stripDelay: 50, // delay beetwen strips in ms 10. titleOpacity: 0.9, // opacity of title 11. titleSpeed: 1000, // speed of title appereance in ms 12. position: 'top', // top, bottom, alternate, curtain 13. direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate 14. navigation: true, // prev and next navigation buttons 15. links: false // show images as links 16. }); 17. }); 18.</script> حالا فقط یه مشکلی هست . زیر این تصاویر یه سری عدد نشون داده شده که برای ناوبری استفاده میشه . من هر کاری کردم نتونستم حذفشون کنم . اما یه کلک رشتی به ذهنم رسید . ما برای دایو News یه نگهدارنده میزاریم و ارتفاع تعیین میکنیم که برابر با ارتفاع عکس ها باشه . بعد هم یه خط کد لازم داره : 1.#newsWrap 2.{ 3. height:300px; 4. width:400px; 5. overflow:hidden; 6.} کار تمومه .فکر نمیکنم زیاد توضیح لازم داشته باشه . همه چی واضحه . هر سوالی هم داشتید میتونید با رعایت قوانین در تاپیک های جداگانه مطرح کنید. پروژه رو ضمیمه میکنم. در واقع من با تغییر دادن یه مقاله ی خارجی نسخه ی RTL این مقاله رو خیلی ساده تر و مختصر تر و مفیدتر واسه شما گذاشتم . لینک مقاله ی اصلی رو هم میزارم. از دوستان Ir_WebDeveloper و Malariasoft که ما را در سازماندهی افکارمان یاری نمودند.همچنین شرکت مایکروسافت که کنترل مفیدی همچون Repeater رو ارائه کرده است .
