اسلایدر برای هدر سایت

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

این ابزار متعلق به سایت http://developers.slidedeck.com/  است که اگر کمی بر زبان مسلط باشید در آن قالب های متعدد و امکانات خوبی را برای این ابزار می یابید

من ضمن ترجمه نمودن قالب اصلی و تنظیمش برای راست به چپ 6 قالب دیگر هم برای علاقه مندان قرار دادم تا اگر خواستند تنظیماتش را خودشان انجام دهند و از آن استفاده نمایند در ضمن کدهای جاوا اسکریپت را هم من روی هاست گوگل آپلود نمودم که اگر دوستان خواستند می توانند متن آنها را در هاست شخصی یا اشتراک خود در گوگل داک قرار دهند 

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

<script type="text/javascript" src="http://fakhar-project.googlecode.com/files/jquery-1.3.2.min.js"></script> <!-- Include the below script, Copyright 2010, Brandon Aaron (http://brandonaaron.net/) for scrollwheel support. --> <script type="text/javascript" src="http://fakhar-project.googlecode.com/files/jquery.mousewheel.min.js"></script> <script type="text/javascript" src="http://fakhar-project.googlecode.com/files/slidedeck.jquery.lite.pack.js"></script> <style type="text/css"> .skin-slidedeck { position: relative; padding: 11px 11px 24px; background: url('back.png') 0 0 #d7d7d7; border: 14px solid #fff; box-shadow: 0 0 5px rgba(0,0,0,0.2); -moz-box-shadow: 0 0 5px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);} .skin-slidedeck dl.slidedeck { position: relative; width: 100%; height: 100%; margin: 0; padding: 0;} .skin-slidedeck dl.slidedeck > dd { position: relative; height: 294px; padding: 10px 15px; margin: 0; border-right: 5px solid #d7d7d7; background: url('slides.png') bottom left #d7d7d7; /* Note: you should position the background with pixel measurements in IE7 as it improperly calculates the height of the DD element when containing vertical slides */ overflow: hidden;} .skin-slidedeck dl.slidedeck > dt { position: relative; cursor: pointer; height: 43px; line-height: 38px; font-size: 12px; font-weight: bold; font-family: "Futura Bold", Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; background: url('spines.png') top left #d7d7d7; color: #505050; margin: 0; padding: 0;} .skin-slidedeck dl.slidedeck dt.spine:hover { color: #000; background-position: center left;} .skin-slidedeck dl.slidedeck dt.spine.active,.skin-slidedeck dl.slidedeck dt.spine.active:hover { cursor: default; color: #fff; background-position: bottom left;} .skin-slidedeck dl.slidedeck dt.spine .index { margin-bottom: 2px; font-size: 24px; font-weight: normal; font-family: Arial, Helvetica, sans-serif; color: #505050;} .skin-slidedeck dl.slidedeck dt.spine.active .index { margin-bottom: 0; } .skin-slidedeck dl.slidedeck dt.spine:hover .index { color: #000000; } .skin-slidedeck dl.slidedeck dt.spine.active .index { color: #ffffff; } .skin-slidedeck dl.slidedeck .activeCorner { margin-left: -6px; background-image: url('corner.png'); width: 12px; height: 25px;} .skin-slidedeck dl.slidedeck dd.slide ul.slidesVertical > li { overflow: hidden; padding: 10px;} .skin-slidedeck dl.slidedeck ul.verticalSlideNav { height: 70px; width: 25px; background: none; position: relative; overflow: hidden; padding: 15px 0 0; margin: 0; top: 0; left: 125px; -webkit-transform: rotate(90deg); -webkit-transform-origin: -7px 0; -moz-transform: rotate(90deg); -moz-transform-origin: -7px 0; -o-transform: rotate(90deg); -o-transform-origin: -7px 0;} .skin-slidedeck dl.slidedeck ul.verticalSlideNav li { position: relative; width: 25px; height: 12px; line-height: 12px; padding: 0; margin: 0; overflow: hidden; float: left; clear: left;} .skin-slidedeck dl.slidedeck dd.slide ul.verticalSlideNav li.arrow { display: none; } .skin-slidedeck dl.slidedeck ul.verticalSlideNav li a { position: relative; display: block; padding: 12px 0 0 0; margin: 0; width: 25px; height: 0; overflow: hidden; line-height: 12px; background: url('vertical-nav.png') 0 0 no-repeat;} .skin-slidedeck dl.slidedeck ul.verticalSlideNav li.active a { background-position: 0 -24px;} .skin-slidedeck dl.slidedeck dt.active ul.verticalSlideNav li.active a { background-position: 0 -12px;} dl.slidedeck dd.slide ul.verticalSlideNav li a:hover { opacity: 0.75; -moz-opacity: 0.75; -webkit-opacity: 0.75; -khtml-opacity: 0.75; -ms-filter: "Alpha(opacity=75)"; filter: Alpha(opacity=75); } #slidedeck_frame {width:auto;height: 300px;} .slidedeck {direction:rtl;text-align:right;} </style> <!--[if lte IE]> <style type="text/css"> .skin-slidedeck {-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color=#e5e5e5, direction=120, strength=5)";filter: progid:DXImageTransform.Microsoft.Shadow(Color=#e5e5e5, direction=120, strength=5);} .skin-slidedeck dl.slidedeck ul.verticalSlideNav {left: 40px;top: 6px;-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);} .skin-slidedeck dl.slidedeck dt.active ul.verticalSlideNav { top: 6px; } .skin-slidedeck dl.slidedeck dt.spine .index,.skin-slidedeck dl.slidedeck ul.verticalSlideNav li a {background-color: #f6f6f6;-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='#f6f6f6')";filter: progid:DXImageTransform.Microsoft.Chroma(color='#f6f6f6');} .skin-slidedeck dl.slidedeck dt.spine.active .index,.skin-slidedeck dl.slidedeck dt.spine.active ul.verticalSlideNav li a {background-color: #181818;-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='#181818')";filter: progid:DXImageTransform.Microsoft.Chroma(color='#181818');} </style> <![endif]--> <div id="slidedeck_frame" class="skin-slidedeck"> <dl class="slidedeck"> <dt>عنوان یک </dt> <dd>اولین متن به همراه اولین عکس <img src="image.jpg" /></dd> </dl> <dl class="slidedeck"> <dt>دومین عنوان</dt> <dd>متن دومین اسلاید <img src="image2.jpg" /> </dd> </dl> <dl class="slidedeck"> <dt>سومین اسلاید</dt> <dd>متن سومین <img src="image3.jpg" /> </dd> </dl>

دموی اصلی	دریافت فایل اصلی	49 کیلوبایت
قالب ها
مشاهده	دانلود	حجم
Invasion	Invasion.zip	59 کیلوبایت
Literally	Literally.zip	61 کیلوبایت
Noisy	Noisy.zip	95 کیلوبایت
Ribbons	Ribbons.zip	44 کیلوبایت
Stitch	Stitch.zip	126 کیلوبایت
Voyager	Voyager.zip	79 کیلوبایت