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;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!-- ================================================ --> <!-- ! 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 ;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
/* ================================================ */ /* ! 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 zaten js dosyasının içeriğinde baya bir açıklamada bulundum ama buradan anlatmak daha faydalı.
Genel js kodlarımız ;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
/** * -------------------------------------------------------------------- * ab-hareketliResimler.js dosyasi * Aycan BULBUL, ab@aycan.net 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 & lt; = kacTane) { jQuery('.filmler li').css('display', 'block'); } else { for (var i = 0; i & lt; 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 & lt; 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 & lt; 1) { /** * Eger li tagi 0 ise yani en basta ise donguyu kiriyoruz. */ break; } else if (1 & lt; 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 & lt; afisSayisi; i++) { displayNoneBul1 = jQuery('.filmler li').eq(i).css('display'); if (displayNoneBul1 == "block") { toplam = i + kacTane; if (afisSayisi & lt; = 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 & lt; 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 & lt; 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 & lt; sayi; j++) { jQuery('.filmler li').eq(j).css('display', 'none'); } sayi = sayi - kacTane; var k = sayi - kacTane; for (k; k & lt; sayi; k++) { jQuery('.filmler li').eq(k).css('display', 'block'); } } |
Çok karmaşık duruyor ama aslında öyle değil açıklama satırları böyle karışık gösteren.
|
1 |
jQuery(document).ready(function(){ .... }); |
Sayfa yüklendiğinde
|
1 |
var kacTane = 6 ; |
Kaçtane afiş göstermek istiyorsanı karşısına sayısını yazın örn : var kacTane = 9 ;
ama burada iki yerde kacTane değişkeni tanımlayacağız bilginize.
|
1 |
var afisSayisi = jQuery('.filmler li').size(); |
.size fonksiyonu ile kaç tane li tagi var diye soruyoruz ve kaç tane li tagi olduğunu buluyoruz.
|
1 |
var gosterilecekAfisSayisi = kacTane ; |
Gösterilecek afiş sayısını gosterilecekAfisSayisi değişkenine aktarıyoruz.
|
1 2 3 4 5 6 7 |
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'); } } |
Eğer sistemimizde gösterilecek resim sayısından dahada az resim eklenmişse bunu if döngüsü ile belirtip for döngüsü ilede her li’nin style=”” tagına display:block; diyoruz. Eğer resim sayısı bizim gösterilecek sayımızdan yüksek ise yukarıda kacTane adlı değişken ile belirlediğimiz kadar resim gösteriyoruz.
|
1 |
function kaydirmaKontrol(yon) { } |
Bu fonksiyon temel fonksiyonumuz burada hangi yön tuşuna basıldığını belirliyor , hangi resimin ekranda gösterildiğini belirliyoruz ve 2 farklı fonksiyonumuz var sol tuşa basıldıysa solaKaydir fonksiyonuna saga tıklayınca sagaKaydir fonksiyonuna gönderiyoruz.
|
1 2 3 4 5 6 7 |
var displayNoneBul1, displayNoneBul2, sayi, toplam; var kacTane = 6; var afisSayisi = jQuery('.filmler li').size(); |
Değişkenleri oluşturuyoruz ve resimlerin sayısını gene alıyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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; } } } } |
If ile bir şart oluşturuyoruz eğer sol butona tıklanırsa litaglarında gizli olanları buluyoruz hangi tagların açılacağını bulup afisleriSolaKaydir fonksiyonuna gönderiyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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; } } } } } |
Eğer sag tuşa basılırsa afisleriSagaKaydir(sayi,kacTane); bu fonksiyona li taglari hakkında bilgi gönderiyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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'); } } |
Bu fonksiyonda afisleri sola sağa kayıdırıyoruz fonskiyon içerisindeki taglar fonksiyonları genel olarak bildiğimiz için anlatmıyorum zaten içerinde açıklamalar yazıyor.
bu satırda
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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.
güzel olmuş.
Eline saglık, boş bi vaktimde inceliycem inş 🙂
Aycan , eline sağlık güzel uygulama. Jcarousel’de ki gibi seçenekleri arttırsan ve tek tek kaydırma seçeneğinide yapsan tadından yenmez 🙂
ellerine sağlık Aycan, çok güzel anlatıyorsun.
Ellerine Sağlık
Teşekkür ederim arkadaşlar.
hocam eline sağlı resimler tek tek kayabiliyormu bende bu şekilde bir arayış içindeydim yardımını beklerim.
anasayfadaki “örnek tasarımlar bölümü”
http://alokatolog.com/Sayfa.php#
bakarmısın
Teker teker kaydırabilirsin oradan kaçar adlı bir değişken var ona 1 yaparsan tek tek gelir.
Aycan benim tam oalrak aradığım şey bunun veri tababnındaki kayıtlara göre otomatik olarak oluştuğu bir sistem.Yani veri tabanında ilgili tabloda ekleme olduğu zaman bu sayfa yenilendiğinde kendi kendine eklenecek.bir fikrin varmı ?
Senin dediğin dinamik bir dil @Yusuf. Sen bu kodların arasına php veya asp kodlarını yerleştirirsen ve limit ile son haberleri vs çekersen durmadan en son eklediğin verileri çeker.
Teşekkürler Aycan..
@Aycan BÜLBÜL “Teker teker kaydırabilirsin oradan kaçar adlı bir değişken var ona 1 yaparsan tek tek gelir.”
demişsiniz ama ben js içerisinde böyle bir kod göremedim. Sorun nerededir?
Kolay gelsin.
@Ali bey js dosyasında şu değişkenin değerini değiştireceksiniz. var kacTane = 6 ;
@Aycan BÜLBÜL, arkadaşın ve benim istediğimizi tam anlatamadık galiba.
Şimdi sağ ve sol “afisleriSagaKaydir” tıklandığı zaman 6’sı birden değişiyor. Biz bunu tek tek kaymasını istiyoruz.
kacTane = 6 ; değeri iki yerde geçiyor. İlkini değiştirince mesela 1 yapınca sayfa açıldığında sadece 1 tane gösteriyor sağa tılayınca 6 tane birden geliyor.
İkinci değiştirdiğimizde ise bu sefer 6’sıda gözüküyor ama sağa tıkladıkça 6’sıda tek tek kayboluyor sonra yeni altıdan birden geliyor.
Sizin kodlamanızda 6 tane gösterip tek tek kaydırmamız nasıl mümkün olabilir?
Teşekkürler.
iyi çalışmalar .öncelikle bu paylaşım için çok teşekkür ederim benim sorum .. süreksiz kaydırmak için ne yapmalıyız yani kısırdöngü içinde geri ve ileri kaymasını istiyorum anlatabildimmi ..şimdiden teşekkürler
Bu uygulamada gerçekten çok hoş.Teşekkürler paylaşımlarınız için.
Merhaba..
Ben bunu wordpress siteme entegre etmek istiyorum. Temaya? Nasıl yapabilirim? Yardımcı oLURsanız sevinirim. 🙂
teşekkürler harika olmuş.. ((:
Elinize Sağlık. Bir Sorum Olacak Demoda Listelerken alt nasıl sayfa sayısını ekleyebiliriz mesela 1/6 ileri gidince 2/6 3/6… gibi bunu javascript bilmediğim için yapamadım açıkçası ve yardımcı olabilirseniz çok işime yarayacak. Tekrar emeğiniz için teşekkür ederim çok stabil çalışan bir kod.
Merhaba bu çok eski bir slider ve mantık olarak ul’u değil li taglarını döndürüyorum, bunu yapmak bu slider için epey zor. owl slider’i tavsiye ediyorum