سلايدر أنيق وسهل التنسيق

سلايدر أومايسمي با سلايد شو  لذي يقوم بعرض آخر مواضيع مدونتك زائد الصور وعناوين المواضيع يمكن التحكم فيه بكل سهولة وهذا السلايدر الذي سوف أقدم لكم اليوم هو خفيف
وأنيق وسهل التنسيق ومريح جدا لزائر كما أنه يتمتع با الخفة عن باقي السلايدر شو هات ويمكنك معاينة سلايدر عبر المثال التالي

معاينة

طريقة تركيب سلايدر 

1. من لوحة التحكم بلوجر
2. قالب 
3. تحرير html
4. نبحث عن الوسم التالي </head> ونضع أسفله الكود التالي 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>

//<![CDATA[

/* ------------------------------------------------------------------------

s3Slider

Developped By: Boban Karišik -> http://www.serie3.info/

 CSS Help: Mészáros Róbert -> http://www.perspectived.com/

Version: 1.0

Copyright: Feel free to redistribute the script/modify it, as

  long as you leave my infos at the top.

-------------------------------------------------------------------------- */

(function($){

$.fn.s3Slider = function(vars) {

 var element     = this;

 var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;

 var current     = null;

 var timeOutFn   = null;

 var faderStat   = true;

 var mOver       = false;

 var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");

 var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

 items.each(function(i) {

     $(items[i]).mouseover(function() {

        mOver = true;

     });

     $(items[i]).mouseout(function() {

         mOver   = false;

         fadeElement(true);

     });

 });

 var fadeElement = function(isMouseOut) {

     var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;

     thisTimeOut = (faderStat) ? 10 : thisTimeOut;

     if(items.length > 0) {

         timeOutFn = setTimeout(makeSlider, thisTimeOut);

     } else {

         console.log("Poof..");

     }

 }

 var makeSlider = function() {

     current = (current != null) ? current : items[(items.length-1)];

     var currNo      = jQuery.inArray(current, items) + 1

     currNo = (currNo == items.length) ? 0 : (currNo - 1);

     var newMargin   = $(element).width() * currNo;

     if(faderStat == true) {

         if(!mOver) {

             $(items[currNo]).fadeIn((timeOut/6), function() {

                 if($(itemsSpan[currNo]).css('bottom') == 0) {

                     $(itemsSpan[currNo]).slideUp((timeOut/6), function() {

                         faderStat = false;

                         current = items[currNo];

                         if(!mOver) {

                             fadeElement(false);

                         }

                     });

                 } else {

                     $(itemsSpan[currNo]).slideDown((timeOut/6), function() {

                         faderStat = false;

                         current = items[currNo];

                         if(!mOver) {

                             fadeElement(false);

                         }

                     });

                 }

             });

         }

     } else {

         if(!mOver) {

             if($(itemsSpan[currNo]).css('bottom') == 0) {

                 $(itemsSpan[currNo]).slideDown((timeOut/6), function() {

                     $(items[currNo]).fadeOut((timeOut/6), function() {

                         faderStat = true;

                         current = items[(currNo+1)];

                         if(!mOver) {

                             fadeElement(false);

                         }

                     });

                 });

             } else {

                 $(itemsSpan[currNo]).slideUp((timeOut/6), function() {

                 $(items[currNo]).fadeOut((timeOut/6), function() {

                         faderStat = true;

                         current = items[(currNo+1)];

                         if(!mOver) {

                             fadeElement(false);

                         }

                     });

                 });

             }

         }

     }

 }

 makeSlider();

};

})(jQuery);

//]]>

</script>

<script type='text/javascript'>

$(document).ready(function() {

$('#s3slider').s3Slider({

timeOut: 4000

});

});

</script>

<style type='text/css'>

#s3slider {

background:#000000;

border:1px solid #818e8f;

width: 550px;

height: 200px;

position: relative;

overflow: hidden;

}

#s3sliderContent {

width: 550px;

position: absolute;

top:0px;

padding: 0px;

margin: 0px;

}

.s3sliderImage {

float: left;

position: relative;

display: none;

}

.s3sliderImage span {

position: absolute;

left: 0;

font: 20px Trebuchet MS, sans-serif;

padding: 10px 0px;

width: 550px;

background-color: #000;

filter: alpha(opacity=80);

-moz-opacity: 0.8;

-khtml-opacity: 0.8;

opacity: 0.8;

color: #fff;

display: none;

bottom: 0;

text-align:center;

}

.clear {

clear: both;

}

</style>

شرح بعض خصائص الكود  

ملاحظة: لتغيير سرعة عرض الشرائح، نغيير قيمة 4000 الملون في الكود با الون الأحمر
550: عرض السلايدر 
200: طول السلايدر

وأحفظ القالب 

وبعد حفظ القالب نذهب الي تخطيط --> اضافة آداة -->

نختار html/java script ونضع بها الكود التالي

<div id="s3slider">

<ul id="s3sliderContent">

<li class="s3sliderImage"><a href="#"><img style="width:550px;height:200px;" src="هنا رابط صورة الموضوع الأول" /><span>وصف الموضوع الأول</span></a></li>

<li class="s3sliderImage"><a href="#"><img style="width:550px;height:200px;" src="هنا رابط صورة الموضوع الثاني" /><span>وصف الموضوع الثاني</span></a></li>

<li class="s3sliderImage"><a href="#"><img style="width:550px;height:200px;" src="هنا رابط صورة الموضوع الثالث" /><span>وصف الموضوع الثالث</span></a></li>

<li class="s3sliderImage"><a href="#"><img style="width:550px;height:200px;" src="هنا رابط صورة الموضوع الرابع" /><span>وصف الموضوع الرابع</span></a></li>

<li class="s3sliderImage"></li>

</ul>

</div>

<div class='clear'></div>

شرح بعض خصائص الكود  

# نغيرها برابط الموضوع

550 عرض السلايدر 

200 طول السلايدر 

في أمان الله ورعايته 

شارك الموضوع مع أصدقائك

Facebook Google+ Twitter Digg