Farklı ve Basit Bir Resim Galerisi

Dün gece basit ve farklı bir resim galerisi scripti buldum. Ancak scriptte statik olarak verilen resimler gösteriliyordu. Statik içerik artık günümüzde işlevselliğini yitirdiğinden, bunun bir şekilde dinamiğe de dönüştürülmesi ve çoğumuzun kullandığı meb.k12.tr uzantılı okul sayfalarında da kullanılabilmesi gerekiyordu.
İşin içerisine birazcık Javascript ve XML karıştırınca hoş bir script ortaya çıktı.
Ekteki dosyada Statik.html ve Dinamik.html olmak üzere iki farklı dosya var.

Statik.html de sayfa başında ki
imagearray: [
["images/1.jpg", "http://www.rtucel.com", "_new", "Okulumuzun Dış Görünüşü"],
["images/2.jpg", "http://www.rtucel.com", "_new", "Atatürk Köşesi"],
["images/3.jpg", "http://www.rtucel.com", "_new", "Yangın Acil Müdahale Köşesi"],
["images/4.jpg", "http://www.rtucel.com", "_new", "Başarılarımız, Kupalarımız"],
["images/5.jpg", "http://www.rtucel.com", "_new", "Okul Tanıtım Panosu"],
["images/6.jpg", "http://www.rtucel.com", "_new", "Veli Bekleme Salonu"]
],

kodları değiştirerek kullanabilirsiniz. Burada görüleceği üzere 4 boyutlu 6 elemanlı bir dizi var. İlk boyut resmin yolunu, ikincisi bu resim tıklandıktan sonra gidilecek lan web sayfasını, üçüncüsü link tıklandıktan sonra sayfanın yeni bir pencere açılıp/açılmamasını (linkteki target parametresi), son kısım ise resmin açıklamasını içerir.
Bu alanları kendinize göre uyarladıktan sonra kullanabilirsiniz.

Dinamik.html de ise;
yine ekteki dosya içerisinde mevcut olan Fotograflar.XML dosyasını NotePad programı ile açınız.
<?xml version="1.0" encoding="utf-8"?>
<photos>
<photo desc="Okulumuzun Dış Görünüşü" src="images/1.jpg" url="http://www.rtyucel.com" target="_new" />
<photo desc="Atatürk Köşesi" src="images/2.jpg" url="http://www.rtyucel.com" target="_new" />
</photos>

yukarıdaki yapıda bulunan xml dosyasına istediğiniz elemanları örnekteki gibi ekleyiniz.

Türkçe Karakter problemi yaşamamak için XML dosyasını notepad’de Dosya->Farklı Kaydet->Kayıt Türü: UTF-8 seçiniz.

Statik.HTML’nin çalışan hali için: http://www.rtyucel.com/site/calismalarim/resimgalerisi1/statik.html
Dinamik.HTML’nin çalışan hali için: http://www.rtyucel.com/site/calismalarim/resimgalerisi1/dinamik.html
Scriptin orjinal hali için : DynamicDrive.com http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm

adreslerine göz atabilirsiniz.

Dosyayı indirmek için http://www.rtyucel.com/site/download.asp?did=24 adresine tıklayınız.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir