سلايد شو أكثر من رائعة بتأثيرات مميزة

إخواني الكرام كيف حلاكم

في هذا الموضوع إن شاء الله سأقدم لكم سلايد شو مميز جدا من خصائصه

-الخفة

-تأثيرات مختلفة

-أزرار المرور من موضوع لآخر

-واخيرا سهولة تركيبه

كما ترون في الصورة هذا هو شكله لكن بعد تركيبه سترى تأثيرات مميزة أثناء المرور من موضوع لموضوع

السلايد مميز ورائع للآسف هو ليس ذاتي التشغيل يعني عليك وضع روابط الصور والعناوين وروابط المواضيع

هذا هو عيبه الوحيد لكن رغم ذالك لا انفي انه رائع

لتركيب السلايد شو كل ما عليك هو إضافة أداة جديدة ثم ضع فيها هذا الكود

<style type="text/css">
.slideshow_skitter{position:relative;float:right;width:640px;height:260px;background:#000; margin:0 auto;margin-bottom:15px;margin-right:5px}
.slideshow_skitter img {width:640px; height:260px;}
.slideshow_skitter img{max-width:none}
.slideshow_skitter .container_skitter{overflow:hidden;position:relative}
.slideshow_skitter .image{overflow:hidden}
.slideshow_skitter .slideshow_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20}
.slideshow_skitter .slideshow_clone img{position:absolute;top:0;left:0;z-index:20}
.slideshow_skitter .prev_button{position:absolute;top:50%;left:0px;z-index:152;overflow:hidden;text-indent:-9999em;margin-top:-25px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:-42px -42px;width:42px;height:42px}
.slideshow_skitter .next_button{position:absolute;top:50%;right:0px;z-index:152;overflow:hidden;text-indent:-9999em;margin-top:-25px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:0 -42px;width:42px;height:42px}
.slideshow_skitter .info_slide{position:absolute;top:15px;right:15px;z-index:100;background:#000;color:#fff;font:bold 11px GESSTwoMediumRegular,Tahoma;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75;padding:5px 0 5px 5px}
.slideshow_skitter .info_slide .image_number{background:#333;float:left;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;margin:0 5px 0 0;padding:2px 10px}
.slideshow_skitter .info_slide .image_number_select,.slideshow_skitter .info_slide .image_number_select:hover{background:#c33;float:left;margin:0 5px 0 0;padding:2px 10px}
.slideshow_skitter .container_thumbs{position:relative;overflow:hidden;height:50px}
.slideshow_skitter .info_slide_thumb{height:50px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;top:0;left:0;opacity:1.0;padding:0!important}
.slideshow_skitter .info_slide_thumb .image_number{overflow:hidden;width:100px;height:50px;position:relative;-moz-border-radius:0!important;-webkit-border-radius:0!important;border-radius:0!important;margin:0!important;padding:0!important}
.slideshow_skitter .info_slide_thumb .image_number img{position:absolute;top:-30px;left:-30px;height:100px}
.slideshow_skitter .slideshow_scroll_thumbs{padding:0}
.slideshow_skitter .slideshow_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:0 to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;cursor:pointer;border:0 solid #333}
.slideshow_skitter .info_slide_dots{position:absolute;bottom:10px;background:rgba(255,255,255,0.8);box-shadow:rgba(0,0,0,0.3) 1px 1px 0;z-index:151;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;padding:5px 0 5px 5px}
.slideshow_skitter .info_slide_dots .image_number{background:#333;float:left;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;margin:0 5px 0 0}
.slideshow_skitter .info_slide_dots .image_number_select,.slideshow_skitter .info_slide_dots .image_number_select:hover{background:#c33;float:left;margin:0 5px 0 0}
.loading{position:absolute;top:50%;right:50%;z-index:10000;color:#fff;text-indent:-9999em;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGs5wQM26AjdjS6CmJcAb5O35tn-TwUzU0Vn2KYI_Ec4ejobRDrRjFJFzXf5wqtP7GQISMMkso-5haezWWOsdIgjbodcEf58eBZ7aFgDpkCwihhTe3Sts3xW0urMQf8FdKy_8g16A-7M8/h120/ajax-loader.gif) no-repeat left top;width:32px;height:32px;margin:-16px}
.slideshow_skitter .label_skitter{text-transform:uppercase;z-index:150;position:absolute;bottom:0;left:0;color:#fff;display:none;opacity:0.8;background:#000}
.slideshow_skitter .label_skitter p{font:normal 22px GESSTwoMediumRegular,tahoma;letter-spacing:-1px;margin:0;padding:10px}
.slideshow_skitter .progressbar{background:#000;position:absolute;top:5px;left:15px;height:5px;width:200px;z-index:99;border-radius:20px}
.slideshow_skitter .preview_slide{display:none;position:absolute;z-index:152;bottom:30px;left:-40px;width:100px;height:100px;background:#fff;border:1px solid #222;-moz-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;-webkit-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;overflow:hidden}
.slideshow_skitter .preview_slide ul{height:100px!important;overflow:hidden!important;list-style:none!important;display:block!important;position:absolute!important;top:0;left:0;margin:0!important}
.slideshow_skitter .preview_slide ul li{width:100px!important;height:100px!important;overflow:hidden!important;float:left!important;position:relative!important;display:block!important;margin:0!important;padding:0!important}
.slideshow_skitter .preview_slide ul li img{position:absolute!important;top:0!important;left:0!important;height:150px!important;width:auto!important}
#overlay_skitter{position:absolute;top:0;left:0;width:100%;z-index:9998;opacity:1;background:#000}
.slideshow_skitter .focus_button{position:absolute;top:50%;z-index:100;overflow:hidden;text-indent:-9999em;margin-top:-25px;opacity:0;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:-42px 0;width:42px;height:42px}
.slideshow_skitter .play_pause_button{position:absolute;top:50%;z-index:151;overflow:hidden;text-indent:-9999em;margin-top:-25px;opacity:0;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:0 0;width:42px;height:42px}
.slideshow_skitter_large{width:640px;height:260px}
.slideshow_skitter_small{width:200px;height:100px}
.slideshow_skitter .focus_button,.slideshow_skitter .next_button,.slideshow_skitter .prev_button,.slideshow_skitter .play_pause_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65kH6xJfbAlGhIy7rQYA6_U-fyyd8IkKlEQSHKUmAZb0lUGLTa-mEcctsHNveGTcbRvnDcBP7Hf3owyF8FG4J5tPWD2rosLyEN0HmM-THSJp3DIc3yJ4Ye50EekeQ7f7FEZYRN148iVw/w84-h126-no/sprite-default.png) no-repeat}
.slideshow_skitter .play_pause_button.play_button{background-position:0 -84px;width:42px;height:42px}
.skitter-minimalist .prev_button,.skitter-minimalist .next_button,.skitter-minimalist .play_pause_button,.skitter-minimalist .focus_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHpiFnWRnBhVfHEpJS1081zvJOmRCeY4kEbPXBgRSq-q92PMu4zxL97_5qKVnKh23EbfVG9xr-RDbUckqpII_HlSWYarxTTP9qF9tmlKG1h1FIFH_rsNAyKhh_sWI3kuxjYJTcshRKsJE/w24-h110-no/sprite-minimalist.png) no-repeat!important}
.skitter-minimalist .prev_button{background-position:0 0!important;width:24px!important;height:28px!important;}
.skitter-minimalist .next_button{background-position:0 -28px!important;width:24px!important;height:28px!important;}
.skitter-minimalist .play_pause_button{background-position:0 -74px!important;width:18px!important;height:18px!important}
.skitter-minimalist .play_pause_button.play_button{background-position:0 -56px!important;width:18px!important;height:18px!important}
.skitter-minimalist .focus_button{background-position:0 -92px!important;width:18px!important;height:18px!important}
.skitter-minimalist .info_slide .image_number{background:#000;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;font-size:12px;font-weight:400}
.skitter-minimalist .info_slide .image_number_select,.skitter-minimalist .info_slide .image_number_select:hover{background:#c33}
.skitter-minimalist .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0}
.skitter-round .prev_button,.skitter-round .next_button,.skitter-round .play_pause_button,.skitter-round .focus_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ZiGiwLOmsDv3wnjDPPCYJESTzkA41RnVrjczmRCJBrqCmB4A_CY9KFgil-dfhHi2EVNiBC1kjCJVb1NhrbmvjrUHG56oufy_HUZ_9yIj-J-o16INyn4J3QCOAcLNsJ7djQR6IXRUZf0/w47-h116-no/sprite-round.png) no-repeat}
.skitter-round .prev_button{background-position:0 0;width:23px;height:47px;left:-23px}
.skitter-round .next_button{background-position:-23px 0;width:23px;height:47px;right:-23px}
.skitter-round .next_button:hover,.skitter-round .prev_button:hover{opacity:1}
.skitter-round .play_pause_button{background-position:0 -70px;width:47px;height:23px;top:24px;left:24px!important}
.skitter-round .play_pause_button.play_button{background-position:0 -47px;width:47px;height:23px;top:24px}
.skitter-round .focus_button{background-position:0 -93px;width:47px;height:23px;top:24px;left:82px!important}
.skitter-round .info_slide .image_number{background:#999;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;font-size:12px;font-weight:400}
.skitter-round .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;background:#999}
.skitter-round .progressbar{top:5px;left:0;background:#333;box-shadow:rgba(255,255,255,0.3) 1px 1px 0}
.skitter-clean .prev_button,.skitter-clean .next_button,.skitter-clean .play_pause_button,.skitter-clean .focus_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxcAzoCh0AAi2VFAzVogpknzQvMGe7Yww4NyTzSwaHMhcZS7XGg_9p4cJb22IvhS3oAhES1XwHd__Jn8R7T7EDWwFZOwDKp9EFfSCTYSAxWCwfIj10zheWO4mS4uHwK7hX_0AD5ZzdO0Q/w47-h215-no/sprite-clean.png) no-repeat}
.skitter-clean .prev_button{background-position:0 0;width:47px;height:46px}
.skitter-clean .next_button{background-position:0 -46px;width:47px;height:46px}
.skitter-clean .play_pause_button{background-position:0 -133px;width:41px;height:41px}
.skitter-clean .play_pause_button.play_button{background-position:0 -92px;width:41px;height:41px}
.skitter-clean .focus_button{background-position:0 -174px;width:41px;height:41px}
.skitter-clean .info_slide_dots .image_number{width:14px;height:14px;background:#999}
.skitter-clean .progressbar{top:5px;left:5px;background:#fff;box-shadow:rgba(0,0,0,0.5) 1px 1px 0}
.skitter-square .play_pause_button,.skitter-square .next_button,.skitter-square .focus_button,.skitter-square .prev_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivMI6DDoZtVh8-u2tIqp1yJYXs4UhtO9BQgAVKjGG_lclF9zpbYNd4fgS3F9LVHxe4Yy0Fx_3QE5-xmGNCW2y9VFiW7ps8A3YZ1hsL_nscisglUcCghuT_wpCPJAVGJ-gIWGeIi4KYtiI/w110-h165-no/sprite-square.png) no-repeat}
.skitter-square .play_pause_button{background-position:-55px 0;width:55px;height:55px;top:10px!important;left:10px!important;bottom:auto!important;right:auto!important;margin-top:0}
.skitter-square .play_pause_button.play_button{background-position:0 0;width:55px;height:55px}
.skitter-square .focus_button{background-position:-55px -55px;width:55px;height:55px;top:10px!important;left:65px!important;bottom:auto!important;right:auto!important;margin-top:0}
.skitter-square .next_button{background-position:0 -55px;width:55px;height:55px;top:auto;right:auto;bottom:10px;left:65px}
.skitter-square .prev_button{background-position:0 -110px;width:55px;height:55px;top:auto;right:auto;bottom:10px;left:10px}
.skitter-square .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;background:#999}
.skitter-square .info_slide_dots .image_number:hover{background:#999}
.skitter-square .info_slide_dots .image_number_select,.skitter-square .info_slide_dots .image_number_select:hover{background:#555}
.skitter-square .progressbar{top:0!important;left:0!important;width:100%;background:#fff;border-radius:0;height:2px}
.slideshow_skitter ul,.slideshow_skitter .image img{display:none}
.slideshow_skitter .prev_button:hover,.slideshow_skitter .next_button:hover,.slideshow_skitter .play_pause_button:hover,.slideshow_skitter .focus_button:hover{opacity:0.5!important}
.slideshow_skitter .info_slide .image_number:hover,.slideshow_skitter .info_slide_dots .image_number:hover{background:#000}
.skitter-minimalist .info_slide,.skitter-round .info_slide,.skitter-clean .info_slide,.skitter-square .info_slide{background:transparent}
.skitter-minimalist .info_slide .image_number:hover,.skitter-round .info_slide .image_number_select,.skitter-round .info_slide .image_number_select:hover,.skitter-round .info_slide_dots .image_number_select,.skitter-round .info_slide_dots .image_number_select:hover,.skitter-clean .info_slide_dots .image_number_select,.skitter-clean .info_slide_dots .image_number_select:hover{background:#111}
.skitter-round .info_slide .image_number:hover,.skitter-round .info_slide_dots .image_number:hover,.skitter-clean .info_slide_dots .image_number:hover{background:#333}
.skitter-clean .info_slide .image_number,.skitter-square .info_slide .image_number{background:#fff;box-shadow:rgba(0,0,0,0.2) 1px 1px 0;font-size:12px;font-weight:400;color:#333}
.skitter-clean .info_slide .image_number:hover,.skitter-square .info_slide .image_number:hover{background:#ccc}
.skitter-clean .info_slide .image_number_select,.skitter-clean .info_slide .image_number_select:hover,.skitter-square .info_slide .image_number_select,.skitter-square .info_slide .image_number_select:hover{background:#111;color:#fff}
</style>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.animate-colors-min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/slideshow.skitter.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow_skitter_large').skitter({
theme: 'square',
numbers_align: 'center',
progressbar: true,
dots: true,
preview: true
});
});
</script>

<div class='slideshow_skitter slideshow_skitter_large'>
<ul>
  <li><a href='www.arabe-eye.com'><img alt='Faceblog Evolutions' class='cube' src='http://pakihub.com/wp-content/uploads/2013/01/Beautiful-Islamic-Wallpapers-Islamic-Pictures-New-2013-collection-Allah-Muhammad.jpg' title='Faceblog Evolutions'/></a><div class='label_text'><p>مثال لعنوان موضوع 1</p></div></li>
  <li><a href='www.arabe-eye.com'><img alt='Faceblog Evolutions' class='cubeRandom' src='http://topislamicwallpapers.files.wordpress.com/2012/05/free-iloveislam-islamic-wallpaper-2012-hd.jpg' title='Faceblog Evolutions'/></a><div class='label_text'><p>مثال لعنوان موضوع 2</p></div></li>
  <li><a href='www.arabe-eye.com'><img alt='Faceblog Evolutions' class='block' src='http://i1.sndcdn.com/artworks-000053257370-gla549-original.jpg' title='Faceblog Evolutions'/></a><div class='label_text'><p>مثال لعنوان موضوع 3</p></div></li>
  <li><a href='www.arabe-eye.com'><img alt='Faceblog Evolutions' class='cubeStop' src='http://pakihub.com/wp-content/uploads/2013/01/Beautiful-Islamic-Wallpapers-Islamic-Pictures-New-2013-collection-Allah-Muhammad.jpg' title='Faceblog Evolutions'/></a><div class='label_text'><p>مثال لعنوان موضوع 4</p></div></li>
  <li><a href='www.arabe-eye.com'><img alt='Faceblog Evolutions' class='cubeHide' src='http://topislamicwallpapers.files.wordpress.com/2012/05/free-iloveislam-islamic-wallpaper-2012-hd.jpg' title='Faceblog Evolutions'/></a><div class='label_text'><p>مثال لعنوان موضوع 5</p></div></li>
</ul>
</div>

ما يجب عليك فعله هو تغيير روابط الصور وتغيير روابط مدونتي بروابط المواضيع او الأقسام اوي اي روابط تريد ثم غير العناوين بما يناسب الروابط والصور

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

هذا كل شيئ اتمنى أن يعجبكم السلايد شو بالتوفيق للجميع ودمتم في رعاية الله وحفظه