Yeni eklenen resimli içerikler için hareketli resimler

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;

Css kodlarımız ;

Ş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 ;

Çok karmaşık duruyor ama aslında öyle değil açıklama satırları böyle karışık gösteren.

Sayfa yüklendiğinde

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.

.size fonksiyonu ile kaç tane li tagi var diye soruyoruz ve kaç tane li tagi olduğunu buluyoruz.

Gösterilecek afiş sayısını gosterilecekAfisSayisi değişkenine aktarıyoruz.

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.

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.

Değişkenleri oluşturuyoruz ve resimlerin sayısını gene alıyoruz.

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.

Eğer sag tuşa basılırsa afisleriSagaKaydir(sayi,kacTane); bu fonksiyona li taglari hakkında bilgi gönderiyoruz.

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

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.

“Yeni eklenen resimli içerikler için hareketli resimler” üzerine 20 yorum

  1. 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 🙂

  2. 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ı ?

  3. 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.

  4. @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.

  5. @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.

  6. 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

  7. 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.

    1. 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

Bir cevap yazın

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