Jquery ile basit Load More Content yapımı

load-more-content-yapimi

Çoğu sitede görmüşsünüzdür, çok fazla aşağıya inen içeriklerde Load More yada Türkçe adıyla Devamını Yükle gibi sayfanın en alt kısmında buton olur, buna bastığınız zaman ise sayfa hiç değişmeden yeni içerikler gelir. Normalde bu yöntem Ajax gibi yapılarla oluşturuluyor. Yani asıl mantık tüm içerikleri aynı anda sayfanıza çekmek yerine butona basıldığı zaman verileri getirmek üzerine kurulu.

Fakat daha basit yapılarda Ajax uğraştırıcı olabiliyor. Bunun için Jquery ile aslında gizlenmiş olan içerikleri belirli sayıya göre Devamını Yükle tekniği ile sayfanızda gösterebilirsiniz.

HTML

<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>

<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>

<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>


<a href="#" id="loadMore">Load More</a>

<p class="totop"> 
    <a href="#top">Back to top</a> 
</p>

 CSS

body {
    background-color: #f6f6f6;
    width: 400px;
    margin: 20px auto;
    font: normal 13px/100% sans-serif;
    color: #444;
}
div {
    display:none;
    padding: 10px;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    margin-bottom: 5px;
    background-color: #f1f1f1;
}
.totop {
    position: fixed;
    bottom: 10px;
    right: 20px;
}
.totop a {
    display: none;
}
a, a:visited {
    color: #33739E;
    text-decoration: none;
    display: block;
    margin: 10px 0;
}
a:hover {
    text-decoration: none;
}
#loadMore {
    padding: 10px;
    text-align: center;
    background-color: #33739E;
    color: #fff;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    transition: all 600ms ease-in-out;
    -webkit-transition: all 600ms ease-in-out;
    -moz-transition: all 600ms ease-in-out;
    -o-transition: all 600ms ease-in-out;
}
#loadMore:hover {
    background-color: #fff;
    color: #33739E;
}

JS

/*
  Load more content with jQuery - May 21, 2013
  (c) 2013 @ElmahdiMahmoud
*/   

$(function () {
    $("div").slice(0, 4).show();
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $("div:hidden").slice(0, 4).slideDown();
        if ($("div:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});

$('a[href=#top]').click(function () {
    $('body,html').animate({
        scrollTop: 0
    }, 600);
    return false;
});

$(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
        $('.totop a').fadeIn();
    } else {
        $('.totop a').fadeOut();
    }
});

Bütün bu kodların çalışması için sayfanıza Jquery kütüphanesini eklemeyi unutmayın.

See the Pen Load more content with jQuery by Mahmoud Elmahdi (@elmahdim) on CodePen.

Hakan Demirel

pcanalist.com kurucularından Hakan Demirel, özel bir şirkette Front-end Developer olarak çalışmakta. Twitter üzerinden @hakandemirel hesabını takip edebilir yada hakandemirel.com adresinden daha fazla bilgi alabilirsiniz.

4 Cevaplar

  1. ilhan dedi ki:

    bende bunu arıyordum portfolio da kullanıcam ürünleri koyunca fazla üründen dolayı sayfa uzuyordu bunu yapabilirsem word press temamı bitirmiş olucağım.
    Çok teşekkürler

  2. ilhan dedi ki:

    bir sorum olacak benim div şeklinde javadaki $(“div”).slice(0, 4).show(); kısımları nasıl düzenleyeceğim ?

  3. ilhan dedi ki:

    <img class="img-responsive" src="/images/portfolio/kucuk/1.jpg” alt=””>

    <a href="/images/portfolio/buyuk/1big.jpg” rel=”prettyPhoto”>Ürünü İncele
    <a class="preview" href="/images/portfolio/buyuk/1big.jpg” rel=”prettyPhoto”>

    benim divim bu şekilde bir türlü olmuyor nasıl yapabilirim hocam.

    • Hakan Demirel dedi ki:

      burada div yok ki hocam.

      örnekteki kodları bire bir alıp bir html dosyasına kaydederek üzerinde düzenleme yaparsanız daha net bir sonuç alırsınız.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Yandex.Metrica