jQuery ile foto-kaydır galeri

Bize dinamik bir web tasarımı sunan jquery dili ile hazırlanmış olduğun foto-kaydır verdiğim bir eklentiden bahsedeceğim. Malum günümüzde artık javascript dili web tasarımları için vazgeçilmez hale gelmiş durumda, özelliklede görsellik ve dinamikliği istiyorsak. Bu eklenti sayesinde kendinize kullanışlı bir foto galeri yapabilirsiniz. Hatta küçük değişikliklerle isterseniz bunun farklı versiyonlarını geliştirebilirsini, mesela resimler yerine sizin yazmış olduğunuz güzel sözler yer alabilir.
Lafı uzatmaya gerek yok diyorum ve eklentinin özelliklerine ve tasarıma eklenmesi hakkında bilgi vermeye geçiyorum.
Özellikleri ve kullanımı;
Kurulumunu tamamlayacağınız eklentiyi aşağıdaki resimde gördüğünüz gibi yerleştirdiğiniz resimlerin veya fotoğrafların üst kısmında yer alan kendilerine ait numaralar sayesinde, üzerilerine tıklayarak görüntüleme sağlayabilirsiniz.

Sayfanız ilk açıldığında 1 numaralı resim otomatik olarak görüntülenecektir.

İsterseniz resimlerinizi farenizin tekerlek kısmı ile sağa-sola kaydırarak görüntüme imkanınızda var.
 

Ya da sayfa yerleştirmiş olduğunuz resimlerin alt kısmında bulunun fare ile tutup kaydırabileceğiniz bir kısım ile resimlerinizi değiştirebilirsiniz.

Kurulum;
Öncelikle eklentinin kurumu için gerekli aşağıdaki bağlantıdan indirin.

İndirdiğiniz .zip’li dosyayı çıkarın; panel ve resim adlı iki klasörüde blogunuzun tema klasörünün içine gönderin.
Eklentiyi kullanıma geçirmek için asıl bölüme geldi sıra; Kodlama.
Öncelikle temamıza ait “header.php” dosyamızı açıyoruz,  <head> ve </head> tagleri arasına aşağıdaki kodları yapıştırıyoruz.

<!-- header.php içine başlangıç -->
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Besleme" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/panel/jScrollHorizontalPane.css" />

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/panel/lib/jQuery/jquery-1.2.1.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/panel/lib/jQuery/jquery.dimensions.js"></script>

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/panel/lib/jQuery/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/panel/jScrollHorizontalPane.js"></script>
<script type="text/javascript">

$(function() {
 var originalSizes = new Array();
 $('#pane5').jScrollHorizontalPane({scrollbarHeight:10, scrollbarMargin:0});
 // this initialises the demo scollpanes on the page.

$('a.jumper').click(function(){
  var pos = $(this).attr('id');
  var c = $("#pane5");
  c[0].scrollTo("li:eq("+pos+")");
  return false;
 });
});

</script>
<!-- header.php içine bitiş -->

Bu kodlar sayesinde temamıza gerekli .js ve .css dosyalarımızı çağırmış olduk. Bu arada bir de küçük bir “script” kodunuda eklemiş olduk.

Şimdi gelelim sayfamızda eklentinin görüntülenmesine, aşağıdaki hazırlamış olduğum kodları eklentinin görüntülenmesini istediğiniz yere yapıştırıyorsunuz, mesela “sidebar.php” dosyasının içine.

<!-- index.php içine başlangıç -->

<CENTER>
<a class="jumper" id="0" href="#">1</a> |
<a class="jumper" id="1" href="#">2</a> |
<a class="jumper" id="2" href="#">3</a> |
<a class="jumper" id="3" href="#">4</a> |
<a class="jumper" id="4" href="#">5</a> |
<a class="jumper" id="5" href="#">6</a> |
<a class="jumper" id="6" href="#">7</a> |
<a class="jumper" id="7" href="#">8</a> |
<a class="jumper" id="8" href="#">9</a> |
<a class="jumper" id="9" href="#">10</a> |
<a class="jumper" id="10" href="#">11</a> |
<a class="jumper" id="11" href="#">12</a> |
<a class="jumper" id="12" href="#">13</a> |
<a class="jumper" id="13" href="#">14</a>
<div class="holder">
 <div id="pane5" class="scroll-pane">
  <ul class="blocks">

<li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/1.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/2.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/3.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/4.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/5.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/6.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/7.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/8.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/9.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/10.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/11.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/12.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/13.png"/>
  </li>
  <li>
  <img src="<?php bloginfo('template_directory'); ?>/resim/14.png"/>
  </li>

</ul>

</div>
</div>
</CENTER>

<!-- index.php içine bitiş -->

Evet şuan itibariyle bir jquery ile desteklenen bir galeriye sahip olmanız gerekiyor.
Ancak bunun boyutlarını 250*200 olacak şekilde ayarladığım için bazı arkadaşlar boyutlarda değişiklik yapmak isteyebilirler. Bunun için aşağıda gerekli bilgileri vereceğim.

Boyutları Değiştirme

“panel” adlı klasörümüzün içinde bulunan “jScrollHorizontalPane.css” sitil dosyamızı açıyoruz.
Eğer görüntülemek istediğimiz resimlerin enine genişlemesini istiyorsak aşağıdaki bölümde değişiklik yapmamız gerek.

ul.blocks li {
 width: 250px; /*Bu boyut, görüntülemek istediğimiz enine olan büyüklüktür. */
 margin: 0 0 0 0px;
 float: left;
 display: block;
 height: 200px;
}

Bu değişikliği yaptıktan sonra aşağıdaki bölümde de yapmanız gereken bir değişiklik olacak.

ul.blocks {
 padding: 0;
 width: 3500px; /*Genel Boyut-Bu boyut yukarıdaki yapmış olduğunuz genişliğin 14 katı olması gerekir*/
 display: block;
 height: 250px;
}

Bu değişikliği yapmanız gerekir, çünkü tıklandığında doğru resime gitmemizi sağlayan genel boyut budur. Eğer resim sayısıyla oynarsak bu miktar yine değişikli gösterecektir. Aşağıda bunu formüle edelim.

Resim Boyutu X Resim Miktarı = Genel Boyut

Değişliği sadece yükseklik boyutunda yapmak istiyorsak, bunun için sadece aşağıdaki kodda değişiklik yapmamız yeter. Bunun için ayrıca bir başka kodda değişikliğe gerek yoktur.

#pane5 {
 height: 200px; /*Bu boyut bize yükseklik olarak değişikliği saylıyor.*/
 width: 50%;
 padding: 0;
 display: block;
 _overflow: hidden;
}

Eğer görüntülediğiniz galeride farenin hassasiyetini ya da tıkladığınız numaraya air resime gitme hızı ayarlamak istiyorsanız “panel/jScrollHorizontalPane.js” dosyasını açınız ve 80nci satıra gidiniz. Aşağıdaki kodlarda değişiklik yapacağız.

 

settings = jQuery.extend(
  {
  scrollbarHeight : 10,
  scrollbarMargin : 5,
  wheelSpeed : 18, //farenin tekerleğine olan hassasiyeti ayarlar.
  showArrows : false,
  arrowSize : 10,
  animateTo : false,
  dragMinWidth : 1,
  dragMaxWidth : 99999,
  animateInterval : 100, //tıklanan numaraya ait resime giderken uygulanan hız.
  animateStep: 3,
  maintainPosition: true,
  resize: true,
  minimumWidth: 200,
  reset: false
  }, settings
 );

Diğerlerinde herhangi bir değişiklik yapmaya gerek yok.
Mümkün oldukça açık ve basit anlatmaya çalıştım. Umarım faydalı olmuştur.
Not: Bu eklentinin benzerleri yada aynı işlevi gören çeşitleri haber sitlerinde rastlamak mümkündür.
Kısa bir not daha: Bu makaleyi bitirdiğimde saat 03.42’yi gösteriyordu. 🙂

Veysel

Veysel

Sosyal Medya ve İnternetteki gelişmeleri inceleyen, Web Tasarım Araçları, CMS(İçerik Yönetim Sistemi)leri, özellikle WordPress üzerine haberleri araştıran, 2007 yılında yayın hayatına başlayan SanalDuvar.Com'un yöneticisidir. Ana Bilim Dalı Elektrik-Elektronik Mühendisliği olan bir Sistem Mühendisidir.

You may also like...

6 Responses

  1. Sarp dedi ki:

    merhaba final ödevim için bir jquery uygulamalı web tasarım yapmam gerekli fakat bunu front page de yapmalıyım vermiş oldugunuz bilgiler ile front page uzerinde bir tasarım olusturulabilir mi ? ve birde jquery menü ile ilgili bana ulaşabilirmisiniz sarpich@hotmail.com

    • Veysel Veysel dedi ki:

      @Sapr
      mevcut jquery çalışmasını html ile sayfasnıza yerleştirmeniz mümkün. zaten kodlar ve yapılışını yukarıda verdim.

  2. Weel dedi ki:

    Burda indirilcek dosya yok:S

    • Veysel Veysel dedi ki:

      Dosya ekte mevcut. GoogleSites ile barındırıldığı için zamanında, şuan göremeye bilirsiniz. DNS ayarlarını Google' a göre ayarladığınızda göreceksiniz.

  3. web tasarım dedi ki:

    benim favorim apple sitesinin ürün slider uygulaması.. Ama bu da başlangıç için güzel.

  4. hakan1 dedi ki:

    merhaba ben sidebarsingle a koydum kodu fakat 1-2-3 şeklinde çalışmadı neden acaba sitemde hala aktif eklenti bakabilir misiniz

Bir cevap yazın

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.