Full Efektli Resim Slider (Resim Slayt) 1

Güzel bir resim slayt alanı
*Blogunuzda göstermek istediğiniz yere Blogger Kullanıcı paneli > Yerleşim > Gadget ekle > HTML/JavaScript ekle yolunu izleyerek ekleyebilirsiniz.
* Paylaşımlarınızı yazdığınız panelde HTML kısmından ekleyerek tek bir sayfa içinde de kullanabilirsiniz.
Standart HTML/CCS yapısı kullanılmıştır, isterseniz değiştirip temanıza uygun görsellikte kullanabilirsiniz.
Resimler fixlenmemiştir, yani resim ölçülerini (px) ekleyeceğiniz alana göre önceden boyutlandırmanız gerekmektedir.
Bloggerde Resim slider, slayt alanı yada manşet alanında kullanabilirsiniz.


<style type="text/css">
.skitter_slideshow {background:#111;padding:10px 10px 30px 10px;float:left;margin:auto; }
.skitter_slideshow img {width:850px; height:300px;}
.label_skitter {text-transform:uppercase;z-index:150;position:absolute;bottom:0px;left:0px;background:url(https://lh3.googleusercontent.com/-MJuftz1Rdvw/UnLivZ63zVI/AAAAAAAAGc8/IRV9mzrS1PQ/h120/back-box-label-black.png) repeat-x left top;color:#fff;display:none;border-top:1px solid #000;}
.label_skitter p {padding:10px;margin:0;font:normal 22px arial,tahoma;letter-spacing:-1px;}
.info_slide * {font-family:Consolas,arial,tahoma !important;}
.slideshow_skitter {position:relative;width:850px;height:300px;}
.slideshow_skitter ul {display:none;}
.slideshow_skitter .container_skitter {overflow:hidden;position:relative;}
.slideshow_skitter .image {overflow:hidden;}
.slideshow_skitter .image img {display:none;}
.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:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://lh5.googleusercontent.com/-GSJOuwDDN5k/UnLiwKwOVuI/AAAAAAAAGdU/gw6EB6vYk7E/h120/prev.png) no-repeat left top;}
.slideshow_skitter .next_button {position:absolute;top:50%;right:0px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://lh3.googleusercontent.com/-Gg7kosPkMuE/UnLivUbDYSI/AAAAAAAAGdA/x2Y34E-gTH4/h120/next.png) no-repeat left top;}
.slideshow_skitter .info_slide {position:absolute;bottom:-27px;left:40px;z-index:100;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;}
.slideshow_skitter .info_slide .image_number {background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;}
.slideshow_skitter .info_slide .image_number_select {background:#cc0000;float:left;padding:2px 10px;margin:0 5px 0 0;}
.slideshow_skitter .container_thumbs {position:relative;overflow:hidden;height:50px;}
.slideshow_skitter .info_slide_thumb {-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0;}
.slideshow_skitter .info_slide_thumb .image_number {overflow:hidden;width:70px;height:40px;position:relative;}
.slideshow_skitter .info_slide_thumb .image_number img {position:absolute;top:-50px;left:-50px}
.slideshow_skitter .slideshow_scroll_thumbs {padding:0 10px;}
.slideshow_skitter .slideshow_scroll_thumbs .scroll_thumbs {position:absolute;bottom:60px;left:50px;background:#ccc;background:-moz-linear-gradient(-90deg, #555, #fff);background:-webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;cursor:pointer;border:1px solid #333;}
.slideshow_skitter .info_slide_dots {position:absolute;bottom:-40px;z-index:100;padding:5px 0 5px 5px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}
.slideshow_skitter .info_slide_dots .image_number {background:#333;float:left;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;}
.slideshow_skitter .info_slide_dots .image_number_select {background:#cc0000;float:left;margin:0 5px 0 0;}
.slideshow_skitter .label_skitter {z-index:150;position:absolute;bottom:0px;left:0px;display:none;}
.loading {position:absolute; top:50%; right:50%; z-index:10000; margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:url(https://lh3.googleusercontent.com/-FADj8mKOTRc/UnLivRf3N7I/AAAAAAAAGdE/KTHuOzxjxF4/h120/ajax-loader.gif) no-repeat left top;width:32px;height:32px;}
.slideshow_skitter_large {width:850px;height:300px;}
.slideshow_skitter_small {width:200px;height:200px;}
</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.skitter.min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.animate-colors-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {};
if (document.location.search) {
var array = document.location.search.split('=');
var param = array[0].replace('?', '');
var value = array[1];
if (param == 'animation') {
options.animation = value;
}
else if (param == 'type_navigation') {
options[value] = true;
if (value == 'dots') $('.skitter_slideshow').css({'margin': 'auto'});
}
}
$('.slideshow_skitter_large').skitter(options);
});
</script>
<div class="skitter_slideshow">
<div class="slideshow_skitter slideshow_skitter_large">
<ul>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="http://3.bp.blogspot.com/-3XHTX3F44bs/UkcXyyjS3AI/AAAAAAAAKzk/pB_iV2LaBGU/s205/etiket2.png" class="cube" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh4.googleusercontent.com/xvWHYzsBk3-F5pCmaeUAQ2H5DvPfelTtgLR40CV6IZE=w600-h300-no" class="cubeRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cuberandom</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh4.googleusercontent.com/JpRl4FY6_U9VSw-hrUgJpuqfEbk3ec9OdydP9lIqjQ8=w790-h286-no" class="block" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek block</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh5.googleusercontent.com/HvRyGEKGrthxZZkjXtn_h70MMUkyqGDtb2naqTD0CHM=w463-h240-no" class="cubeStop" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubestop</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh4.googleusercontent.com/m3_nU-R0xpg7q6ufiLvXH4XDcVomM7oDt26pU0sMpNk=w463-h240-no" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubehide</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh4.googleusercontent.com/wzINf4ib8YuGQiTR9MoSzJ3P0hLJpP-HiPMDvK2erlU=w463-h240-no" class="cubeSize" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube size</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh4.googleusercontent.com/B4trD9j6Jm4ghBUiqP60H4YCK70GO_QYkIrC0_MtM9s=w500-h300-no" class="horizontal" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek horisontal</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh4.googleusercontent.com/qyCKKRO30Qv2KPTReYj_nxRJ2GV83dLPkMl3LeEg73E=w852-h284-no" class="showBars" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek showbars</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh5.googleusercontent.com/rMXgwAWIi7VxKtIqmhcp9wScqWoO6pmK8vJ17TdwK2I=w500-h300-no" class="showBarsRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek showbarsrandom</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh3.googleusercontent.com/-iDlDYCdDxrM/Uk-2LYJUbFI/AAAAAAAAGQ0/ZHs6KOf26cQ/w758-h438-no/widget-contact-form-blogger.jpg" class="tube" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek tube</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh5.googleusercontent.com/K4pr0yexa0FRmQ_SscnDnNIkf2VNJFiciT76TR07kLY=w500-h300-no" class="fade" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek fade</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh5.googleusercontent.com/-_3H6TJqb8k4/Ug9D0slTxLI/AAAAAAAAGBg/dla8_9-yS60/w600-h300-no/form-email-subscribe-blogger.png" class="fadeFour" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek fadefour</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh6.googleusercontent.com/-7W_nE7zWzyA/Ugvnl8iFvRI/AAAAAAAAF-k/c1iniLautA4/w985-h533-no/widget-contact-form-official-blogger.jpg" class="paralell" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek paralell</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh5.googleusercontent.com/-YO-TdHRKNCY/Uf4-80SE_HI/AAAAAAAAF6A/Ps7n43a3wbA/w540-h180-no/Pop-Up-Widget-Google%252B-Follower-for-blogger.png" class="blind" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek blind</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh3.googleusercontent.com/-avtVojyExK8/Uf4-8r8LJ2I/AAAAAAAAF50/mb2cHRcaad0/w353-h243-no/Pop-Up-Widget-Google%252B-Follower-2.png" class="blindHeight" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek blindheight</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh4.googleusercontent.com/-RhWW1DEIMDw/Ue5siuKod2I/AAAAAAAAF4o/IsikPI5GKmE/w540-h180-no/modifikasi-email-subscribe.jpg" class="blindWidth" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek blindwidth</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh5.googleusercontent.com/-md9JcKvgcJ8/Uesw69LFWrI/AAAAAAAAF4E/akLmk6fcmF0/w540-h179-no/modifikasi-facebook-like-box.jpg" class="directionTop" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionTop</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh5.googleusercontent.com/-9hi42r4LUbo/UelbHUfvj5I/AAAAAAAAF1Q/bLuTzheCFVA/w540-h179-no/modifikasi-widget-google%252B.jpg" class="directionBottom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionBottom</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh3.googleusercontent.com/GwytzkrkREkLf6o33gC5l5GsoEWoSzl-zQBUt0U6vn4=w500-h300-no" class="directionRight" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionRight</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh4.googleusercontent.com/-PeEQ1rYc_BY/UcigJ_J2GfI/AAAAAAAAEtk/t3MDd2HdlUM/w400-h274-no/flod-image-hover.jpg" class="directionLeft" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionLeft</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh6.googleusercontent.com/-LjHqDkwZTwk/Ucc3qekw0lI/AAAAAAAAEtA/PUuvM6B_yOo/w725-h459-no/widget-sidebar-ribbon.jpg" class="cubeStopRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubeStopRandom</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://lh4.googleusercontent.com/-eOBkS6HAnyE/UcYSkFfPj5I/AAAAAAAAEsw/6ffPQOtC4uw/w587-h344-no/sidebar-ribbon.2.jpg" class="cubeSpread" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubeSpread</p></div></li>              
</ul>
</div>
</div>

<li><a href="http://webseyyahi.blogspot.com.tr/"> : Tıklandığında gitmesini istediğiniz URL
class="cube" alt="Faceblog Evolutions" title="Faceblog Evolutions"/> : Üstünde yazan bilgiler
<img src="http://3.bp.blogspot.com/-3XHTX3F44bs/UkcXyyjS3AI/AAAAAAAAKzk/pB_iV2LaBGU/s205/etiket2.png" Resim URL si


CANLI DEMO SAYFASI

Meraklısına .js kodu :



19 yorum:

  1. öncelikle çok sağol ellerine sağlık güzel bir çalışma olmuş ama ben bi türlü manşeti küçültemedim :( çok büyük

    YanıtlaSil
  2. resimler küçülebiliyor ama çerçeve küçülmüyor

    YanıtlaSil
    Yanıtlar
    1. Ben yapamadım nasıl çerçeve boyutunu ayarlayabilirim diye soruyorsanız
      .slideshow_skitter_large {width:850px;height:300px;}
      .slideshow_skitter_small {width:200px;height:200px;}

      Tabi diğer px değerleride değişeceği için normlara göre ayarlamak gerekir.

      Bundan sonrası için
      http://webseyyahi.blogspot.com.tr/2013/03/codeorg.html

      http://webseyyahi.blogspot.com.tr/2012/01/internetden-dogru-duzgun-soru-sormann.html

      Bakmanızı öneririm.

      Sil
  3. yaptım tamam oldu çok sağolun. bide son bişey daha :) resmi gösteren sayının üstüne gelindğinde tıklamadan nasıl otomatik açılmasını sağlayablirz?

    YanıtlaSil
    Yanıtlar
    1. onmousemove atayarak
      örneğin
      http://webseyyahi.blogspot.com.tr/2013/08/html-mouse-ve-klayye-olaylar.html

      Sil
  4. Çok Teşekürler.Allah razı olsun

    YanıtlaSil
    Yanıtlar
    1. Önemli değil, son tavsite kodlama öğrenin, hiç bilmeden bir şeyler yapmaya çalışmak karanlıkta yön bulmaya benzer yada hiç bulaşmayın olduğu gibi kullanın, kolay gelsin.

      Sil
  5. Kardeş öncelikle teşekkürler,ben yaptım ama resimler arası geçiş olduğunda sliderin sol kenarında sonraki resmi gösteren dar uzun bir resim çıkıyor.onun çıkmamsı için hangi kodu silmeliyiz

    YanıtlaSil
    Yanıtlar
    1. Ekran görüntüsünü alıp imgur.com vb bir yerden linki gönderirseniz bakayım, yada site linkini gönderin. Öyle bir alan yok gibi çünkü

      Sil
  6. slayt geçişlerını nasıl ayarlıyabılırım var stop_time=8000; eğer buysa bu yok içerıgınde bulamadım ?

    YanıtlaSil
    Yanıtlar
    1. Hocam kodlar açık LØRD bu aralar meşgul olduğu için cevabı geç verecektir. Bir kendiniz yapmaya çalışın olmazsa mesajı görünce cevaplayacaktır.

      Sil
    2. Yukarıdaki kodlarla alakası olmadığından ve soruyu tam anlamadığım için cevabı bilemiyorum.

      Sil
  7. birşey daha soracamda hocam acaba Slaytların üzerine tıkladıgımızda ayrı bir pencereden açma şansımız var ?

    YanıtlaSil
    Yanıtlar
    1. Bağlantı linklerine target="_blank" eklersen yeni sekmede açılır

      <a href="http://webseyyahi.blogspot.com.tr/" target="_blank">http://webseyyahi.blogspot.com.tr/</a>

      gibi

      Sil
  8. Kardeş slider bozulmuş.takılıyor

    YanıtlaSil
    Yanıtlar
    1. CANLI DEMO SAYFASI

      cevabı orada, gördüğün gibi sorun yok

      Sil
  9. Kardeş geçiş efektlerini nasıl değiştirebiliriz

    YanıtlaSil
    Yanıtlar
    1. :JS kodlarının içindeki stilleri istediğiniz gibi ayarlayabilirsiniz

      Sil