Jquery Otomatik resim slayt galerisi
Sliderlar sitemizi güzelleştirmek ve önemli konuları ön plan da tutmak için kullandığımız görsel öğelerdir. Bloglarınızın daha şık, görsel olarak daha orjinal ve güzel görünmesini sağlayacak bir slider eklentisini paylaşacağım bugün sizlerle. Sağdan sola dogru kayan, numaralandırmalı, kırmızı kurdelesiyle çok şık bir slider. Uygulaması kolay ve herkesin blogunda, sitesinde kullanabileceği güzel bir eklenti.

● Jquery Otomatik Galeri Slider
● jQuery Auto Slider
● Automatic Image Slider with CSS & jQuery
● Html Kodlarıyla Otomatik resim galerisi yapımı
● jQuery Auto Image Slideshow

Blogger'a Ekleme

1. Blogger Kumanda Panelinize gidin.
2. Yerleşim sekmesine tıklayın.
3. İstediginiz bölümde Gadget/Widget Ekle'ye basın.
4. Açılan pencerede HTML/JavaScript seçeneğini seçin.
5. Aşağıdaki kodu isteğinize göre ayarlayarak, kopyalayın ve yapıştırın.
6. isterseniz bir başlık ekleyebilirsiniz.

<style type="text/css">
.container1{width:660px;margin:0;padding:0;}
.folio_block{position:absolute;left:50%;top:50%;margin:-140px 0 0 -395px;}
.main_view{float:left;position:relative;}
.window{height:240px;width:660px;-moz-box-shadow:0 0 5px #303030;-webkit-box-shadow:0 0 5px #303030;box-shadow:0 0 5px #303030;border:1px solid #000;margin:0;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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgxRG_jtWVQv-kkBqi6S_blDhvgOv6Q-Mrx6YPkmpHULSojJYoGWFpwUjgA1Mj9fCtfAmeBVxmLpJniwBtgKucWvehj4HHYB4avR42xmu3pcKygaE2N4X-iGgkIwOVFAaCU7-95G3Feqlc/s320/paging.png) no-repeat;display:none;}
.paging_btrix a{text-decoration:none;color:#fff;padding:5px;}
.paging_btrix a.active{font-weight:700;background:#920000;border:1px solid #610000;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;}
.paging_btrix a:hover{font-weight:700;}
</style>
<div class="container1">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="https://i.imgur.com/lZN7Lql.jpg"><img src="https://i.imgur.com/lZN7Lql.jpg" alt="Meftun Apart Fethiye" /></a>
<a href="https://i.imgur.com/rPXebHN.jpg"><img src="https://i.imgur.com/rPXebHN.jpg" alt="Resmin Tanımı" /></a>
<a href="https://i.imgur.com/H13Lrjy.jpg"><img src="https://i.imgur.com/H13Lrjy.jpg" alt="Resmin Tanımı" /></a>
<a href="https://i.imgur.com/MpBPxIB.jpg"><img src="https://i.imgur.com/MpBPxIB.jpg" alt="Resmin Tanımı" /></a>
<a href="https://i.imgur.com/Y1BVB1I.jpg"><img src="https://i.imgur.com/Y1BVB1I.jpg" alt="Resmin Tanımı" /></a>
<a href="https://i.imgur.com/YdVO1UW.jpg"><img src="https://i.imgur.com/YdVO1UW.jpg" alt="Resmin Tanımı" /></a>
<!--Burdan itibaren yukarıdaki şekilde resimlerinizi çoğaltabilirsiniz-->
</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>
<a href="#" rel="5">5</a>
<a href="#" rel="6">6</a>
<!--Burdan itibaren kaç tane resim eklediyseniz numaralandırmasını ekleyin-->
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){$(".paging_btrix").show();$(".paging_btrix a:first").addClass("active");var imageWidth=$(".window").width();var imageSum=$(".image_reel img").size();var imageReelWidth=imageWidth*imageSum;$(".image_reel").css({'width':imageReelWidth});rotate=function(){var triggerID=$active.attr("rel")-1;var image_reelPosition=triggerID*imageWidth;$(".paging_btrix a").removeClass('active');$active.addClass('active');$(".image_reel").animate({left:-image_reelPosition},500)};rotateSwitch=function(){play=setInterval(function(){$active=$('.paging_btrix a.active').next();if($active.length===0){$active=$('.paging_btrix a:first')}rotate()},
5000)};rotateSwitch();$(".image_reel a").hover(function(){clearInterval(play)},function(){rotateSwitch()});$(".paging_btrix a").click(function(){$active=$(this);clearInterval(play);rotate();rotateSwitch();return false})});
</script>

Kodu denemek için Online html editor'ü kullanabilirsiniz.
Yukarıdaki kırmızı ile belirttiğim alanları kendinize göre düzenlemeyi unutmayın! Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

Live Demo
Meftun Apart Fethiye Fethiye doga manzarasi Ölüdeniz Meftun Apart Havuz Fethiye Gece Fethiye
1 2 3 4 5 6

33 Yorumlar

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

  1. Gardaş İşin rast gitsin Allah razı olsun birde boyutunu ayarlaya bilirsem süper olcak

    YanıtlaSil
  2. Üstteki Style kodlarındarında ".window" bölümündeki kırmızıyla işaretledigim height:yükseklik width:genişlik bölümlerini resimlerinizin boyutlarına göre ayarlayabilirsiniz.Kolay gelsin.

    YanıtlaSil
  3. öncelikle çok saolun ama bu resimleri nasıl hızlandırabiliriz söylerseniz sevinirim

    YanıtlaSil
  4. Savaş bey, en alttaki script kodları arasında kırmızı renkle belirttiğim 5000 olan miktarı yükseltirseniz yavaşlar, düşürürseniz hızlanır. Kolay gelsin.

    YanıtlaSil
  5. HOCAM SELAMLAR. paging_btrix{ OLARAK GECEN BOLUMDEKI kısmı resım sayısına gore nasıl uzatıyoruz bılgı erırmısınız....

    YanıtlaSil
  6. <div class="image_reel"> bölümünün altına ne kadar resminiz varsa ekleyin.
    <div class="paging_btrix">
    <a href="#" rel="1">1</a>
    bölümünde 6 tane resim kullanıldığı için <a href="#" rel="6">6</a> kadar. Kaç tane resminiz varsa hemen altına <a href="#" rel="7">7</a> gibi devam edin. Kolay gelsin.

    YanıtlaSil
  7. s.a

    bu kodu bir sayfaya 2 tane koyduğumuzda hızlı hızlı gidiyor bunu nasıl düzeltebiliriz

    YanıtlaSil
    Yanıtlar
    1. Script kodlarını ikinci defa kullandığınızda alırsınız bu hatayı. şöyle yapın;
      en altdaki script kodlarını </head> kodunuzdan hemen önce ekleyin. Böylece 2 tane kullandığınız slaylarda altdaki script kodlarını yazmanıza gerek kalmaz ve çakışma olup slaytın hız dengesini bozmaz. Sitenizde aynı scripti birden fazla kullanmayın. Kolay gelsin.

      Sil
    2. verdiğiniz bilgi için sağolun

      bir sayfada 2 vaya 3 tane slaytı aynı anda kullanabileciğim kod varmı

      Sil
  8. kardeş paylaşımın için teşekürler. gerçkten çok iş görecek türden bir slider. sorum şu kırmızı bantı ordan nasıl kaldırabilirm rakamlarla birlikte düz halde kullanmak istiyorum yada o kırmızı bant olmadan kullanma imkanım varmı? belirtmek istediğim türden bir slider kodun varmı yardımcı olursan sevinirim kolay gelsin

    YanıtlaSil
  9. Hakan bey, Üstdeki style kodlar arasından aşağıda vereceğim bölümü değiştirin.
    .paging_btrix{position:absolute;bottom:10px;right:-7px;width:178px;height:47px;z-index:100;text-align:center;line-height:40px;background:url(http://4.bp.blogspot.com/_ELUIRQESuk4/TFw-m2eaQlI/AAAAAAAAADg/KQbHMNM6wOQ/s320/paging.png) no-repeat;display:none;}
    Siyahla işaretli bölümü background:none; olarak değiştirin. Kırmızı bantı ordan kaldımış olursunuz. Kolay gelsin.

    YanıtlaSil
  10. Merhaba, bu kodu sadece Ana Sayfa'da göstermek için ne yapmamız gerekiyor.?

    YanıtlaSil
    Yanıtlar
    1. Sadece Ana Sayfa'da göstermek için kodların başına;
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      Sonuna;
      </b:if> ekleyin.

      Sil
    2. Ana sayfaya geçmiyor. Blogun alt kısmında ortalıyor sadece.

      Sil
    3. Ortalama yapmaması için aşağıdaki gösterdiğim style kodlarını değiştiriyoruz.
      .container1{width:660px;margin:0;padding:0;}
      .window{height:240px;width:660px;-moz-box-shadow:0 0 5px #303030;-webkit-box-shadow:0 0 5px #303030;box-shadow:0 0 5px #303030;border:1px solid #000;margin:0;overflow:hidden;position:relative;}

      Not: Konuyu editleyip değiştirdim artık ortalama olmıyacak. Tekrar deneyin. Slayt'ın sadece ana sayfada görünmesi için blogger yerleşim segmesindeyken Blog Kayıtları'nın üstüne veya altına bu slaytı gadget olarak eklediyseniz; bi üstteki verdiğim cevap hala geçerlidir. Kolay gelsin.

      Sil
  11. çok güzel de geçiş efektini değiştirebiliyor muyuz

    YanıtlaSil
  12. kolay gelsin çok güzel bunu siteme nasıl entegre ederim blog sitesi değil benim sitese android oyun sitesi

    YanıtlaSil
  13. çok başarılı gerçekren. fakat resimler geçiş yaparken tam oturmuyor. sol kısımdan bi önceki resmin 3-4 px görüntüsü kalıyor , nnyden kaynaklı olabilir acaba ?

    YanıtlaSil
    Yanıtlar
    1. 3 farklı blogta da denedim. Son resim gözükmüyor, beyaz kalıyor sadece. Resim hatalıdır diye sayıyı 5e,4e,3e indirdim, kaç resim olursa olsun sondaki gözükmüyor :S

      Sil
  14. Hocam sol tarafa sıfır oldu, soldan bir parmak pay bırakmak için hangi rakamları değiştirmek gerekiyor ?

    YanıtlaSil
    Yanıtlar
    1. Aşağıda gösterdiğim kodda siyahla işaretlediğim bölümü ekleyip değişiklikler yapabilirsiniz.
      .container1 {
      width: 660px;
      padding: 0px;
      margin: 0px 9px;
      }

      Sil
  15. merhaba sol boşluğa eklediğimde sitenin yayınlarına tıklanmıyor, kaldırdığımda tekrar eski haline dönüyor. sol boşlukta olması için REKLAM KODU bu kodu kullanıyorum. reklam kodu yazan yere sizin kodlarınızı ekliyorum 160*600 olarak, ama dediğim gibi bunları eklediğimde sitedeki hiçbir yayına tıklanmıyor. ne yapabilirim acaba... http://ebabilkutuphanesi.blogspot.com.tr/

    YanıtlaSil
    Yanıtlar
    1. Bu yorum yazar tarafından silindi.

      Sil
    2. meftun bey çok çok teşekkür ederim. interneti alt üst ettim ama hiç bir çare bulamamıştım. bir de birebir mail yoluyla alakadar olmanız tüm övgüleri hakettiriyor. Tekrar tekrar teşekkürler...

      Sil
  16. merhaba hocam öncelikle çalışmanız süper elinize sağlık bi sorunum olcaktı bu galeriyi sayfamda birden fazla kullandım fakat birinin üstüne gelince hepsi aynı anada değişio nasıl önleye bilrim .ss

    YanıtlaSil
    Yanıtlar
    1. Kodlar içindeki en alttaki jquery.min.js ve onun altındaki script kodlarını iki defa eklediyseniz, böyle bi hata alabilirsiniz. Gadget/Widget ekle yaparak eklediğiniz eklentilerden bu script bölümünü silin. Blogger kontrol panelinizden Şablon sekmesine tıklayın. HTML'yi Düzenle'ye basarak şablon düzenlemeye gelin. CTRL+F tuş kombinasyonuyla </head> kodunu bulun ve hemen üzerine bu script kodlarını ekleyin. Böylece probleminiz kalmaz. Kolay gelsin.

      Sil
  17. hocam yalnız benblogger kullanmıyorum dreamweaver da oluşturuyorum bu sorunu dreamweaverda nasıl çözerim.şimdiden yardımınız için çok teşekkürler

    YanıtlaSil
  18. mehtun abi sü siteye saat kodladları eklermisin kolaygelsin

    YanıtlaSil
  19. Abi öncelikle çok güzel olmuş ellerine sağlık. Abi ben bunu siteme ekledim ama sitede sadece " });
    bunlar gözüküyor ne yapmam gerek. Yardım edersen sevinirim. Teşekkürler.

    YanıtlaSil
  20. eline sağlık hocam
    birşey sorucam aynı js yi sayfa içinde birkereden fazla kullanabilir miyim? js harici olarak çekiliyor ama gareli birini çalıştırıyor?? lütfen yardım

    YanıtlaSil
  21. Kullanımı nasıl olacak yardım eder misiniz

    YanıtlaSil
  22. Patron çok sağol tek sorunum kaldı fazla resim için bölümleri çoğalttım fakat 8'den itibaren alt kısma geçti onuda çözersek süper olacak

    YanıtlaSil

Yorum Gönder

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

Önceki Makale Sonraki Makale