Jquery Slider'a If Conditions Ekleme Meselesi

03-11-2012, 10:02:27

Arkadaşlar Merhabalar;

Uzman arkadaşlar vardır bir sorum olacak da. Jquery ile çalışan bir sliderımız var. Slider farklı sayfalarda o sayfaya göre bilgileri otomatikmen çekerek gösterim sağlıyor. Belli bir standardı var. 1., 2. slaytta ne gösterileceği belli yani.
Ancak bazı sayfalarda örneğin 3. sliderda gözükecek yazı olmadığını farzadelim. 5 saniye bir boşluk kalıyor orada. Bu da kötü bir görüntü tabiki. Burada bir if koşulu ekleyerek o slayt boş olduğunda diğer slayta otomatikmen geçecek ya da o slaytı komple silebilecek bir sistem nasıl eklerim.

Aynı şekilde örneklere baktığımda çoğunlukla slaytlar standart süreli, yani örneğin süresini 5 saniye ayarladığımızda bütün slaytlar 5 saniye kalıyor otomatik oynatma modunda. Ama ben örneğin 4. slaytı 7 saniye göstermek istiyorum. Bu mümkün müdür? Mümkünse nasıl?

Elinizde örnek tasarımlar varsa lütfen paylaşabilir misiniz?

05-11-2012, 19:30:14

#2

phpQuery

Kimlik doğrulama veya yönetimden onay bekliyor.

özelden cevap yazdım, ancak ne teşekkür ne de tepki...
Son Aktiviteniz: Bugün 17:22:59

İlk değilsin bir sürü kişi böyle burada anlamış değilim. Yardım ediyorum sonra vınnn, arkadaş bi konuşun ya faydalı oldu mu bilelim biz de...

05-11-2012, 20:26:44

#3

ayhankerim

hocam merhabalar. dedigin gibi hemen cevap veremedim kusura bakma. mesajini okudum ancak cevabinin calisip calismadigi ile alakali calisma yapamadim. Isteydim ve biraz yogundu vakit olmadi.
Yarin bakacagim insallah. Boyle bir intiba birakmak istemezdin, yanlis anlama.

05-11-2012, 20:29:53

#4

EftalBulut

Onursal Üye

Banada yardımcı olurmusunuz

05-11-2012, 22:18:32

#5

phpQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>
*{margin:0px;padding:0px;}
body{padding:10px;}

#featured-slider{width:500px;height:200px;overflow:hidden;position:relative;}
#slider{width:2500px;height:200px;position:absolute;top:0px;left:0px;}
#slider div{width:500px;height:200px;float:left;position:relative;}
h2{background:url(images/titlebg.png);width:406px;height:27px;padding-top:3px;text-align:center;position:absolute;left:10px;top:10px;font:18px 'Trebuchet MS';color:#fff;}

#sayfalama{position:absolute;left:10px;bottom:10px;}
#sayfalama a{background:url(images/link.png);width:16px;height:16px;margin-right:2px;display:block;float:left;text-decoration:none;}
#sayfalama a span{display:none;}
</style>

<div id="featured-slider">
<div id="slider">
<div class="bir">
<img src="images/bir.jpg" />
    <h2>Birinci sayfa için başlık</h2>
</div>
<div class="iki">
<img src="images/iki.jpg" />
    <h2>İkinci sayfa için başlık</h2>
</div>
<div class="uc">
<img src="images/uc.jpg" />
    <h2>Üçüncü sayfa için başlık</h2>
</div>
<div class="dort">
<img src="images/dort.jpg" />
    <h2>Dördüncü sayfa için başlık</h2>
</div>
<div class="bes">
<img src="images/bes.jpg" />
    <h2>Beşinci sayfa için başlık</h2>
</div>
</div>
<div id="sayfalama">
<a href="#"><span>bir</span></a>
<a href="#"><span>iki</span></a>
<a href="#"><span>uc</span></a>
<a href="#"><span>dort</span></a>
<a href="#"><span>bes</span></a>
</div>
</div>


<script>

$(document).ready( function() {        
  var slaytSayisi = $("#slider div").length;
  var tekSlaytGenisligi  = $("#slider div").width();
  var sliderGenisligi = slaytSayisi * tekSlaytGenisligi;
  $("#slider").css({width:sliderGenisligi});
 
  var i = 0;     
  var tumgenislik = 0; 
  var genislik = $('#slider div').width();    
  
  function animasyon(px){     
      $('#slider').stop(false, false).animate({left:-px},300); 
  }

  $('#sayfalama a').click(function(){ 
    var index = $(this).index(); 
     
    var slaytSayisi = $("#slider div").length;
     
    if(index+1>slaytSayisi){
        animasyon(0);
    } else { 
        pozisyon = index * genislik;     
        animasyon(pozisyon);
        if(index == slaytSayisi-1){    //  
        i = 0;     
        }else{        
        i = index + 1; 
        } 
    }

  return false; 

  });
  
  var zamanlayici = setInterval(function() {      
    tumgenislik = i * genislik;         
    if(i==slaytSayisi-1){     
      i = -1;     
    }
    animasyon(tumgenislik);         
    i++;     
  }, 3000);         

});

</script>

size tavsiyem slayt div lerinizi mysql den çekeceksiniz sanırım while ile döndürün kaç adet veri bastırırsanız sayfaya slider o kadarını gösterecektir.

yalnız php ile çektiğiniz veri sayısını da tutun buna göre de bir iki üç gibi buton bastırırsınız sayfalama a kısmına...

not: ayrıca arkadaş slider kodunu başka bi siteden almış ancak onu yapan arkadaş sadece 5 resim için hazırlamış üzerinde değişiklik yaptım eklediğiniz içerik kadar göstermesi için...