Forum
Aktif konular
Üyeler
Kurallar
Arama
PHP + Javascript İle Slideshow PHP + Javascript İle Slideshow
-
indirme : http://code.google.com/p/ayroman/downloads/detail?name=test.rar
Bir kaç slideshow'a baktım ; ölüm ötesi. Sinir etti beni. php + javascript herşeye yeter , jQuery var dedim ve ufak birşey yaptım.
Ben veritabanından çekip ; slideshow yapacağım. Tasarım, kodlar, javascript ona göre değiştirdim. Fakat yeni başlayanlara hem fikir olur ; hemde başka işler için değiştirebilirler.
Dosyayı indirip açın, klasörü localhost'a atıp ; direkt girip bakabilirsiniz.
Explorer'da da çalışıyor (hiç bir kod falan yazmadım, iE9'da denedim , sorun olacağını sanmıyorum)
----
İçeriği ile ilgili bilgi vermek istiyorum.
max height ile ; resimlerin orantısız durmasını engelledik. Yükseklik belli boyda.
Google'dan jQuery'yi çektim. İSterseniz kendiniz indirip, dosya arasına koyup, oradan çağırabilirsiniz.
pic diye değişken yaratıp (töbe haşa, yaratmak allaha mahsus); cinsini array yaptık.
num adını verdiğim ve büyük iş yapacak değişken ekledik ve 0 yaptık (array'de sıfır olur).
php'de olduğumuzdan i diye deşken ekleyip, sayaç yapacağız. Bu , sonunda kaç resim olduğunu gösterecek.
--
Geri kalan dosya dizin işlemi. Açtırıp , dosyaları bakıyoruz.
getimagesize ile dosyayı okuduk. Burada array'ler var. İSterseniz başka bir yerde
$a = getimagesize(resimyolu);
echo '<pre>'; print_r($a); echo '</pre'>;diye ne var ne yok bakabilirsiniz. Burada en, boy, tip var. Yani $fi['0'] = en, $fi['1'] = boy ve 2 tip oluyor. Tip şu şekilde ;
1-2-3-4 olabilir. Sırasıyla : gif, jpeg, png, bmp. Eğer bu 4'ü değilse ; işlemi yapma dedim, çünkü resim değildir.
echo 'pic[',$i++,']="'.$dir.$file.'";';buradaki olay ; daha önce <script> ile açtığımı için , sayfada script içinde işlem yaptıracak. pic[X] = 'dosya adı'; şeklinde devam ediyor. X yerine $i yazdım. Yani 0 ekleyecek; ekledikten sonra artarak gidecektir.
total = $i yazdım. Döngü sonunda total neyse o olacak. -1 eklemedim ; matematiksel. Javascripte ona göre halledicem (Değiştirebilirsiniz).
div içine img src ekleyip birşey yazmadım ; javasript ile çağıracağım.
fadeIn ile efektli olarak pic[0] 'ı img kısmına ekledik (jQuery kullanımı).
dothat diye bir fonksiyon yarattım. gelen değer b ise eksilt, değilse arttır dedik. İleri / geri olayı için.
eğer 1 yada 1'den düşükse ; son resmi ekledik (total-1 çünkü $i++, bittikten sorna arttırdı).
Total'in moduna göre , fazlalıkta tekrar başa döndürdük.
jQuery efekti, sonrasında da ; tıklandığında ben işlem yaptıracağım (yeni div aç vs..), onun için bir fonksiyon.
-----------------------
Kısaca bu. Projeye dönmem gerek, sorun; herhangi birşey varsa yazabilirsiniz.
Kod hali : http://paste.org/61113
-
İndirdim inceledim, kodlamayı incelemek isteyenler için gayet güzel bir döküman olabilir.
Gayet sade...
-
Bir öneri
Fotoları 1 2 3 4 diye if ile kontrol etmek yerine dosya sayısının countını alıp for içinde yapabilirsin
4 foto yerine 10 tane koymak isteyen kodu değiştirmek zorunda kalmaz böylece
SinusX tarafından 08/Şub/13 19:08 tarihinde düzenlenmiştir -
SinusX bunu yazdı
Bir öneri
Fotoları 1 2 3 4 diye if ile kontrol etmek yerine dosya sayısının countını alıp for içinde yapabilirsin
4 foto yerine 10 tane koymak isteyen kodu değiştirmek zorunda kalmaz böylece
hocam if ile çektiği birşey yok zaten. Yanlış anlamışsın sanırım.
İstediğin kadar resim ve başka dosya atabilirsin. Kodda değişiklik yapmana gerek yok ; belirlediğin klasördeki bütün resimleri otomatik olarak slideshow şeklinde bastırır.
yani kodu ellemeden 2 resimle; 200 resim'i gösterebilirsin.
-
yenilik :
Eğer yön tuşları ile sağa/sola geçmesini istiyorsanız ;
şunu script tagının arasına ekleyin
----
$(document).keydown(function(event){
var keys = new Array(37, 39);
var code = (event.which) ? event.which : event.keyCode;
if(code == keys[0]) dothat('b');
if(code == keys[1]) dothat();
});
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla