سلايدر شو رائع JQuery

سلايدر شو  مدونة عربي كاش2 بتقنية الجو كري مهدا لكم

السلام عليكم إخواني الكرام

متابعي مدونة عربي كاش2 يسرني آن أقدم لكم سلا يدر شو المستخدم في مدونتي المبرمج بلغة الجو كري الرائعة ,يمكنك معاينته مباشرة في مدونتي على هدا الرابط ,بعد أن قمت بمعاينة السلايدر يكفي أن نقول انه جيدا وبسيط وأنيق ,ادا أعجبك سنذهب الى خطوات إضافته إلى مدونتك تابع معي الشرح؟

بدون الحديث عن السلايدر فهي جيدة بالنسبة للدين لديهم مواضيع مميزة في مدونتهم ويريدون أن يشهروها تلك للزوار ليزيد عدد قرأ تلك المواضيع الجيدة و بهدا تكسب بعض المتابعين,ايضاً يضفي السلايدر شيأ على مدونتك اد انه يسهل الوصول الى بعض المواضيع التي انت مقتنع انها ستعجب الزائر كثيرا حسناً فهمنا؟

خطوات اضافة السلايدر سهلة جدا وليست معقدة وليست الا سوى ثوان وترى السلايدر في صفحات مدونتك.ندهب الى شرح كيفية اضافة السلايدر .

الخطوة الاولى ابحث عن الكود التالي : ]]></b:skin>

ثم قبله اضف الكود التالي

  /*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {

height:250px; width: 500px;

overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT_kJtgnD1LjVdFMXf6GL6K6hZkFJ2hmDswjWuBJoC4FAoGWXU5zQMI41sp8R-FcCEYnut42PsjQ1b_oG_KppUXWbW4EVds4H1gFQDdxkx5NFqZ6CLpiorU3qBo1hQwWFATGKZNVZnWrG9/s1600/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

الخطوة الثانية ابحث عن الكود التالي:  </head>

 ثم قبله اضف الكود التالي :


 

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

$(document).ready(function() {

//Set Default State of each portfolio piece
$(&quot;.paging&quot;).show();
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});

//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(&quot;.image_reel&quot;).animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $(&#39;.paging a:first&#39;); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});

//On Click
$(&quot;.paging a&quot;).click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});

});
</script>

الخطوة الثالثة :
قم بأضافة اداة جديدة ثم اضافة اداة جافا سكريبت



ثم انسخ الكود التالي

<div class="container">

<div class="folio_block">

<div class="main_view">

<div class="window"> 

<div class="image_reel">

<a href="http://arabicash2.blogspot.com/2011/09/readbud.html

"><img src="http://im13.gulfup.com/2011-11-22/1321982239821.jpg

" alt="" /></a>

<a href="http://arabicash2.blogspot.com/2011/08/blooger.html

"><img src="http://im13.gulfup.com/2011-11-22/1321982239983.jpg

" alt="" /></a>

<a href="http://arabicash2.blogspot.com/2011/09/blog-post_29.html

"><img src="http://im13.gulfup.com/2011-11-22/1321982239392.jpg

" alt="" /></a>

<a href="http://arabicash2.blogspot.com/2011/08/blog-post_1018.html

"><img src=" http://im13.gulfup.com/2011-11-22/1321982239314.jpg

" alt="" /></a>

<a href="http://arabicash2.blogspot.com/2011/09/blogger_09.html

"><img src="http://im11.gulfup.com/2011-11-22/1321987176421.jpg

" alt="" />

</a>

< ="http://arabicash2.blogspot.com/2011/11/blog-post_27.html"><img src="http://im13.gulfup.com/2011-11-29/1322600610541.jpg" alt="" />

</div>

</div>

<div class="paging">

<a href="#" rel="1">1</a>

<a href="#" rel="2">2</a>

<a href="#" rel="3">3</a>

<a href="#" rel="4">4</a>

<a href="#" rel="5">5</a>

</div>

</div>

</div> 

</div>

مع تغيير روابط الصور وروابط المواضيع الى ما تختاره انت بحسب رغبتك.

لأسهل عليك الامر .قم بنسخ الكود التالي الى برنامج" مايكروسوفت ورد " لديك على الحاسوب وانسخ الكود التالي اليه وقم بالتعديل على الكود .قم ايضا برفع الصور التي تريده عبر موقع لرفع الصور وحدد المواضيع التي تريد ان تظهر على السلايدر بنسخ روابطه الى برنامج" الورد " .

اتمنى ان يعجبكم الدرس في انتضار الجديد والمفيد على مدونة عربي كاش2

بتسجيلك في قائمتي البريدية نضمن لك وصول اخر أخبار البلوجر وآخر المقالات عن البلوجر وآخر الإضافات والدروس الى بريدك الالكتروني فور نشرها  في المدونة.