Yanılıyorsunuz, Bu Flash Değil!
Flash'ı kıskandıracak bir fotoğraf galerisi, üstelik kullanımı oldukça basit.
Apple CEO'su Steve Jobs'un Flash'a karşı takındığı tavırdan mıdır bilmiyorum bu sıralar Flash ile aram pek iyi değil. Flash'ın web sitelerinin artık vazgeçilmez bir parçası olduğunu kabul ediyorum fakat bana nedense site ile tam manasıyla uyumlu gelmiyor, sanki siteden kopuk bir şekilde duruyor.
Bu yazıda kullanımını anlatacağım fotoğraf galerisinin XML tabanlı Flash versiyonu da mevcut. İkisi arasında gözle görülür pek fark yok. İlerki bir yazımda ona da yer vereceğim. Bu şekilde daha iyi bir karşılaştırma yapabilirsiniz.
Flash kullanılarak yapılmış bir galeri.
Galerinin işleyişi iTunes yazılımında albüm seçim ekranına benziyor. Son günlerde popüler olan bu yapı mobil sistemlerde de kullanılıyor.
ImageFlow isimli galerinin benim için dikkat çeken en önemli özellikleri şunlar:
- XML kullanıyor.
- Birçok galerinin aksine Jquery veya Prototype gibi JavaScript kütüphanesi kullanmıyor.
- Resimler arasında otomatik geçiş yapıyor.
- Kaydırma çubuğuna sahip.
Verileri XML dosyasından çekmesi kullanıcıya çok büyük kolaylık sağlıyor. Hiçbir şekilde HTML kodlarıyla uğraşmaya gerek kalmıyor. Aslında tek bir HTML ve XML dosyasına sahip olan galerinin CSS ve Script dosyalarını ayırdım. Bu şekilde galeri temiz bir HTML sayfası görünümüne sahip oldu.
Bu da bizim galerimiz.
Galerinin Kurulumu:
Galeri paket dosyasında yer alan aşağıdaki dosyaları sitenizin kök klasörüne çıkarın.
- flow.css
- flow.js
- sb.gif
- sc.gif
- sl.gif
- sr.gif
Şayet farklı dizinlere çıkaracak olursanız (Scripts, CSS, Resimler gibi) gerekli adres düzenlemelerini CSS ve HTML dosyalarında yapmalısınız.
Galerini Kullanımı:
Oluşturacağınız HTML sayfasının <head></head> etiketleri arasına aşağıdaki kodları yapıştırın.
<link href="flow.css" rel="stylesheet" type="text/css" />
<script src="flow.js" type="text/javascript" />
Böylelikle gerekli stil ve kod dosyalarını sitemize çağırmış oluyoruz.
Aynı HTML sayfanızın <body></body> etiketleri arasına ise aşağıdaki kodu ekleyin.
<div id="imageFlow">
<div class="text">
<div class="title">Yükleniyor</div>
<div class="legend">Lütfen bekleyiniz...</div>
</div>
<div class="scrollbar">
<img class="track" src="sb.gif" alt="">
<img class="arrow-left" src="sl.gif" alt="">
<img class="arrow-right" src="sr.gif" alt="">
<img class="bar" src="sc.gif" alt="">
</div>
</div>
Galerimiz "imageFlow" isimli DIV elementi içerisinde yer alacak.
Fotoğrafların Eklenmesi:
Sitenin kök dizinindeki "resimler.xml" dosyasını Not Defteri benzeri bir uygulama ile açın. Eklemek istediğiniz her bir resim için aşağıdaki XML yapısını <bank></bank> ağacı içerisinde çoğaltın.
<img>
<src>Resim.jpg</src>
<title>Resim Başlığı</title>
<caption>Resim Açıklaması</caption>
<link>Bağlantı adresi</link>
</img>
Dilerseni <link></link> bölümünü kullanmayabilirsiniz. Bu bağlantı resme tıklandığında gidecek web sayfasını işaret edebilir ya da resmin büyük halinin bulunduğu adres olabilir.
İndirme Bağlantısı ve Sonuç:
Buraya tıklayarak galerinin nasıl göründüğüne bakabilirsiniz. Galeriyi inceledikten sonra Flash konusunda bana hak vereceğinizi düşünüyorum. Buraya tıklayarak da hazırlamış olduğum küçük galeriyi indirebilirsiniz. Gerekli dosyalar paket içerisinde mevcut.
Not: Galeri benim tarafından yazılımamış olup kaynağı Dhteumeuleu.com web sitesidir.
Kullanıma ilişkin sıkıntılarınızı ve görüşlerinizi yorum olarak ekleyebilirsiniz. Başka bir yazıda buluşmak dileğiyle..
Web sitemi şu anda Masaüstü Görünümü'nde geziyorsunuz.
Mobil cihazınızdan geziniyorsanız Mobil Görünüm'e geçmek için 
En popüler kelime oyununda yarışmaya hazırsanız buraya 
Aradığınız ürünü akılınızdaki fiyata bulun. Hemen şimdi 
Mini blog sitesi 
merhaba hocam. bu slider yapınca resmin üzerine gelince resim il eilgili yazıyı benim dosyamdan link alsın istiyorum nasıl yapabilirim ? teşekkürler
tamam yaptım.resimler tam ekran bir sayfada açılıyor.şöyle olsa daha iyi olmazmı mardindumlupınara baktım.oradaki gibi sitenin içinde bir köşede olsa daha hoş olabilir.şimdi onu nasıl yapabiliriz diye düşünüyorum
sorunu anlamadım yazacaktım yanlış yazmışım.ne yapacağımı bilmiyorum.
slm hocam.geldik bu sayfaya.ziyaretçi defteri tamam.mezun sayfası tamam.oyun sayfası tamam.Allah razı olsun.adres toki66.meb.k12.tr inceleyebilirsiniz.şimdi de galeriyle ugraşıyorum.ama takıldım kaldım.galeri "imageFlow" isimli DIV elementi içerisinde yer alacak.demişsiniz.ben de imageFlow / DIV klasörü oluşturup ftp ile yolladım.DIV içine fotoları attım.oluşturduğum html sayfasına söylediğiniz kodları ve foto isimlerini yazdım ama olmadı.sorunu anladım.yardımcı olursanız sevinirim
Örnek dosyayı indirip incelerseniz nasıl yapıldığını hemen çözeceksiniz. ImageFlow, DIV klasörleri yok, onlar HTML dosyasındaki elementler...
ABİ SAĞOLASIN ALLAH NE MURADIN VARSA VERSİN
TEŞEKKÜRLER....
Önizleme şu an çalışır durumda. İki versiyonu da (XML ve sade HTML) paket dosyaya dahil ettim.
Ahmet hocam önizleme yok dosyalarda bir kontrol ederseniz farklı tarayıcılarda denerim sonuç olumsuz teşekkürler
birde aklımdayken anketle ilgili bir ricam daha var eğer zor değilse yapılabilirse ki kesin yapılıyordur. anket eklediğimiz zaman anket yazısı varya mavi renkli altı mavi çizili onun yanına sağa dayalı ve hafif soluk renkli olarak tarih atsa anketin eklenme tarihi olarak süper olur bence
kolay gelsin saygılar. renk işleminin olumlu olduğunu söylemişmiydim?
Evet renk değişimini yaptığınızı gördüm. Anket tarihi yapılabilir hocam ama pek güzel duracağını zannetmiyorum. Yine de seçenek olarak ekleyeceğim.
Önizleme Opera'da sorunsuz gözüktüğü için farkedemedim. Diğer tarayıcılarla sıkıntısını giderip tekrar yükleyeceğim.