Okul Siteleri İçin Fotoğraf Galerisi

03 Kas 2010 Çar 36 yorum

Visual LightBox ile sitenizle tam uyumlu etkili fotoğraf galerileri hazırlayabilirsiniz. Üstelik tek satır kod bilmeden!

Kendi okulumun sitesinde yer alan fotoğraf galerisinin nasıl oluşturulduğuna dair birkaç istek almamdan dolayı böyle bir yazı yayınlamaya karar verdim. Galerinin nasıl olduğunu buraya tıklayarak hemen görebilirsiniz.

Ayrıca bu yazımda oluşturduğum galerinin daha önceden hazırlamış olduğum okul web sitesi şablonuna nasıl entegre edileceğine de yer veriyorum. Hemen başlıyoruz.

Neler Gerekli?

  • Visual LightBox yazılımı
     

Visual LightBox Yazılımı:

Buraya tıkladıktan sonra e-posta ve isim bilgilerinizi girin ve Register düğmesine tıklayın. İndirme adresi belirttiğiniz e-posta hesabına hemen gönderilecek. Gelen linkten Visual LightBox'ın ücretsiz sürümünü hemen indirebilirsiniz.

Neden Yazılım Kullanacağız?

Visual LightBox yazılımı bizi kodlarla uğraşmaya gerek kalmadan istediğimiz animasyonu, stili, fotoğraf boyutlarını seçmemize olanak sağlıyor. Fotoğraf önizleme dosyalarını kendisi oluşturuyor. Ve nihayetinde bize bir HTML çıktı dosyası sunuyor.

İlk Galerimizi Oluşturuyoruz:

Yazılımı kurup çalıştırdıktan sonra aşağıdaki gibi bir pencere açılacak. Hemen Options -> Language -> Turkish yolunu izleyerek Türkçe seçeneğini seçebilirsiniz.


Türkçe desteğine sahip yazılım oldukça da sade.

Fotoğrafları eklemenin birçok yolu var. Tek tek, klasörden veya sürükle bırak ile fotoğraflarımızı ekliyoruz.


Windows ile gelen birkaç duvarkağıdını sürükle bırak ile ekledim.

Galeri Ayarları:

Menüde Galeri -> Özellikler yolunu izleyerek fotoğraf galerimizin nasıl görüneceğine ilişkin ayarların yapıldığı pencereyi açıyoruz.


Genel sekmesinde pek değişiklik yapmamıza gerek yok.

Karşımıza gelen ilk sekmede sadece galeri ismini değiştirmemiz kafi. İsterseniz diğer ayarları da değiştirebilirsiniz. SlideShow Delay, fotoğrafların otomatik gösterilmesi sırasında geçen süreyi ifade ederken; Resize Speed fotoğraf tıklandığında büyültülmesi sırasında geçen süreyi gösteriyor.

Küçük Resimler:

Hemen her fotoğraf galerisinde küçük resimler yani önizleme resimleri kullanılıyor. Bunun nedeni galerinin yüklenmesini hızlandırmak ve kullanıcıların tıklamayacakları resimleri gereksiz yere indirmelerinin önüne geçmek. Küçük resimler sekmesinde fotoğraflarınız çerçeve stillerini, küçük resimlerin kalitesini, çözünürlüğünü ve formatını değiştirebilirsiniz.


Seçtiğimiz temaya göre yüklenecek CSS stilleriniz değişecektir.

Temalar:

Bu sekmede fotoğraflar arası geçiş sağlayan arayüzün özelliklerini ve stilini değiştirebilirsiniz. Ayrıca fotoğrafların son boyutunu,kalitesini ve küçük veya büyük fotoğraflarda uygulanacak yeniden boyutlandırma şeklini değiştirebilirsiniz. Fotoğraf galerileri için 640x480 pikselin yeterli olacağını düşünüyorum.


Fotoğrafların izlenmesinde ortaya çıkan arayüzü tık ile değiştirebilrsiniz.

Yayınla:

Fotoğraf galerimizi belirttiğimiz klasörde oluşturacak bu sekmede Yayınla düğmesine tıklamak yeterli. Galerinin oluşturulması seçtiğini ayarlara ve fotoğraf sayısına bağlı olarak uzun sürebilir.


Son adım

Yayınlandıktan sonra web sayfasını görüntüle seçeneğini işaretemiş iseniz galeriniz hemen varsayılan web tarayıcınızda açılacaktır.

İşte Galerimiz!

Fotoğraf galerimiz oluşturuldu. Fakat bembeyaz bir sayfada. Şimdi bu içeriği kendi okul sitemize nasıl ekleyeceğimizi gösteriyorum.


Galeriyi hemen izleyebilirsiniz.

Okul Şablon Dosyama Galerinin Entegrasyonu:

Sizi hiçbir şekilde kodlarla uğraştırmayacağım. Öncelikle şablonda yer alan ve boş bir sayfa olan hazirlikasamasinda.html sayfasını çoğaltın ve adını galeri_etkinlikler.html olarak değiştirin. Visual LightBox'da Yayınla sekmesine kadar olan adımları aynen uygulayın. Yayınla sekmesinde Insert To Page seçeneğini seçin.


Bu seçenek galerinin HTML sayfalarına gömülmesinde oldukça işe yarıyor.

Open HTML Page düğmesine tıklayarak web sitenizin bulunduğu klasörden oluşturduğunuz galeri dosyasını seçin. Ben galeri_etkinlikler.html üzerinden anlatmaya devam edeceğim. Aşağıdaki pencere açılacak.


Doğru elementi seçtiğinize emin olun.

Burada galerinin yer alacağı DIV elementini seçiyoruz. BODY ağacından aşağı inerek gelin ve ekrandaki gibi bilgilendirme mesajının olduğu DIV elementini seçin. Seçilen element yeşil renk ile vurgulanacak. Ardından Insert Before düğmesine tıklayın. Doğru yeri seçmiş iseniz aşağıdaki görüntüyü elde edeceksiniz.


Galeri tam buraya yerleşecek.

Artık Publish düğmesine tıklayarak işlememizi bitirebiliriz. Daha sonra HTML sayfamızdan başlık bilgilerini değiştirebilir ve bilgilendirme mesajını silebiliriz. Ve web sitemizin de Galeri bölümünde bu sayfamıza link verebiliriz.

Galeriyi internete yüklerken ana dizinde oluşturulan data ve engine klasörlerini de yüklemeyi unutmayın.


Ve galerimiz sitemize entegre oldu.

Herhangi bir sorunla karşılaştığınızda bu sayfadan size yardımcı olmaya çalışacağım. Başka bir yazımda görüşmek dileğiyle.

34844 kez okundu.

36 Yorum Var

  1. Ecvet Yöntem demiş ki

    Allah razı olsun çok teşekkürler

  2. betül demiş ki

    ellerinize sağlık çok güzel ve acıklayıcı anlatmışsınız

  3. Ali demiş ki

    Hocam okulun sitesi cok hos olmus. Ellerinize saglik. ilk defa boyle guzel okul sitesi goruyorum

  4. ali osman güllü demiş ki

    Hocam,Open HTML Page düğmesine tıklanacak olan yere kadar herşeyi yaptım.Fakat head,body sekmesinden sonra bişey açılmıyor yani div sekmesi çıkmıyor.yardımcı olursanız sevinirim.

  5. alev demiş ki

    çok güzel bir anlatım teşekkürler.. ancak alt köeşedeki reklam yazısını nasıl kaldırırız?

  6. misafir demiş ki

    hocam teşekkürler

  7. Mikail demiş ki

    galeri kasıyor. resimler donuyor..bunun bir sebebi var mı?

  8. şeyhmus demiş ki

    ahmet hocam bu galeri olayını sizin şablona uyarlamakta sıkıntı yok peki faarklı şablonlu sitelere uyarlamak için ne yapabiliriz farklı şablonlaarda biraz sıkıntı çıkıyor tam istenildiği gibi olmuyor

  9. nurhan demiş ki

    hocam daha önce oluşturulmuş bir galeriye foto ekleyebilir miyiz? nasıl yapmalıyım?

    • Ahmet Soyarslan demiş ki

      Biraz zahmetli de olsa yapılabilir. İlk olarak fotoğrafın bir büyük bir de küçültülmüş halini oluşturmalısınız. Basit resim programlarını kullanarak boyutlarda değişiklik yapabilirsiniz. Bu iki dosyayı diğer fotoğrafların olduğu klasörlere atın. Galeri html dosyanızda diğer fotoğraflar için oluşturulmuş satırlardan birisinin kopyasını hemen altına yapıştırıp içerisindeki resim bilgilerini yeni eklediğiniz fotoğrafa göre düzenlemelisiniz. Karışık gibi görünse de html dosyanızı açtığınızda kolay olduğunu farkedeceksiniz.

  10. özgür demiş ki

    hocam birşeyi kaçırdım. galeriyi oluştururken küçük resimler de büyüklerle yan yana görünüyor. galeriyi oluşturduktan sonra small uzantılı ikinci resimleri silmem mi gerekiyor? ikinci sorum da ana sayfada resim galerisine basınca resimlerin olduğu arkası beyaz sade bir sayfa geliyor. sol, üst menü için ana çerçeveyi tekrar mı oluşturmam gerekiyor?

    • Ahmet Soyarslan demiş ki

      Evet galerinin site içerisinde gözükmesi için çerçeve kullanmalısınız. VisualLightBox bunu sizin için yapabiliyor. Small uzantılı dosyalar fotoğrafların küçük halleridir, önizleme için. Yalnız büyüklerle aynı anda gözükmemesi gerekiyor. Site adresinizi yazarsanız bakabilirim.



Yorum Yazın