Yeni eklenen resimli içerikler için hareketli resimler

AycanB · 6 Eylül 2010

Merhaba öncelikle bu yaptığım js kutuphanesi hakkında bir isim bulamadım o yüzden hareketli resimler diye bir isim uydurdum. Eğer bu özelliğin adı varsa afiş gösterici vs yorumda belirtirse sevinirim : )

Geçenlerde arkadaşım umutun bir projesinde arayüz geliştiricisi olarak yer aldım. Proje sinema ile ilgili bir siteydi ve bir kaç js özelliği vardı sinemaz.com buyrun burdan bakabilirsiniz. Bende hazır eklentileri kullanacağıma kendi kütüphanemi geliştireyim dedim ve ikinci uygulamamı yazdım. Uygulama biraz basit oldu ama işlevselliği var o yüzden sağdan sola kayan resimler beni sıkıyor ben değiştireyim diyorsanız bu hareketli resimler uygulaması tam size göre.

Uygulamaya giriş :

Uygulamada kullanılan diller : Css & jQuery

İlk işimiz olarak html ve css dosyamızı hazırlıyoruz kodlar;

Html kodlarımız;

Kod:

<!-- ================================================ -->
<!-- ! hareketli resimler baslangic                   -->
<!-- ================================================ -->
    <div class="filmAfis ortala">
        <div class="afisleriKaydiranOk sol">
            <a onclick="kaydirmaKontrol(1);"><img src="kutuphane/resim/solOk.png" alt="afis"/></a>
        </div>
        <ul class="filmler">
            <li><a href="#"><img src="kutuphane/resim/afis1.png" alt="afis"/></a><img src="kutuphane/resim/yeniFilm.gif" class="yeniFilm"  alt="yeni"/></li>
            <li><a href="#"><img src="kutuphane/resim/afis1.png" alt="afis"/></a><img src="kutuphane/resim/yeniFilm.gif" class="yeniFilm"  alt="yeni"/></li>
            <li><a href="#"><img src="kutuphane/resim/afis1.png" alt="afis"/></a><img src="kutuphane/resim/yeniFilm.gif" class="yeniFilm"  alt="yeni"/></li>
            <li><a href="#"><img src="kutuphane/resim/afis1.png" alt="afis"/></a><img src="kutuphane/resim/yeniFilm.gif" class="yeniFilm"  alt="yeni"/></li>
            <li><a href="#"><img src="kutuphane/resim/afis1.png" alt="afis"/></a><img src="kutuphane/resim/yeniFilm.gif" class="yeniFilm"  alt="yeni"/></li>
            <li><a href="#"><img src="kutuphane/resim/afis1.png" alt="afis"/></a><img src="kutuphane/resim/yeniFilm.gif" class="yeniFilm"  alt="yeni"/></li>
            <li><a href="#"><img src="kutuphane/resim/afis.png" alt="afis"/></a></li>
            <li><a href="#"><img src="kutuphane/resim/afis.png" alt="afis"/></a></li>
            <li><a href="#"><img src="kutuphane/resim/afis.png" alt="afis"/></a></li>
            <li><a href="#"><img src="kutuphane/resim/afis.png" alt="afis"/></a></li>
            <li><a href="#"><img src="kutuphane/resim/afis.png" alt="afis"/></a></li>
            <li><a href="#"><img src="kutuphane/resim/afis.png" alt="afis"/></a></li>
            <li><a href="#"><img src="kutuphane/resim/afis3.png" alt="afis"/></a></li>
            <li><a href="#"><img src="kutuphane/resim/afis3.png" alt="afis"/></a></li>
            <li><a href="#"><img src="kutuphane/resim/afis3.png" alt="afis"/></a></li>
            <li><a href="#"><img src="kutuphane/resim/afis3.png" alt="afis"/></a></li>
            <li><a href="#"><img src="kutuphane/resim/afis3.png" alt="afis"/></a></li>
            <li><a href="#"><img src="kutuphane/resim/afis3.png" alt="afis"/></a></li>
            <li><a href="#"><img src="http://img01.imgsinemalar.com/images/afis_anasayfa/o/Olumsuz-1282314027.jpg" alt="afis"/></a></li>
            <li><a href="#"><img src="http://img01.imgsinemalar.com/images/afis_anasayfa/o/Olumsuz-1282314027.jpg" alt="afis"/></a></li>
            <li><a href="#"><img src="http://img01.imgsinemalar.com/images/afis_anasayfa/o/Olumsuz-1282314027.jpg" alt="afis"/></a></li>
            <li><a href="#"><img src="http://img01.imgsinemalar.com/images/afis_anasayfa/o/Olumsuz-1282314027.jpg" alt="afis"/></a></li>
            <li><a href="#"><img src="http://img01.imgsinemalar.com/images/afis_anasayfa/o/Olumsuz-1282314027.jpg" alt="afis"/></a></li>
            <li><a href="#"><img src="http://img01.imgsinemalar.com/images/afis_anasayfa/o/Olumsuz-1282314027.jpg" alt="afis"/></a></li>
        </ul>
        <div class="afisleriKaydiranOk sag">
            <a  onclick="kaydirmaKontrol(2);"><img src="kutuphane/resim/sagOkAktif.png" alt="afis"/></a>
        </div>
    </div>
<!-- ================================================ -->
<!-- ! hareketli resimler bitis                       -->
<!-- ================================================ -->

Css kodlarımız ;

Kod:

/* ================================================ */
/* ! hareketli resimler  ozellikleri baslangic      */
/* ================================================ */
.sol{float:left;}  .sag{float:right;}
.filmAfis{width: 916px; height: 177px; margin: 150px auto;}
    .afisleriKaydiranOk{width:39px; height:62px; margin-top: 58px; cursor: pointer;}
        .afisleriKaydiranOk a{width:39px; height:62px; border:0;}
            .afisleriKaydiranOk a img{border:0;}
    ul.filmler{width: 838px; height: 177px; float: left;}
        ul.filmler li{margin-left: 11px; position: relative; float: left; display: none; }
        ul.filmler li img.yeniFilm{ position: absolute; top: 0; left: 0;}
            ul.filmler li a{width:121px; height:172px; display: block; text-decoration: none; border:2px solid #e2e2e2;}
            ul.filmler li a:hover{border:2px solid #F28705;}
            ul.filmler li a img{width:121px; height:172px; border: 0;}
/* ================================================ */
/* ! hareketli resimler  ozellikleri bitis          */
/* ================================================ */

Şimdi en önemli kısım ab-hareketliResimler.js dosyasına geldik kullandığım fonskiyonlar :
jQuery size , jQuery css , jQuery eq bu fonksiyonları konu içerinde ufak çaplı açıklayacağım saten js dosyasının içeriğinde baya bir açıklamada bulundum ama buradan anlatmak daha faydalı.

Genel js kodlarımız ;

Kod:

/**
 * --------------------------------------------------------------------
 * ab-hareketliResimler.js dosyasi
 * Aycan BULBUL, [email protected] http://www.aycan.net/
 * Tarih 23 Agustos 2010
 *
 * jQuery hareketli resimler
 */

/**
 * sayfa yuklendiginde ilk altili li taglarini
 * aciyoruz.
 */
jQuery(document).ready(function(){
    var kacTane = 6 ;
    /**
     * toplam li taglarinin sayisini bul
     */
    var afisSayisi  =  jQuery('.filmler li').size();
    var gosterilecekAfisSayisi = kacTane ;
    /**
     * toplam li sayisi kacTane'den kucuk ise butun li taglarini goster
     */
    if(afisSayisi <= kacTane)
    {
        jQuery('.filmler li').css('display', 'block');
    }
    else
    {
        for(var i =0;i<kacTane;i++)
        {
            jQuery('.filmler li').eq(i).css('display', 'block');
        }
    }
});

/**
 * Oncick İle gelen degerin yonunu belirleme
 * ve aktif olan li elementlerini bulma
 */
function kaydirmaKontrol(yon) {

    /**
     * degiskenleri olusturuyoruz
     */
    var displayNoneBul1,
        displayNoneBul2,
        sayi,
        toplam;
    var kacTane = 6 ;
    /**
     * toplam kac tane li tagi oldugunu belirliyoruz
     */
    var afisSayisi  =  jQuery('.filmler li').size();
    /**
     * afislerin solami sagami kaydirilacagi degeri aliyoruz
     * Sol : 1
     * Sag : 2
     */
    if( yon == "1")
    {
        for(var q = 0 ; q < afisSayisi ;q++)
        {
            displayNoneBul2 = jQuery('.filmler li').eq(q).css('display');
            /**
            * li taglari icersinde style="display: block;" olan li taginin sira numarasını aliyoruz
            */
            if (displayNoneBul2 == "block")
            {
                if( q < 1)
                {
                    /**
                    * Eger li tagi 0 ise yani en basta ise donguyu kiriyoruz.
                    */
                    break;
                }
                else if(1 < q)
                {
                    /**
                    * Sola kaydirilacak afis varsa kacinci li elementi oldugunu afisleriSolaKaydir(sayi) fonksiyonuna gonderiyoruz.
                    */
                    sayi = q;
                    afisleriSolaKaydir(sayi,kacTane);
                    break;
                }
            }
        }
    }
    /**
     * afislerin solami sagami kaydirilacagi degeri aliyoruz
     * Sol : 1
     * Sag : 2
     */
    else if(yon == "2")
    {
        for(var i = 0 ; i < afisSayisi ;i++)
        {
            displayNoneBul1 = jQuery('.filmler li').eq(i).css('display');
            if (displayNoneBul1 == "block")
            {
                toplam = i + kacTane;
                if( afisSayisi <= toplam)
                {
                    break;
                }
                else
                {
                    sayi = i;
                    afisleriSagaKaydir(sayi,kacTane);
                    break;
                }
            }
        }
    }
}

/**
 * Afisleri saga kaydirma fonksiyonu
 */
    function afisleriSagaKaydir(sayi,kacTane)
    {
        /**
        * for dongumuzu kontrollu yapmak icin degerleri artiriyoruz yani
        * sayi = 6 ise
        * j = 0;
        * sayi = 24 ;
        * k = 18;
        * Onemli olan for dongusununn kacTane adli tanimladigimiz degisken kadar donmesi
        */
        sayi   =  sayi + kacTane ;
        var k  =  sayi ;

        /**
         * Gelen sayisal degerlerimiz ile bir for dongusu olusturuyoruz
         * ve gelen degerlerle ilk alti tane li tagimizin style ozelligine
         * display:none; kodunu gonderiyoruz.
         */
        for(var j =0;j<sayi;j++)
        {
            jQuery('.filmler li').eq(j).css('display','none');
        }

        /**
         * Li taglarini kapattiktan sonra tekradan sayi degerisi
         * ve k degerini ayarlayip sonraki alti tane olan li taglarimizin
         * style ozelligine display:block; kodunu gonderiyoruz.
         */
        sayi=sayi + kacTane;

        for(k ;k<sayi;k++)
        {
            jQuery('.filmler li').eq(k).fadeIn('fast').css('display','block');
        }
    }
/**
 * Afisleri sola kaydirma fonksiyonu
 */
    function afisleriSolaKaydir(sayi,kacTane)
    {
        var j  =  sayi ;
        sayi   =  sayi + kacTane ;

        for(j;j<sayi;j++)
        {
            jQuery('.filmler li').eq(j).css('display', 'none');
        }

        sayi = sayi - kacTane;
        var k = sayi-kacTane;

        for(k ;k<sayi;k++)
        {
            jQuery('.filmler li').eq(k).css('display', 'block');
        }
    }

Bu fonksiyonda ise afişleri sola kaydırıyoruz.

Js dosyamız bu kadar arkadaşlar genel olarak tagların üstünde altında açıklamalar yaptım ama takıldığınız bir yer olursa direk sorabilirsiniz.

Genel kullanımda ise sadece şunu belirteyim;

Kaç tane resim göstermek istiyorsanız kacTane diye iki yerde aynı değişkeni tanıtım bunun karşısına 5 tane resim göstermek istiyorsanız var kacTane = 5 ; yazın ve 5 tane resim gösterilir.
Css kısmında ise biliyorsunuz ki tasarımcı ruhum yıllar önce kod yazmaya başlayınca bitti güzel bir tasarım yaparsanız benimle paylaşırsanız memnun olurum.

Detaylı anlatım blog sayfamda yer almaktadır.

Demo / Uygulamayı indir.

Kaynak.

Yeni eklenen resimli içerikler için hareketli resimler

AycanB

0