Anasayfa » Web Programlama

2 Foto Galeri Sorunsuz Kurulum {Anlatım}

6 Ekim 2008 Görüntülenme: 3.609 17 Yorum Yazar: Ahmet
Kötüİdare ederOrtaGüzelMükemmel (Bu yazı 1 oy aldı. Ortalama Değeri: 2,00 oy dan 5)

Bu başlığı bir arkadaşın ricası üzerine açıyorum. Buradaki konu ile ilgili bu yazı. Bu yazı içerisindeki birinci ve sonuncu foto galerinin nasıl kurulduğunu anlatıyorum. İlgilenen arkadaşlara duyrulur. Normalde bu anlatımı gerekli yazının altına yapacaktım ancak anlatımı hazırlarken yazının biraz yorumda çıkıp bir konu haline gelmesinden dolayı yazı olarak paylaşmak istedim.  Lafı fazla uzatmadan hemen anlatmaya başlayalım.

Kurulumu:

Foto galeriyi buraya tıklayarak indirin. İndirdiğiniz dosyanın adı simpleviewer.zip şeklindedir. Bunu .zip den çıkartın. simpleviewer klasör içerisinde bütün dosyalar galerimizin dosyaları. simpleviewer klasörü içerisindeki images klasörü içerisine (resimlerinizin büyük hallerini. boyutu önemli değil kendisi otomatik olarak boyutlandıryor zaten.) resimlerinizi ekleyin. Resimlerinizin büyük hallerini ekledikten sonra yine simpleviewer klasörü içerisindeki gallery.xml dosyasını bir not defteri ya da Dreamweaver yardımı ile açın.

<image>
<filename>tall.jpg</filename>
<caption>Caption 4</caption>
</image>

Bu kodları bulun. Dosyayı indirdikten sonra hiçbir değişiklik yapmadıysanız bu kodları bulursunuz. Şimdi burdaki mantığı anlatayım.

1.  <image>
2.   <filename>tall.jpg</filename>
3.   <caption>Caption 4</caption>
4.  </image>

1. satırda resim koyma işlemi başlıyor.
2. satırda resminizin büyük halinin yani images içerisindeki büyük resiminizin adını yazıyorsunuz..
3. satıra ise resim ile ilgili bir açıklama ekleyiniz. Açıklamalarda benim denememde Türkçe karakter sorunu yaşamadım. Umarım sizdede öyle olur.
4. satırda resim ekleme işi bitiriliyor.

Yukarıda verdiğim kodları kopyalayıp yapıştırarak (çoğaltarak) istediğiniz kadar resim ekleyebilirsiniz.

gallery.xml dosyasını incelerseniz galeriye resim ekleme işlemi bu şekilde yapılıyor. Şimdi resimlerimizin küçük hallerini galeride nasıl göstereceğiz? Bundan bahsedelim. Eğer siz images klasörü içerisine resimlerinizin büyük hallerini ekledikten sonra thumbs kalsörü içerisinde resimlerinizin küçük hallerini eklemezseniz, galeri içerisinde resmin büyük hali görünür ancak küçük resim yerinde de bir X işareti yer alır. Bunun için images içerisine eklediğiniz büyük resimlerin küçültülmüş hallerini (boyutları yine önemli değil ama resimleri küçültmeniz alandan kazandırır sizlere.)  thumbs klasörü içerisine ekleyin. Burada dikkat etmeniz gereken en önemli konu ise images klasörü içerisindeki büyük resimin adı ile thumbs klasörü içerisindeki küçük resimin isimlerinin aynı olması!

Şimdide sonuncu foto galerinin kurulumuna geçelim.

Şimdi bu foto galeri ile devam edelim. Buraya tıklayarak foto galerimizi indirelim. İndirdiğiniz tiltviewer.zip dosyasını .zip den çıkartın. tiltviewer klasörü içerisindeki imgs klasörünün içerisine resimlerimizin büyük hallerini kopyalayalım. Resimlerinizi imgs klasörüne eklerken resimlerinizin boyutlarına dikkat etmelisiniz. Resimlerinizin 640×480 boyutlarında olması en uygunudur. Bu boyutlardan büyük halde resim eklerseniz foto galeri doğru çalışmayacaktır. dik resimleriniz içinde width (Genişlik) kısmını 640 yapabilirsiniz. Yüksekliğinde max. 850 px olması gerekir.

Resimlerimizi img klasörüne kpyaladıysan işin kodlama kısmına geçelim hemen. tiltviewer klasörü içerisindeki gallery.xml dosyasını açalım.

1. <photo imageurl=”imgs/img.jpg” linkurl=”http://www.google.com”>
2. <title>Image 1</title>
3. <description>This is a regular text description.</description>
4. </photo>

Yukarıdaki kodlar gallery.xml dosyası içerisindeki ilk 6 satırda bulunan kodlardır. Eğer dosyayı indirdikten sonra hiçbir değişiklik yapmadıysanız bı kodlara ulaşabilirsiniz.

Şimdi bu kodları açıklayalım.

1. satırda imageurl=”img/img.jpg” kodu ile resmimizin adresini belirtiyoruz. Biz resimlerimizi img klasörü içerisine koymuştuk. Bizim burda değiştireceğimiz yer sadece img.jpg kısmı olacaktır. Bir diğer kod olan linkurl=”http://www.google.com” kodu ise galeri çalışıken resimin arkasına bakıldığında bir adrese gitmesi için link verilen yerdir. Yani resimin arkasında sol alt köşede bulunan go to Flickr page yazısına tıkladığınızda gitmesinin istediğiniz web sitesinin adresini burada belirtiyoruz. İsterseniz bu kod satırını silerek herhangi bir yere gitmemesini sağlayabiliriz.

2. satırda resmin arkası çevrildiğinde karşımıza çıkan açıklamanın başlığını belirtir. Bunu istediğiniz gibi değiştirebilirsiniz. Bu başlık yerine yazılan başlaıklarda ben Türkçe karakter sorunu yaşamadım.İsterseniz bu kodu silerek resmin arkasındaki başlığı kaldırabilirsiniz.

3. <description>….</description>  tagları arasındaki 4 nokta yerine resimin arkasındaki başlığın altında bulunan açıklama olarak istediğiniz herşeyi yazabilirsiniz. Bu alanda da Türkçe karakter sorunu bulunmamaktadır. Bu kod satırınıda dilediğiniz gibi kaldırmakta özgürsünüz.

4. satır ilede fotoğraf ekleme işlemini bitiriyoruz.

Yukarıda verdiğim kodlarını kopyalayıp yapıştırarak (çoğaltarak) istediğiniz kadar resim ekleyebilirsiniz.

Bütün anlatımlar bu kadar. İstediğiniz gibi deneyebilirsiniz. Anlatımı bizzat kendim deneyerekyaptığım için hata ihtimali çok az. Yinede hata yapmış olabilirim. Herhangi bir sorun yaşarsanız kurulumlarda bu soru(n)ları yorumlarınızla belirtebilirsiniz.

Yazıyı beğendiysen başka yerlerde paylaşabilirsin:
  • Google Bookmarks
  • Digg
  • Twitter
  • del.icio.us
  • Facebook
  • MySpace
  • Netvibes
  • Live
  • FriendFeed
  • Technorati
  • StumbleUpon
  • Reddit
RenkliTeneke.Com blogundaki yeni yazılardan haberdar olmak için RSS Abonesi olabilirsiniz. İsterseniz Twitter'dan ya da FriendFeed'den takip edebilirsiniz. Ya da "Yeni yazılar e-mail adresime gelsin" diyorsanız e-mail abonesi olabilirsiniz.
Merhaba sevgili ziyaretçi. Şuanda renkliteneke.com bloguna " Ahmet" tarafından " 6 Ekim 2008" tarihinde yazılmış olan "2 Foto Galeri Sorunsuz Kurulum {Anlatım}" başlıklı bu yazıyı okuyorsun. Bu yazının başka bir yerde yayınlaması yasaktır. Her yazı ayrı bir özen içerisinde hazırlanıyor ve bu emeğin iki tık ile heba edilmesi pek hoşuma gitmez. Bu açıklama ise bilgilenmeniz için yazılmıştır.

17 Yorum »

  • Alperen demiş ki:

    Hocam çok teşekkür ederim. Bu galerilere çok rastlıyordum ama kurulumunu bilmiyordum. Teşekkür eder, saygılar sunarım.

  • Ahmet (Admin Abi) demiş ki:

    Alperen önemli değil ;)

  • metin kaplan demiş ki:

    Galeriler çok güzeldi açıkça da anlatmışsın. Tam aradığım gibilerdi ama Türkçe karakter olayını halledemedim.

  • Ahmet (Admin Abi) demiş ki:

    @metin kaplan
    Hangisinde Türkçe karakter sorunu yaşadınız?

  • metin kaplan demiş ki:

    İlkinde

  • Ahmet (Admin Abi) demiş ki:

    @metin kaplan
    Az önce tekrar denedim ama hiçbir şekilde Türkçe karakter sorunu ile karşılaşmadım. Ekran görüntüsüne buraya tıklayarak ulaşabilirsin.

  • metin kaplan demiş ki:

    Biraz araştırma yaptım. xml dosyasının kodlamasını UTF8′den Unicode’a çevirince aştım ben de sorunu. Şu an Türkçe karakter girebiliyorum. Teşekkür ederim.

  • renkli teneke » 5 Dakikada Flash Foto Galeri Hazırlayın demiş ki:

    [...] Daha önceden de buradaki yazıda 11 tane farklı foto galeriden bahsetmiştim. Aynı zamanda da buradaki yazıda 2 tanesinin nasıl kurulup kullanılacağından bahsetmiştim. Bu yazılarada göz atmanızda fayda [...]

  • Burak Turhan demiş ki:

    Hocam eline sağlık nezamandan beri uğraşıyordum viewier koymak için.
    Teşekkür ediyorum açıklamaların için.

  • tulay demiş ki:

    simpleviewer foto galeri kullanmak istiyorum ama galerinin sağ alt köşesindeki reklam linkini silmem mümkün mü bu konuda yardımcı olursanız sevinirim teşekkürlerl.

  • Ahmet (Admin Abi) demiş ki:

    @tulay, İstediğiniz değişikliği malesef yapamıyorsunuz. Çünkü o logolar direk olarak flash içerisinden eklenmiş durum. Değiştirebilmek için o swf dosyasının .fla uzantılı kaynak dosyası gereklidir. Bu dosyada malesef yok.

  • tuana demiş ki:

    açıklamalar için çok teşekkürler peki ben yaptığım galariyi

    ücretsiz siteye nasıl koyabilirim.

    yani dosyalrı mı yüklemem gerekir.

    eğer öylyse hazır sitede bunu kullanamam demektir.

    oluşturduğunuz sadece resim adresleri değiştirilebilen bir html kodu var mı acaba.

  • Muher Çoban demiş ki:

    Güzel anlatım olmuş kardeş . Emeğine sağlık . ihtiyacı olan arkadaşlarımız kesinlikle vardır.

  • Burak Moğul demiş ki:

    Çok teşekkür ederim çok işime yaradı fakat bi sorunum var galeriyi siteme yükledikten sonra (1. galeriyi kullandım) sol tarafta küçük resimler gözüküyo fakat büyük halleri çarpı şeklinde çıkıyor. orjinalindeki çiçek resmini silmemiştim. çiçek resminin büyük boyutu gözüküyor benim eklediğim resimlerin büyük boyutları açılmıyor. yardımcı olursanız sevinirim.

  • Y!G!T MERT demiş ki:

    GÜZEL ANLATIM TEŞEKKÜRLER…

  • DesingXxKod demiş ki:

    Anlatım Süper.

  • serhat yanar demiş ki:

    Bu açıklamalara binayen galeriyi kurdum ve mükemmel çalışıyor. Küçük resim büyük resim, açıklamalar kısmı hepsi harika. Bununla beraber teşekkür ederken sorum olacak ilgili arkadaşlara.
    1 : simpleviewer galerisini kurdum. Ancak galerinin üzerindeki sample wiever yazısını ve alttaki küçük yazıyı silmek istiyorum nasıl? Flaşla açtım fakat hiçbir yazı ibaresi yoktu.

    2: Bu programla resimleri kategori halinde yapabilirmiyim? yani mesela arabalar, uçaklar gibi..ayrı foto galeri…

    3: ve en önemlisi ben bu programı yani yaptığım galeriyi sorunsuz web sitemde nasıl çalıştıracağım? bir kaç yöntem denedim, body kodları, heat vs..ama olmadı..modzillada site açılınca Get Flash yazısı var, normal enternet exploreda ise direk pc min adresinden bağlantıyla galeriye ulaşıyorum. Ancak ben ya sitenin içerisinde açılmasını, ya da verdiğim linkte açılmasını istiyorum.

    Şimdiden teşekkürler.

Yukarıdaki yazı hakkında kendi düşüncelerinizi yazın!

Lütfen yukarıdaki yazı hakkında düşüncelerini paylaş. Senin düşündüklerin bazen bu blogdaki yeni yayınlanacak yazının hangi konuda yazı yazılması gerektiğini belirliyor.

Yorum ekleye bilir yada yazı için geri bildirim gönderebilirsiniz. Bu yazı için yorumlarına abone ol: subscribe to these comments

 

Yorum içerisinde kullanabileceğiniz Html tagları :
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Yazıya yorum yazdığınızda yorumunuzun hemen yanında bir Gravatarınız yayınlanacaktır.
Hani benim Gravatarım? Gravatar'da neyin nesi?