سلايدر شو إحترافى لمدونات بلوجر

نوفمبر 05, 2013 ahmed fathy اضافات بلوجر - أكواد

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

لاضافة الكود الى مدونتك قم بنسخ هذه الأكواد

<center><script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery-1.3.1.min.js"></script><br />
<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery.scrollTo.js"></script><br />
<script>
$(document).ready(function() {
 //Speed of the slideshow
 var speed = 5000;
 //You have to specify width and height in #slider CSS properties
 //After that, the following script will set the width and height accordingly
 $('#mask-gallery, #gallery li').width($('#slider').width()); 
 $('#gallery').width($('#slider').width() * $('#gallery li').length);
 $('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
 //Assign a timer, so it will run periodically
 var run = setInterval('newsscoller(0)', speed); 
 $('#gallery li:first, #excerpt li:first').addClass('selected');
 //Pause the slidershow with clearInterval
 $('#btn-pause').click(function () {
 clearInterval(run);
 return false;
 });
 //Continue the slideshow with setInterval
 $('#btn-play').click(function () {
 run = setInterval('newsscoller(0)', speed); 
 return false;
 });
 //Next Slide by calling the function
 $('#btn-next').click(function () {
 newsscoller(0); 
 return false;
 }); 
 //Previous slide by passing prev=1
 $('#btn-prev').click(function () {
 newsscoller(1); 
 return false;
 }); 
 //Mouse over, pause it, on mouse out, resume the slider show
 $('#slider').hover(
 function() {
 clearInterval(run);
 }, 
 function() {
 run = setInterval('newsscoller(0)', speed); });});
function newsscoller(prev) {
 //Get the current selected item (with selected class), if none was found, get the first item
 var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
 var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');
 //if prev is set to 1 (previous item)
 if (prev) {
 //Get previous sibling
 var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
 var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
 //if prev is set to 0 (next item)
 } else {
 //Get next sibling
 var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
 var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
 }
 //clear the selected class
 $('#excerpt li, #gallery li').removeClass('selected');
 //reassign the selected class to current items
 next_image.addClass('selected');
 next_excerpt.addClass('selected');
 //Scroll the items
 $('#mask-gallery').scrollTo(next_image, 800);  
 $('#mask-excerpt').scrollTo(next_excerpt, 800);     }
</script><br />
<style>
#slider {
 /* You MUST specify the width and height */
 width:660px;
 height:275px;
 position:relative; 
 overflow:hidden;
-moz-box-shadow: 0px  0px 6px #000000;
-webkit-box-shadow: 0px 0px 6px #000000;
box-shadow: 0px 0px 6px #000000;
}
#mask-gallery {
 overflow:hidden; 
}
#gallery {
 list-style:none;
 margin:0;
 padding:0;
 z-index:0;
 width:900px;
 overflow:hidden;
}
 #gallery li {
 float:left;
 }
#mask-excerpt {
 position:absolute; 
 top:0;
 left:0;
 z-index:500;
 width:100px;
 overflow:hidden; 
 }
#excerpt {
 filter:alpha(opacity=60);
 -moz-opacity:0.6;  
 -khtml-opacity: 0.6;
 opacity: 0.6;  
 list-style:none;
 margin:0;
 padding:0;
 z-index:10;
 position:absolute;
 top:0;
 left:0;
 width:100px;
 background-color:#000;
 overflow:hidden;
 font-family:arial;
 font-size:14px;
 color:#fff; 
}
 #excerpt li {
 padding:5px;
 }

.clear {
 clear:both; 
}
#btn-prev {
 border-top: 1px solid #96d1f8;
 background: #65a9d7;
 padding: 4px 8px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
 -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
 box-shadow: rgba(0,0,0,1) 0 1px 0;
 text-shadow: rgba(0,0,0,.4) 0 1px 0;
 color: white;
 font-size: 9px;
 font-family: Georgia, serif;
 text-decoration: none;
 vertical-align: middle;
 }
#btn-prev:hover {
 border-top-color: #28597a;
 background: #28597a;
 color: #ccc;
 }
#btn-prev:active {
 border-top-color: #238acf;
 background: #238acf;
 }
#btn-next {
 border-top: 1px solid #96d1f8;
 background: #65a9d7;
 padding: 4px 8px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
 -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
 box-shadow: rgba(0,0,0,1) 0 1px 0;
 text-shadow: rgba(0,0,0,.4) 0 1px 0;
 color: white;
 font-size: 9px;
 font-family: Georgia, serif;
 text-decoration: none;
 vertical-align: middle;
 }
#btn-next:hover {
 border-top-color: #28597a;
 background: #28597a;
 color: #ccc;
 }
#btn-next:active {
 border-top-color: #238acf;
 background: #238acf;
 }
</style><br />
<div id="debug"></div><div id="slider"><div id="mask-gallery"><ul id="gallery"><li><a href="http://pro-elhorya.blogspot.com/2013/11/2014-pes2014-full.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGt7UmuVemPWlPQm-qBrNWQ0rMM8shnjNcl89crwA37pDEGGsGus5CSJXdMOxQBu2MmYiwJr51Ptocv4HkiD8Me2l_iaRUgeJ0v9cdEZKOjcVH4GrCYwarof5SoRyjCmUSTOqTEaGT4ZIC/s1600/Untitled.png" width="660" height="275" alt=""/></a></li>
<li><a href="http://pro-elhorya.blogspot.com/2013/11/blog-post.html#.UnlGOCeLffo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGXIynkfVJCUXSD7v17szCFT-cIQTbrghrhfaWVRN2EKjdZiIVr9rY0EnUpcHypU_KIUcB7HeS5kce7BcTBB-rFo3Am27F5S-ZzUoZMtAAltKEVMVzlJ3XfRkQSxxkKmbyp8DE3ujpVV51/s1600/201312.jpg" width="660" height="275" alt=""/></a></li>
<li><a href="http://pro-elhorya.blogspot.com/2013/11/7-xp.html#.UnlLWSeLffo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFNi3eK9nKrPJXbPccj_ubqxsQAODTwSeiIaf8hpDKkNyUmb3YpgGUlJATfDer9BS6iPbM_6OX-Kvh8_uV7Hzme0x_pZXoIR-k606dQ9hHkrrEiEoHzHc1EsmifIJruRrVFswwnh5D2-8t/s1600/Untitled.png" width="660" height="275" alt=""/></a></li>
<li><a href="http://pro-elhorya.blogspot.com/2013/11/blog-post_5333.html#.UnlMCCeLffo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOck8QOsvpAmWH3f174dE37h6KauZmDu78NqWSAxpqCBfSDCIg7QkKgCPX7pIdOlofZZgKg0DdINSVcVGTQu9LtZ8JhyLot2S93m1xnhhoLru3M4Pkv5ZxlycAGUabDOW0v5XEkMupsKue/s1600/2013.jpg" width="660" height="275" alt=""/></a></li>
<li><a href="http://pro-elhorya.blogspot.com/2013/10/blog-post_7287.html#.UnlMWSeLffo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxPmO5gJ3wLgZd-BmYQvEx1qf2xFZObR6Ow7UwJfhNfI_2Ha05bcgT03njewQ5WqdH6A1U7fs1GVNPNGB6QBvuOlZUJzjnDMhM5aB2ZpIICOGB7MvMbp8nu1w6UfSDbnexWC3rI93JjGQd/s1600/1391949_453825924723848_804093433_n.jpg" width="660" height="275" alt=""/></a></li>
</ul></div><div id="mask-excerpt"><ul id="excerpt"><li>بيس 2014 بين يديك نسخة كاملة pes2014 full شرح بالصور لطريقة تفعيلها </li>
<li>حصريا تعلم كيف تتابع طلبات الصداقة التى ارسلتها ولم يتم قبولها وطريقة حذفها شرح مصور</li>
<li> بإدوات بسيطة وسحرية طريقة تفعيل نسخة ويندوز 7 و xp </li>
<li>طــريقة تـحميل فيديو أعجبك على الفيس بوك </li>
<li> منحة التأهيل للعمل بالبنوك والبورصة | مركز نيو فيجن السويس </li>
</ul></div></div><p/><div id="buttons" style="width: 200px;margin-left: 200px;padding-left: 50px;height: 50px;"><a href="#" id="btn-prev">prev</a> <br />
<a href="#" id="btn-next">next</a><br />
</div><div></div></p></center>

سلايدر شو إحترافى لمدونات بلوجر

مواضيع مقترحة