PinBox – Pinterest benzeri ajax ile yüklenen sayfa

Pinterest sitesi hakkında fazla bilgi sahibi  biri olmadığım için pek bilgi veremeyeceğim. Pinterest nedir, ne işe yarar, neden kullanılır gibi soruları  hiç merak etmedim şu ana kadar. Alexa dünya sıralaması 29 olmasına rağmen bir türlü ısınamadığım bir ortam. En sevmediğim tarafı da site açılır  açılma koskocaman  Facebook ile üye ol, e-posta ile üye ol butonlarıdır. Giriş linki ise ufacık bir linkten ibaret.  Dünya sıralamasında 29. sıraya yerleşmiş yerleşmesine de sanki yeni açılmış web sitesi gibi  insanları üye olmaya zorlayan bir görüntüsü var.

Herhangi bir uygulamayı anlatmaya geçmeden önce benzerlikleri hakkında biraz bilgi vermek faydalı olur diye konuya bu şekilde başladım. Pinterest sitesinde paylaşımların olduğu bütün çerçevelerin genişliği aynı ama çerçevelerin yükseklikleri birbirinden farklı oluyor ve sayfayı aşağı kaydırdıkça diğer paylaşımlar da sayfa içine yükleniyorlar.

jQuery PinBox uygulaması görünüm olarak ve çalışma şekli olarak Pinterest sitesinden ilham alınarak hazırlanmış. Çerçeve genişlikleri aynı ama yükseklikler farklı olan kutulardan oluşuyor. Sayfa aşağı inildikçe daha eski gönderiler yüklenmiyor ama “Daha fazla” butonuna tıkladığınızda daha eski gönderiler ajax ile aynı sayfaya yükleniyorlar. Otomatik olmaması biraz kötü gelebilir size. Bence  bu haliyle  daha mantıklı. Siz de PinBox uygulamasını kullanarak bu tarz bir web sayfası hazırlayabilirsiniz. Web sitenizde ziyaretçileriniz sonraki sayfa linkine tıklayacağına daha fazla linkine tıklayarak aynı sayfada  ajax ile yüklenen sonraki yazıları inceleyebilirler.

Kullanım

• Head etiketleri arasına eklenmesi gereken bölümler.

Js dosya adresleri :

<script src="../source/js/jquery.js"></script>
<script src="../source/js/jquery.pinbox.js"></script>

JavaScript :

        <script>
            $(document).ready(function () {

                $('#categoryProductContainer').pinbox({subcontainer:'.actioninside'}).hide(0).fadeIn(1000);

                $('#ajaxtrigger').bind('click', function () {

                    $('#ajax').children().each(function () {
                        //add an ajax class so we can see where are the new boxes placed
                        $(this).addClass('ajax');
                    })

                    var ajaxResult = $('#ajax').html();
                    //set the result into the container:
                    $('#categoryProductContainer').append(ajaxResult);
                    //update the pinbox view
                    $('#categoryProductContainer').pinbox({subcontainer:'.actioninside'}).hide(0).fadeIn(1500);
                });

            });
        </script>

Css dosyalar :

        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="../source/css/pinbox.css" rel="stylesheet">

Css kutular :

       <style>
            .pcon {
                background-color: lightblue;
                height: 200px;
            }

            .pcon.higher {
                background-color: green;
                height: 400px;
            }

            .pcon.smaller {
                background-color: red;
                height: 80px;
            }

            .ajax {
                background-color: pink;
            }
        </style>

Body etiketleri arasına eklenmesi gereken bölüm :

        <div class="btn-group navbar-fixed-bottom" style="float:right!important">  
            <div class="btn btn-large inverse" id="ajaxtrigger">
                <h2>Daha Fazla </h2>
            </div>
        </div>

        <div style="position:relative" id="categoryProductContainer">
            <div class="span2 pcon smaller prodcont actioninside new" >

                1

            </div>

            <div class="span2 pcon prodcont actioninside new" >

                2

            </div>

            <div class="span2 pcon higher prodcont actioninside new" >

                3

            </div>
    </div>
      <div style="display:none" id="ajax" >
            <div class="span2 pcon prodcont actioninside new">

                11

            </div>

            <div class="span2 pcon prodcont actioninside new" >

                12

            </div>
            <div class="span2 pcon prodcont actioninside new" >

                13

            </div>
     </div>

Yukarda  verdiğim html  kodları çok fazla uzun olduğu için bir  örneğini verdim  sadece daha fazlasını  görüntülemek için linke  tıkladığınızda <div style=”display:none” id=”ajax” > ekinden sonraki  çerçeveler  sayfada listeleniyor. Download  adresinden html kodun tamamını  elde edeceksiniz.