22 Mart 2013 Cuma

Yeni Jquery Otomatik Galeri Slider

37 yorum

Daha önce bir kaç farklı slider eklentisi paylaşmıştım. Blogunuzun başlığı ile yazı bölümü arasına ekleyeblieceğiniz bu sliderlar sayesinde öne çıkarmak istediğiniz yazıları otomatik slayt gösterisi olarak gösterebiliyorsunuz. Daha önce paylaştığım benzer sliderlar şunlardı:

 

- Minimal Yatay Slayt Eklentisi

- Slayt Manşet Eklentisi

- Slayt Manşet [ JavaScript Versiyonu ]

 

Bu yazıda paylaşacağım eklenti de Jquery script kullanılarak yapılmış çok şık bir slider. Üstelik blogunuza çok kolay bir şekilde ekleyebilirsiniz. Silder’ın örnek resmini verdikten sonra lafı fazla uzatmadan slider’ın eklenmesine geçmek istiyorum.

 

Yeni Jquery Otomatik Galeri Slider

Bu slider’ı blogunuza eklemek için Blogger kumanda paneline giriş yaptıktan sonra yerleşim sekmesini açın. Burada üst bilgi gadgetının hemen altındaki gadget ekle linkine tıklyarak listenen HTML/JavaScript gadgetı seçin ve aşağıdaki kodları ekleyin.

 

Gadget ekle

 

<style type="text/css">

.container1 {
width: 660px;padding: 0;margin: 0 auto;
}
.folio_block {
position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: left;position: relative;}
.window {-moz-box-shadow: 0px 0px 5px #303030;
-webkit-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px;
margin-top:15px;overflow: hidden; position: relative;
}
.image_reel {
position: absolute;top: 0; left: 0;
}
.image_reel img {float: left;}
.paging_btrix {
position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; text-align: center;
line-height: 40px;
background: url(https://lh4.googleusercontent.com/-PdRhQtKH6zI/UTfGogJpxdI/AAAAAAAAHrQ/JX41PoOe84U/s179/serit.png) no-repeat;
display: none;
}
.paging_btrix a {
padding: 5px;text-decoration: none;color: #fff;
}
.paging_btrix a.active {
font-weight: bold; background: #920000; border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging_btrix a:hover {font-weight: bold;}
</style>

<div class="container1">
<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src="https://lh6.googleusercontent.com/-M1SkG7S6p1c/UTfH9q0IrkI/AAAAAAAAHrw/esa8jPjsZ9k/s660/resim1.jpg" alt="" /></a>
            <a href="#"><img src="https://lh3.googleusercontent.com/-SQt2U9UwAp0/UTfH9nwxkWI/AAAAAAAAHr4/c0ZTwmVPf4o/s660/resim2.jpg" alt="" /></a>
            <a href="#"><img src="https://lh5.googleusercontent.com/-1M2CS_Ir0Oo/UTfH9kZLT9I/AAAAAAAAHrs/ge3doW6idB0/s660/resim3.png" alt="" /></a>
            <a href="#"><img src="https://lh5.googleusercontent.com/-AN1vZ-1wz44/UTfH-BYhPeI/AAAAAAAAHr0/MqALFkzr84Q/s660/resim4.jpg" alt="" /></a>
        </div>
    </div>
    <div class="paging_btrix">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

//Set Default State of each portfolio piece
$(".paging_btrix").show();
$(".paging_btrix a:first").addClass("active");
 
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
 
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
 
//paging_btrix + Slider Function
rotate = function(){
  var triggerID = $active.attr("rel") - 1; //Get number of times to slide
  var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

  $(".paging_btrix a").removeClass('active'); //Remove all active class
  $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
 
  //Slider Animation
  $(".image_reel").animate({
   left: -image_reelPosition
  }, 500 );
 
};
 
//Rotation + Timing Event
rotateSwitch = function(){ 
  play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
   $active = $('.paging_btrix a.active').next();
   if ( $active.length === 0) { //If paging_btrix reaches the end...
    $active = $('.paging_btrix a:first'); //go back to first
   }
   rotate(); //Trigger the paging_btrix and slider function
  }, 5000); //Timer speed in milliseconds (3 seconds)
};
 
rotateSwitch(); //Run function on launch
 
//On Hover
$(".image_reel a").hover(function() {
  clearInterval(play); //Stop the rotation
}, function() {
  rotateSwitch(); //Resume rotation
});
 
//On Click
$(".paging_btrix a").click(function() {
  $active = $(this); //Activate the clicked paging_btrix
  //Reset Timer
  clearInterval(play); //Stop the rotation
  rotate(); //Trigger rotation immediately
  rotateSwitch(); // Resume rotation
  return false; //Prevent browser jump to link anchor
});
 
});
</script>

 

Değiştirmeniz gereken yerler şunlar:

 

- https://…./resim1.jpg, https://…/resim2.jpg, https://…/resim3.png, https://…/resim4.jpg şeklindeki urllerin yerine kendi resimlerinze ait urlleri yazın.

 

- Her resme ait urlden önce # işareti olan yere, o resme tıklayın açılmasını istediğiniz sayfanın adresini yazın.

37 yorum:

  1. Çok sade ve şık bir slider hocam. Elinize sağlık.

    YanıtlaSil
  2. kaleminize kuvvet hocam, faydalı bir konu olmuş :)

    YanıtlaSil
  3. Tamda slider arıyordum hocam ellerinize sağlık

    YanıtlaSil
  4. hocam cidden harika olmuş hızlıda siteyide kasmaz bence bu eklenti

    YanıtlaSil
  5. kurulumu kolay ve basit güzel eklenti

    YanıtlaSil
  6. hocam nasıl artarabiliriz manşetleri 5 6 tane olması

    YanıtlaSil
  7. Bu çok hoşmuş abi ellerine sağlık. Süper.

    YanıtlaSil
  8. geçişler gerçekten şıkmış. Biz de slider kullanıyoruz sanıyoruz :(
    teşşekkür ederim.

    YanıtlaSil
  9. şu etiket bazlı olsa süper olur

    YanıtlaSil
  10. elinize sağlık hocam ancak kodda gereksiz yerler ve kodlamada ufak hatalar var düzeltmezsenizde çalışır ama sayfa açılış hızını yavaşlatır.

    YanıtlaSil
  11. merhaba siteme bi slider yerleştirdim ama slaytlar alt menü yazılarımın üstüne çıkıyor alt menü görünmüyor bunu nasıl düzeltebilirim bakmak isterseniz http://beyazperdeci.blogspot.com/

    YanıtlaSil
  12. Ekledim fakat geçişler çok hızlı nasıl düzelteceğim? :/

    YanıtlaSil
  13. @Oyuncu ES
    5000 değeri 3 saniyeye denk gelir. O değeri arttırırsanız geçiş yavaşlar.

    YanıtlaSil
  14. Merhaba
    Slider'ın genişliğini kendi siteme göre nasıl ayarlarım ??

    YanıtlaSil
  15. @Tunahan
    width: 660px değerlerini değiştirerek.

    YanıtlaSil
  16. Mükemmel Hocam elinize sağlık teşekkürler.

    YanıtlaSil
  17. çokta yakıştı boyutuda serdar hocamın dediğine göre büyülttüm bkz : www.zeynepcamci.org kusursuz bir slider.

    saolun hocam.

    YanıtlaSil
  18. Serdar hocam , Yaptım herşeyi güzel oldu fakat bişey sorabilirmiyim ? Bu benim menü ile slider arasındaki mesafeyi nasıl sıfırlayabilirim yada yaklaştırabilirim..elimden geldiğince tüm pxlerle oynadım ama hiç bişey elde edemedim.

    YanıtlaSil
  19. @Emre Demirer
    Menünün margin bottom değerini düşürmelisin. Biraz CSS bilgisi gerektirir.

    YanıtlaSil
  20. Hocam uzun zamandır kullanıyorum bu manşeti ama artık sadece anasayfada gözükmesini diğer sayfalarda gözükmemesini istiyorum nasıl yapabilirim?
    www.intrustweeat.com

    YanıtlaSil
  21. @In Trust We Eat
    Linkini verdiğim yazıda sadece ana sayfada göstermek için yapmanız gereken yazıyor.
    http://bloghocam.blogspot.com/2012/09/blogger-sartl-etiketler-listesi-ve.html

    YanıtlaSil
  22. Merhaba, sizin eklediğiniz dışında bir resim sayfamda açılmıyor. Ne yapmalıyım? Url almayı mı beceremiyorum yoksa resmin boyutu mu uygun değil bir türlü kestiremedim.

    YanıtlaSil
  23. elinize sağlık, bunun kategoriye özel otomatik olarak rss çekerek otomatik olarak yapanı var mı ?

    YanıtlaSil
  24. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  25. Hocam 4 e geldikten sonra 1 i hızlıca geçiyor hemen 2 ye geliyor.Sonra 3 de ise 4 e hızlıca geçiyor.Nasıl düzeltebiliriz.

    http://alikoklu0.blogspot.com.tr/

    YanıtlaSil
  26. Bu otomatik slider değil. Link destekli slider. Otomatik olan örneğin Son yazılar, rastgele yazılar veya son yorumları görüntüleyenlerdir.

    YanıtlaSil
  27. @Meta Morpheus
    Slaytlar arasında otomatik geçiş yaptığı için otomatik slider.

    YanıtlaSil
  28. Merhaba apkmaniaa.com sitesine eklemek istiyorum ancak postların üzerine koyunca büyük geliyor ve 1 2 3 ten sonrası dışarda kalıyor acaba benim resimlerime göre nasıl boyutlandırırım bu slideri şimdiden çok teşekkürler

    YanıtlaSil
  29. Hocam bunu nasil responsive yapariz yardimci olurmusunuz...?

    YanıtlaSil
  30. Elinize sağlık çok güzel oldu. Ama 2 ve 4 çok hızlı geçiyor. Sürelerini ayarlayamadım. Yardımcı olabilir misiniz?

    YanıtlaSil
  31. Merhaba hocam slaytlar üzerine yazı ekleyemiyormuyuz ?

    YanıtlaSil
  32. @Muhammet Gül
    Bunda sadece resim gösterebiliyoruz, üzerine yazı yazamıyoruz.

    YanıtlaSil
  33. Alper Aydın7 Nisan 2016 00:40

    Serdar Bey benim merak ettiğim noktayı size sormak istiyorum;
    Blogta son yazdığımız yazıların otomatik olarak mansete gelmesini istiyorum. Böyle bir şey mümkün mü? Yazıya koyulan öne çıkan resmide otomatik manset resmi olacak vb..

    YanıtlaSil
  34. Hocam bu js kodu benim sitemde çakışıyor ne yapmam lazım js

    YanıtlaSil
  35. Yardımcı olursanız sevinirim

    YanıtlaSil
  36. Hocam merhabalar. Bu slaytı mobil uyumlu hale nasıl getirebiliriz? Mobil uyumlu bir temada aynen kendi ölçülerinde çıktığı için resmin yarısından fazlası görünmüyor. Mobil sitesi açıldığında resim boy-en oranları bozulmadan telefonun ekran genişliğine göre nasıl ayarlanır?

    YanıtlaSil

Picardes

LİNKLER