Mini Fotoğraf Galerisi

08 Ara 2010 Çar 2 yorum

Sadece JavaScript ve CSS kullanılarak hazırlanmış bu galeri sitenizin bir köşesinde yer almalı.

Fazla yer kaplamayan bu galeriyi sitenizde yayınladığınız yazılara ilişkin fotoğrafları sunmak için kullanabilirsiniz. Örneğin yeni çıkan bir oyunun ekran görüntülerini bu şekilde vermeniz hoş olacaktır.


Resimler birbiri üzerine açılarak yer kaplamıyor.

Jquery ya da Prototype gibi kütüphanelere başvurmadan hazırlanan Mini Galeri'yi sitenize eklemek çok kolay. Aşağıdaki adımları takip ederek fotoğraf galerinizi hemen hazırlayabilirsiniz.

 

Kurulum:

Aşağıdaki dosyaları sitenizin ana dizinine kopyalayın.

  • minigaleri.css
  • minigaleri.js

Galeriyi kullanacağınız HTML dosyasının <head></head> etiketleri arasına aşağıdaki iki satırı ekleyin.

<link href="minigaleri.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="minigaleri.js"></script>

 

Kullanım:

HTML dosyanızda <body></body> etkileri arasında olmak koşulu ile galeriyi eklemek istediğiniz kısma aşağıdaki kodu ekleyin.

 

<div id="border"></div>
<div id="screen">
       <span><img src="Resim1.jpg" alt="Resim Açıklaması 1"></span>
       <span><img src="Resim2.jpg" alt="Resim Açıklaması 2"></span>
</div>
 <div id="caption">Fotoğraf Galerisi Adı</div>

<script type="text/javascript">
 siM.init();
</script>

Galeriye yeni resimler eklemek için Screen kimliğine sahip DIV etiketi altındaki şu satırı çoğaltın.

<span><img src="Resim1.jpg" alt="Resim Açıklaması 1"></span>

 

 

Hazırlamış olduğum galeriyi izlemek için buraya, gerekli dosyaları indirmek için ise buraya tıklayın.

18929 kez okundu.

2 Yorum Var

  1. byfenci demiş ki

    olur görüşelim.nasıl olsa gazipaşadan kovuldum.3 gün boşum.varya yardımcı olsan doğrusu yapsan harikulade memnun olurum.çünkü ben web tasarımını heçç bilmem ama güncellemeyi öğretirsen onu ben kendim yaparım.mesela p.tesi veya salı görüşelim ne dersin??????????

    • Ahmet Soyarslan demiş ki

      Peki hocam, ayrıntıları görüşelim okulda siz başka okula gitmeden.

  2. MURAT AKBAŞ-byfenci- demiş ki

    merhaba ahmet hocam ..banada bi tanecik web sitesi yapsan ne olacak.ismini bile hazırlamışım.yardımcı olur musun??? o zaman bu prog. ben de kullanabilirim:))



Yorum Yazın