Yanılıyorsunuz, Bu Flash Değil!

05 Ara 2010 Paz 7 yorum

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

20004 kez okundu.

7 Yorum Var

  1. ilhan demiş ki

    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

  2. murat demiş ki

    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

  3. murat demiş ki

    sorunu anlamadım yazacaktım yanlış yazmışım.ne yapacağımı bilmiyorum.

  4. murat demiş ki

    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

    • Ahmet Soyarslan demiş ki

      Örnek dosyayı indirip incelerseniz nasıl yapıldığını hemen çözeceksiniz. ImageFlow, DIV klasörleri yok, onlar HTML dosyasındaki elementler...

  5. Sami AKDİ demiş ki

    ABİ SAĞOLASIN ALLAH NE MURADIN VARSA VERSİN
    TEŞEKKÜRLER....

  6. Ahmet Soyarslan demiş ki

    Önizleme şu an çalışır durumda. İki versiyonu da (XML ve sade HTML) paket dosyaya dahil ettim.

  7. ORHAN ÖZKILINÇ demiş ki

    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?

    • Ahmet Soyarslan demiş ki

      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.



Yorum Yazın