Slidershow Eklentisi 2

Bu eklentide diğer Slideshow dan farklı olarak bunda yayınlara istediğiniz açıklamaları ekleyebilirisiniz. Kodu isterseniz gadget olarak ekleyin istersenizde html den istediğiniz bir bölüme ekleyin.

alıntı: bloggertrix.com

//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>
<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>
<div id="debug">
</div>
<div id="slider">

<div id="mask-gallery">
 <ul id="gallery">
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgo3d2VaqPv-5OuYvJHcLGbgMeWo7-5Q2uHogkFFewgvtIsP7DSnwz4n3bX-r0_GisMKX4GfvdmtmZEz35pqSv0MA-z6wDMTaBLMbnJpkejLShmry8qusxY8pZ9eOpuCrfp90j7ABTOjM/s1600/btrix_image2" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB2nfkTqL6eQKgtEO2J9tz3INVMU-pL_D-fmxI8yypKx3RU1wTCh8jq1QxAhTiaNzmFjD_SPPjFjFddk2N5avWcqEccSSrCJSeokaREadq65Y_HLgXWBUgEQcfI_WZzLbTOwXgWcXDbNU/s1600/btrix_image1.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg71uSUHD0lExdff-LKH3_QSdUbYc1BK1mz4naziLRL2h8PTM8_K4-E68W5HXHX62-CFOv1VeDb3Z0kc6eAakTWiB43bHHC5qHxoKIrgRkSS41XXnOmjmkbxu0Hi0ia0N7XMSijuu4qbao/s1600/btrix_image3.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpu1n95OuBGNMY79CrcByBRT8kma8iMhwLcGJKlODrtl-YbJmBHPBEOi9y6xyAxKjjK7c_8SBpB7eBCmUITaYUUGkbxFH5F2bnoszZZ1jOe91xP3GMjNyCZI5ndRKIyWcxKGXJt8IAZGk/s1600/btrix_image5.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglW-Upr0iZZJGUucAg895XBUDRoxSupVHPQmoficcX4sOAPoxpXLifCO6zeCfXxLsbBSqFVnYGhtlUVFnotCD83Iw0yWJDLhmNB1op1mK6UwVKCPgEKLe2VOJwdJmj76LxAhsSW6Yha9I/s1600/btrix_image4.jpg" width="660" height="275" alt=""/></li>
</ul>
</div>
<div id="mask-excerpt">
 <ul id="excerpt">
<li>Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.</li>
<li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
<li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li>
<li>tristique senectus et netus et malesuada fames ac turpis egestas.</li>
<li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li>
</ul>
</div>
</div>
<div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;">
 <a href="#" id="btn-prev">prev</a> 
 <a href="#" id="btn-next">next</a>
</div>
<div class="clear">
</div>

About Us

Related Post:

Yorum Gönder - Back to Content

Etiketler

Popüler Yayınlar