JQuery Karikatür Slider - infial

4 Kasım 2012 Pazar

JQuery Karikatür Slider

JQuery Karikatür SlideShow

JQuery ile yapılmış iki farklı sliderı birleştirdim ve bir karikatür slideshow'u hazırladım. Ancak buradan aldığınız kodları kendi sitenizde kullanırken CSS kodlarında değişiklik yapmak zorunda kalabilirsiniz. Çünkü ben bilgisayarımda hazırladığım slider kodlarını bloguma aktarırken değişiklik yapmak zorunda kaldım haberiniz olsun.

Umut Sarikaya Hayatin anlami

Kosünüs Yigit Özgür

Kardanadam

Kurban Karikatürü Erdil Yasaroglu

Yigit Özgür Deli Karikatürü

Kiza Arkadaslik teklifi yigit Özgür

Bahane Erdil Yasaroglu

Umut Sarikaya Karl Marks

Firavun Karikatürü Erdil Yasaroglu

Bu sliderın kodlarını aşağıdan kopyalayabilir, kendi sitenize bir JQuery SlideShow koyabilirsiniz.

<style type="text/css">
img {border: none !important;}
.container {
 height: 500px;
 width: 450px;
}
ul.thumb {
 list-style-type: none !important;
 width: 560px;
 margin-top: 60px;
}
ul.thumb li {
 margin: 0;
 padding: 2px;
 float: left;
 position: relative;
 width: 50px;
 height: 50px;
}
ul.thumb li img {
 width: 50px;
 height: 50px;
 border: 1px solid #ddd;
 
 position: absolute;
 left: 0;
 top: 0;
 -ms-interpolation-mode: bicubic;
}
ul.thumb li img.hover {
}
#main_view {
 clear: both;
 height: 353px;
 width: 400px;
 margin-right: 80px;
 margin-left: 60px;
margin-bottom:20px;
}
#main_view img{
width: 400px;
height: 350px;
 display: none;
 position: absolute;
 }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<script type="text/javascript"> 
$(document).ready(function(){

//Larger thumbnail preview

$("ul.thumb li").hover(function() {
 $(this).css({'z-index' : '10'});
 $(this).find('img').addClass("hover").stop()
  .animate({
   marginTop: '-45px', 
   marginLeft: '-45px', 
   top: '50%', 
   left: '50%', 
   width: '75px', 
   height: '75px',
    
  }, 200);
 
 } , function() {
 $(this).css({'z-index' : '0'});
 $(this).find('img').removeClass("hover").stop()
  .animate({
   marginTop: '0', 
   marginLeft: '0',
   top: '0', 
   left: '0', 
   width: '50px', 
   height: '50px', 
   
  }, 400);
});

//Swap Image on Click
            
   $("ul.thumb li").click(function(e){
         var mainImage = $(this).attr('rel');
   showImage(parseInt(mainImage)-1);
         
        });
 /*$("ul.thumb li a").click(function() {
  
  var mainImage = $(this).attr("href"); //Find Image Name
  $("#main_view img").attr({ src: mainImage });
  return false; 
 });
 */
});

var currentImage;
    var currentIndex = -1;
    var interval;
    function showImage(index){
        if(index < $('#main_view img').length){
         var indexImage = $('#main_view img')[index]
            if(currentImage){   
             if(currentImage != indexImage ){
                    $(currentImage).css('z-index',2);
                    clearTimeout(myTimer);
                    $(currentImage).fadeOut(250, function() {
         myTimer = setTimeout("showNext()", 1500);
         $(this).css({'display':'none','z-index':1})
     });
                }
            }
            $(indexImage).css({'display':'block', 'opacity':1});
            currentImage = indexImage;
            currentIndex = index;
            
            
        }
    }
    
    function showNext(){
        var len = $('#main_view img').length;
        var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
        showImage(next);
    }
    
    var myTimer;
    
    $(document).ready(function(e) {
     myTimer = setTimeout("showNext()", 1500);
  showNext(); //loads first image
        
        });
</script>

<div class="container">
<div id="main_view">
 <a href="#"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiONBPQchRc8wny-VOTS-aWBDvugpw4lPF09dVHBfeKRk4SZHB6KyBteMCzB1xcT5C5eJ3WmRT_rZq_aQHLzWtKtZljzfZhUP4sp6Q2QoEFOp3ea-eLDMXskHZUbnUlLp3zaDszzm9RLe2S/s1600/hayatin-anlamini-bulmak-umut-sarikaya.jpg" alt="Umut Sarikaya Hayatin anlami" /></a>
 <a href="#"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Xhkf5HurxFvwXrV2t9yPrW5j2S0T1aUEzdxdAl5UzzbHac4H8Hw-vLkt3m7Qa3sz81-DsEdlutQtpGkxjvPjsYyC88FxyQgM4pNjbXYBMwXbDSElneNg7fz4J4eoDG9iFDaXtw5KUKtV/s1600/yigit-ozgur-kosinus-karikatur.jpg" alt="Kosünüs Yigit Özgür" /></a>
 <a href="#"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiOAqxjtS8PVKTYW5VVK7kTDfLPB4OEcCiJ_3SweMkBW8isasyRzWrcl_KKFmF33r4xTR89YhIXl4JjQA-5VPYoakYuepepTeKNs0SDr5csXKjz1RAY4_n_nZqMyChVvZdXbzsab2UUysr/s1600/kardanadam.JPG" alt="Kardanadam" /></a>
 <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDuEa4Z2V7gyy53WthDGoAxCXBe-PG3guTLiNoq1l1szy3vV2Tcqjk6zZ2YXGM-QWY20hxccJkrGrf9_2DF09sfoAMIVClTprauRO3VIcKzX3nUxiEdrEclWjzYZeaF0ThI3s9bWaVFmZz/s1600/Kurban-karikaturu-erdil-yasaroglu.jpg" alt="Kurban Karikatürü Erdil Yasaroglu" /></a>
 <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg48eQVwEtB4-N3UhSI6F8QVGgKM4qPlT0WZM3fdoGbKhPFNcn6BuQ-j5j2OfbB8RGKU8Z8s2eOg4FAhsCxdDVrqfLtL0ZT8W1-N4GXIrEbGfJ6eViIDv8_kC2pusVE0X1PoXEAt72qmoB8/s640/yigit-ozgur-deli-karikaturu-kulot-yok.jpg" alt="Yigit Özgür Deli Karikatürü" /></a>
 <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZAJfm-b0lS9pi0bxu6GejykdH_0GpzY5hnq0vtcLY69_MgijfmJIOxrBmP9gBJAUWLF2u86X68lqYhwv76BOhHk9eWhudkWhq-Ezl09AyYZyVqmSt_RBvXmqHYW7YHJoGQ9q11_H32E3f/s1600/yigit-ozgur.jpg" alt="Kiza Arkadaslik teklifi yigit Özgür" /></a>
 <a href="#"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWUa7WLea-4iFXVnf_iL33AAZcEYI49OcRKj30w5OeagZz3fHWgKLlnX8WGHXl_jqQ0LjUAbIok_T1_B9f7CZ89NezBfQ-cKZuZ5ys5ZvMXWeoQBXpgafYPLC9utUUK9AJHB6y6HwsknyA/s1600/erdil-yasaroglu.jpg" alt="Bahane Erdil Yasaroglu" /></a>
 <a href="#"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7w8jnsmJ-fuQHFxH7HgDfzQRc4KfMBlqfQ33sHYPt9O0FdK9CY9XvLYs9Wiv1wBpLkq_TuNB8rjsCI-YkgxSDsNiNfDrqCTEbdtdhkUFsOoDZG2TSxednUkYhjOHv60sZoWgBJFm_UlP4/s1600/umut-sarikaya-karl-marks.jpg" alt="Umut Sarikaya Karl Marks" /></a>
 <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg02X-zJMRcrnNiW_9o4PWHZqOR_IUYUMhV_3n-PfNNcuA2cIRPGZ1S2rCLEOG8XyNmeug8_RST_LOuEKQEOmgQG4e0LZ-zcXiUzFwTs3homU-XuzbOaamb7NDtzZvnWNIVcy0xMd-UiGTd/s1600/selcuk-erdem-firavun.gif" alt="Firavun Karikatürü Erdil Yasaroglu" /></a> </div><ul class="thumb">
<li rel='1'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiONBPQchRc8wny-VOTS-aWBDvugpw4lPF09dVHBfeKRk4SZHB6KyBteMCzB1xcT5C5eJ3WmRT_rZq_aQHLzWtKtZljzfZhUP4sp6Q2QoEFOp3ea-eLDMXskHZUbnUlLp3zaDszzm9RLe2S/s1600/hayatin-anlamini-bulmak-umut-sarikaya.jpg" alt="" /></li>
<li rel='2'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Xhkf5HurxFvwXrV2t9yPrW5j2S0T1aUEzdxdAl5UzzbHac4H8Hw-vLkt3m7Qa3sz81-DsEdlutQtpGkxjvPjsYyC88FxyQgM4pNjbXYBMwXbDSElneNg7fz4J4eoDG9iFDaXtw5KUKtV/s1600/yigit-ozgur-kosinus-karikatur.jpg" alt="" /></li>
<li rel='3'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiOAqxjtS8PVKTYW5VVK7kTDfLPB4OEcCiJ_3SweMkBW8isasyRzWrcl_KKFmF33r4xTR89YhIXl4JjQA-5VPYoakYuepepTeKNs0SDr5csXKjz1RAY4_n_nZqMyChVvZdXbzsab2UUysr/s1600/kardanadam.JPG" alt="" /></li>
<li rel='4'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDuEa4Z2V7gyy53WthDGoAxCXBe-PG3guTLiNoq1l1szy3vV2Tcqjk6zZ2YXGM-QWY20hxccJkrGrf9_2DF09sfoAMIVClTprauRO3VIcKzX3nUxiEdrEclWjzYZeaF0ThI3s9bWaVFmZz/s1600/Kurban-karikaturu-erdil-yasaroglu.jpg" alt="" /></li>
<li rel='5'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg48eQVwEtB4-N3UhSI6F8QVGgKM4qPlT0WZM3fdoGbKhPFNcn6BuQ-j5j2OfbB8RGKU8Z8s2eOg4FAhsCxdDVrqfLtL0ZT8W1-N4GXIrEbGfJ6eViIDv8_kC2pusVE0X1PoXEAt72qmoB8/s640/yigit-ozgur-deli-karikaturu-kulot-yok.jpg" alt="" /></li>
<li rel='6'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZAJfm-b0lS9pi0bxu6GejykdH_0GpzY5hnq0vtcLY69_MgijfmJIOxrBmP9gBJAUWLF2u86X68lqYhwv76BOhHk9eWhudkWhq-Ezl09AyYZyVqmSt_RBvXmqHYW7YHJoGQ9q11_H32E3f/s1600/yigit-ozgur.jpg" alt="" /></li>
<li rel='7'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWUa7WLea-4iFXVnf_iL33AAZcEYI49OcRKj30w5OeagZz3fHWgKLlnX8WGHXl_jqQ0LjUAbIok_T1_B9f7CZ89NezBfQ-cKZuZ5ys5ZvMXWeoQBXpgafYPLC9utUUK9AJHB6y6HwsknyA/s1600/erdil-yasaroglu.jpg" alt="" /></li>
<li rel='8'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7w8jnsmJ-fuQHFxH7HgDfzQRc4KfMBlqfQ33sHYPt9O0FdK9CY9XvLYs9Wiv1wBpLkq_TuNB8rjsCI-YkgxSDsNiNfDrqCTEbdtdhkUFsOoDZG2TSxednUkYhjOHv60sZoWgBJFm_UlP4/s1600/umut-sarikaya-karl-marks.jpg" alt="" /></li>
<li rel='9'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg02X-zJMRcrnNiW_9o4PWHZqOR_IUYUMhV_3n-PfNNcuA2cIRPGZ1S2rCLEOG8XyNmeug8_RST_LOuEKQEOmgQG4e0LZ-zcXiUzFwTs3homU-XuzbOaamb7NDtzZvnWNIVcy0xMd-UiGTd/s1600/selcuk-erdem-firavun.gif" alt="" /></li>
</ul></div>

Turgut Arslan

Hiç yorum yok:

Kaydol: Kayıt Yorumları (Atom)