Yukarı Doğru Kayan İçerik

 bcakir
 14 Aralık 2011

Merhaba arkadaşlar, daha önceki yazımda Twitter tarzı son iletiler kısmının örneğini yapmıştım. Bu yazımda ise önceki uygulamanın biraz daha değişiğini, yukarı doğru kayan yazı alanı yapacağım. Ayrıca, yapacağımız uygulamanın üzerinde küçük değişiklikler yaparak slider bile yapmanız mümkün. Çünkü uygulamayı, hazır olarak bizlere sunulan jCarousel kütüphanesini kullanarak geliştireceğim. Bunun yanında, yapılabilecekler hakkında fikir sahibi olmak için de verdiğim bağlantıyı kullanarak yapılmış örnekleri inceleyebilirsiniz. Uygulamamız hakkında fikir sahibi olduğunuza göre geliştirme işlemine geçiyorum. Unutmadan, uygulamanın bütün içeriğinin olduğu indirilebilir halini yazının sonunda bulabilirsiniz.

<!DOCTYPE html>
<head>
<title>Yukarı Doğru Kayan İçerik</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="jcarousellite.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    jQuery("#kayan_alan").jCarouselLite({
        vertical: true, //dikey yapmak için
        hoverPause:true, //üzerine gelince durması için
        visible: 3, //3 adet yazı gösterilmesi için
        auto:1500, //bekleme süresi
        speed:1000, //hareket hızı
        btnPrev: "#onceki", //onceki yazi
        btnNext: "#sonraki" //sonraki yazi
    });
});
</script>
<style>
img {cursor: pointer}
ul {list-style: none}
</style>
</head>
<body>
<div id="kayan_alan">
    <ul>
        <li>Yer Tutucu (PlaceHolder) Kullanımı</li>
        <li>Css ile Yuvarlak Köşeli Menü</li>
        <li>GET ve POST Metodu</li>
        <li>Session ve Cookie</li>
        <li>Farklı Düşün</li>
        <li>Başarılı Startup Kurmak</li>
        <li>Sosyal Medya Tavan Yaptı</li>
        <li>Html Optgroup Etiketi</li>
        <li>Sosyal Medya ve Geleceği</li>
    </ul>
</div>
<div id="onceki"><img src="yukari.png" /></div>
<div id="sonraki"><img src="asagi.png" /></div>
</body>
</html>

Yukarıda uygulamamızın açıklamasına da yer verdim. Uygulamaya resim eklemek, link vermek gibi küçük değişikliklerin yanında kütüphaneyi kurcalayarak farklı değişiklikler de yapmanız mümkün. Hatta vereceğim indirme bağlantısında bulunan kütüphanede, benim tarafımdan yazılmış küçük de bir ipucu bulacaksınız. Ben sadece uygulamanın temel mantığını anlatmak istedim, gerisi sizlerin hayal dünyanıza kalmış. Uygulamayı buradan indirebilirsiniz. Böylece, yazımız burada bitmiş oldu. Yararlı olması dileğiyle.

 5.616 Okunma

Bu yazıya 16 yorum yapılmış.

  1. Aradığım bir çalışmaydı.Teşekkürler…

  2. Çok teşekkürler sade ve kullanışlı tam aradığım scriptti…

  3. tam aradığım haber scriptti, hakkını helal et kardeşim, teşekkür ederim

    • Rica ederim, bir şey değil. İyi günlerde kullan.

  4. merhaba elinize sağlık tamda bunu arıyordum 🙂 bir şey yapmaya çalıştım fakat olmadı önce ki sonraki ok işaretlerini nasıl sol tarafa çekevibilirim?

  5. Hocam Merhaba
    javascript kodlarının bir biriyle çakışmasını nasıl engelliye biliriz, aşağıda 2 javascript kodlamasın veriyorum bana bu konuda yardımcı olabilirmisiniz
    saygılar.

    1
    —————————–

    $(document).ready(function() {
    $(“#jcarousellite”).jCarouselLite({
    vertical: true,
    hoverPause: true,
    visible: 5,
    auto: 2000,
    speed: 400,
    btnNext: “#yorumlar .button .down”,
    btnPrev: “#yorumlar .button .up”
    });
    });

    2
    —————————–

    $(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’) {
    if (value == ‘dots_preview’) {
    $(‘.border_box’).css({‘marginBottom’: ’40px’});
    options[‘dots’] = true;
    options[‘preview’] = true;
    }
    else {
    options[value] = true;
    if (value == ‘dots’) $(‘.border_box’).css({‘marginBottom’: ’40px’});
    }
    }
    }

    $(‘.box_skitter_large’).skitter(options);

    // Highlight
    $(‘pre.code’).highlight({source:1, zebra:1, indent:’space’, list:’ol’});

    });

    • İkisini ayrı fonksiyonlar yapıp document.ready fonksiyonunda çağırman gerekiyor.

      • peki hocam bu konuda bir örnek verebilirmisiniz, bu konuda acemiyim.
        saygılar.

  6. İyi Çalışmalar birşey belirtmek istiyorum biz bu kutuphaneyi neden ul değilde ol tagları arasında kullanamıyoruz ne kadar denediysem olmadı ayrıca ul tagının içerisinde li tagına bi resim parametresi atıyorum resmin belirli bi alanından itibaren resim gözükmüyor 90px yüksekliğinde resmin yaklaşık 30px lık kımı gozukuyor ul ve lı tagının neredeyse tum css özellikleryle uğraştım ama olmadı ama ol yazınca gözüküyor yardımcı olabilir misiniz umarım herkeze yararlı olur

    • Siz istediğiniz şekilde kullanabilirsiniz, css tasarımını falan değiştirebilirsiniz (JQuery kütüphanesinde değişiklik yapmanız gerekebilir ama).

    • Bu problemden kurtulmak için var li_height = ‘100%’; yapmalısınız.

  7. Öncelikle çok teşekkur ederim ,ellerine sağlık . Bi sorum olacaktı. Ben image+icerik olarak kullandım çalışmanı.. Fakat internet explorer 7 de sınırlama işlemiyor. Yani slayt sayısını 3 yapıyorum ama veritabanından çektiğim bütün veriler gösteriliyor. Acaba sorun plugin demidir yoksa benim css demi..

  8. Merhaba İlk Önce Böyle Bir Makaleyi Bizlerle Paylaştığınız İçin Teşekkür Ederim.

    Küçük Bir Sorunum Var Onu Belirtmek İsterim.

    Şimdi Kodlar İstediğimden de Çok Güzel Çalışıyor Buraya Kadar Sıkıntı Yok Ama Sürükle Bırak Yöntemini Kullanmak Zorundayım ve overflow:hidden sıkıntı çıkartıyor bunu nası aşabilirim.

    Çok Acil Yardımlarınızı Bekliyorum….

  9. Çok teşekkürler tam da istediğim gibi 🙂

  10. Bu yazıyı her 5 sn sürede bir otomatik şekilde nasıl kaydırırız?

  11. Emeğinize sağlık, güzel bir uygulama.

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JQuery
Kapat