Web sitesinde küçük görünen resimlere tıklayınca aynı pencerede yeni bir çerçeve içerisinde resimlerin daha büyük boyunu göstermeye yarayan bir çok uygulama var.  Yanılmıyorsam FlowPlayer uygulamasının geliştiricileri tarafından bu ve bunun gibi bir çok işlemi tek bir Javascript kütüphanesi kullanarak kolaylıkla yapmanızı sağlayan mini bir kütüphane geliştirilmiş.  Tab, form, form doğrulama, slayt, input değer  belirleme gibi daha birçok tasarımı kolaylık yapabiliyorsunuz bu mini Javascript kütüphanesi yardımıyla. İlerleyen zamanlarda fırsat  buldukça sizlere bu örneklerin kullanımı hakkında teker teker konu açmayı planlıyorum.

Overlay başlığı eklediğim bu yazıdaki anlatımlar ile kolaylıkla sitenizdeki resimlere zoom efekti uygulayabilirsiniz. Aslında tam anlamıyla zoom efekti demek biraz yanlış olur. Ana ekranda küçük boy bir fotoğraf görüntüleniyor ve tıkladığınızda fotoğrafın daha büyük olanı arkaplanı gölgeli olan bir çerçeve içinde açılıyor. jQuery Tools kütüphanesini dilerseniz buradan indirip kendi sunucunuza yükleyebilirsiniz yada aşağıda verdiğim gibi direk geliştirici sitesinden de çekip kullanabilmeniz mümkündür.

Kullanım

• Head etiketleri arasına eklenmesi gereken bölümler.

Js dosya adresi :

<script src="https://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

Stil :

<style>
  #triggers {
  text-align:center;
  }

  #triggers img {
  cursor:pointer;
  margin:0 5px;
  background-color:#fff;
  border:1px solid #ccc;
  padding:2px;

  -moz-border-radius:4px;
  -webkit-border-radius:4px;

  }
  .details {
  position:absolute;
  top:15px;
  right:15px;
  font-size:11px;
  color:#fff;
  width:150px;
  }

  .details h3 {
  color:#aba;
  font-size:15px;
  }
.simple_overlay {
    display:none;
    z-index:10000;
    background-color:#333;
    width:675px;
    min-height:200px;
    border:1px solid #666;
    -moz-box-shadow:0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;
}
.simple_overlay .close {
    background-image:url(close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
}</style>

JavaScript :

<script>
  $(document).ready(function() {
      $("img[rel]").overlay();
    });
</script>

• Body  etiketleri arasıa eklenmesi gereken bölüm.

Html :

<div id="triggers">
  <img src="img1.jpg" rel="#mies1"/>
  <img src="img2.jpg" rel="#mies2"/>
</div>

<!-- overlays -->
<div class="simple_overlay" id="mies1">
  <img src="img1.jpg" />

  <div class="details">
    <h3>The Barcelona Pavilion</h3>
    <h4>Barcelona, Spain</h4>
    <p>
      The Barcelona Pavilion, designed by Ludwig Mies van der Rohe,
      was the German Pavilion for the 1929 International Exposition in
      Barcelona, Spain. It was an important building in the history of
      modern architecture.
    </p>
    <p>
      Several critics, historians and modernists have declared it "the
      most beautiful building of the century"
    </p>
  </div>
</div>

<div class="simple_overlay" id="mies2">
  <img src="img2.jpg" />
  <div class="details">
    <h3>The Barcelona Pavilion</h3>
    <h4>Barcelona, Spain</h4>
    <p>
      Another unique feature of this building is the <em>exotic
      materials Mies chose to use</em>.
    </p>
    <p>
      Plates of high-grade stone materials like veneers of Tinos verde
      antico marble and golden onyx as well as tinted glass of grey,
      green, white, in addition to translucent glass, perform
      exclusively as spatial dividers.
    </p>
  </div>
</div>