İlgiselcom » JQuery Framework http://ilgisel.com/blog İlgi alanlarına dair konular Wed, 04 Jan 2012 19:47:02 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Birbirinden kullanışlı Jquery Uygulamaları http://ilgisel.com/blog/yazi/birbirinden-kullanisli-jquery-uygulamalari/ http://ilgisel.com/blog/yazi/birbirinden-kullanisli-jquery-uygulamalari/#comments Thu, 22 Oct 2009 11:20:23 +0000 Degre http://ilgisel.com/blog/?p=1935 Bu yazı internet üzerinde rastgeldiğim 20 Jquery uygulamasının sizlere takdimidir. Umarım burada bulunan uygulamalar web tasarımcıların işlerine yarar.

Jcrop

Jquery imaj kesme eklentisi

deepliquid

FancyBox

İmaj slide uygulaması

fancybox

PhotoSlider Tutorial

photoslider

Jquery Hover Sub Etiket Bulutu

hover

FastFind Menu Script

quick_navigation

Jquery File Tree

tree_menu

]]> http://ilgisel.com/blog/yazi/birbirinden-kullanisli-jquery-uygulamalari/feed/ 1 Jquery Foto Slideshow / Galeri Pluginleri (eklentileri) http://ilgisel.com/blog/yazi/jquery-foto-slideshow-galeri-pluginleri-eklentileri/ http://ilgisel.com/blog/yazi/jquery-foto-slideshow-galeri-pluginleri-eklentileri/#comments Fri, 09 Oct 2009 12:40:30 +0000 Degre http://ilgisel.com/blog/?p=1904 Gün ve gün Jquery Web 2.0 sitelerin vazgeçilmez elemanı olmaya adım adım ilerliyor. Jquery ile yapılmış Slideshow ve galeri eklentileri de bu aracın bir kısmı.

Jquery sayesinde oluşturulmuş eklentiler sayesinde, flash dışında efektler yaratabilen ve dinamik olarak çalışabilen sayfalar tasarlamak çok kolaylaşıyor. Fazla söze gerek yok aşağıdaki eklentileri tek tek görelim.

jQuery Multimedia Portfolio

jquery01

Space Gallery

jquery0w

Jquery Slider Gallery

jquery03

EOGallery

jquery05

Jquery SlideViewer

jquery06

Jquery Lightbox Plugin

jquery07

Galleriffic

jquery08

PiroBox

jquery09

Zoomimage

jquery10

]]> http://ilgisel.com/blog/yazi/jquery-foto-slideshow-galeri-pluginleri-eklentileri/feed/ 0 Galleria – JQuery Resim Galerisi http://ilgisel.com/blog/yazi/galleria-jquery-resim-galerisi/ http://ilgisel.com/blog/yazi/galleria-jquery-resim-galerisi/#comments Sun, 19 Jul 2009 23:25:16 +0000 Degre http://www.dincerdegre.com/weblog/?p=152 Diğer seçenek ise AJAX yardımıyla bir Resim Galerisi Script’i bulmak. Bu devrede karşımıza JQuery ile oluşturulmuş Galleria resim galerisi Plugin’i çıkıyor.

JQuery, AJAX diye bilinen Javascript Framework’leri içinde adını duyurmuş iyi bir Framework, Galleria’da bu Framework ile yazılmış iyi ve sade bir eklenti. Galleria’yı kullanarak oldukça esnek ve istediğimiz şekilde bir resim galerisine sahip olabiliriz. Gerekli ayarları yaptığımızda ve eklentiyi tanıdıkça nasıl çalıştığını da daha iyi anlayacağız.

jquery-gallery

Eklenti, Büyük resim yüklendiğinde küçük halini bize gösteriyor. Preload yapısı ile oldukça hızlı yükleniyor. Galleria’da her küçük resme tıkladığımızda ilgili fotoğrafın büyük halini görüyoruz. Galleria eklentisini daha iyi anlamak için ilk önce özelliklerine bir gözatmakta fayda var.

Galleria’nın Özellikleri

  • Sade olarak yazılmış Javascript
  • Tarayıcı özelliklerine göre ayarlanan yapı
  • Dosya boyutu ufaklığı
  • Gerçek imaj yüklendiğinde gösterilen küçük imaj kopyası
  • CSS’le oynayarak Galeriyi kendine göre düzenleme
  • Hızlı resim yükleme
  • Resme bir isim ve açıklama atayabilme
  • Tarayıcı uyumluluğu

Galleria neye benzer?

Eklentiyi hazırlayanlar sistemin nasıl işlediğini şeklen görmemiz için iki demosunu vermişler. Bunlardan ilki siyah zemin üstüne bir yapıda bulunuyor. Demo 01′i görmek için tıklayınız. Diğeri ise beyaz zemin üzerine ve alt yerine solda küçük resimlerin bulunduğu bir yapıda bulunuyor. Demo 02′yi görmek için tıklayınız. Bunlar eklentinin yapabildiklerini gösteren demolar, CSS dosyaları ile oynayarak kendi yapımızı da oluşturabiliriz. Bu eklenti üzerindeki amatörlüğümüzü attıktan sonra yapacağımız iş olacak.

galleria

Kurulum

<link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>
<script type="text/javascript">
jQuery(function($) { $('ul.gallery').galleria(); });
</script>
  • Sırasız şekilde bir resim listesi oluşturun ve buna bir tanımlayıcı atayın (Ben class=’gallery’ kullandım)
  • CSS dosyası ile oynayarak galerinizin şeklini oluşturun.

Bu şekilde baktığınızda çok karışık gelebilir. Bence Demo’ların kod yapısını inceleyerek bu olayı çözmek en iyi ve en kolay yol olacaktır. Genelde benim yaptığımda bu oluyor. Böylece eklentiye daha hakim olunuyor.

Bu kadar mı? Başka kaynak yok mu?

Galleria ile ilgili daha fazla bilgiyi elbetteki eklentiyi oluşturan verecektir. Bunun için bir parça ingilizce gerekiyor olsa da, ben size güveniyorum ve biliyorum ki kodu ve sistemi orjinal kaynaktanda çözebilirsiniz. Galleria hakkında daha fazla bilgi almak için http://devkick.com/lab/galleria/ a gitmeniz gerekiyor. Sağlıcakla Kalın.

]]> http://ilgisel.com/blog/yazi/galleria-jquery-resim-galerisi/feed/ 1 Jquery’de Sekmeler http://ilgisel.com/blog/yazi/jqueryde-sekmeler/ http://ilgisel.com/blog/yazi/jqueryde-sekmeler/#comments Sat, 18 Jul 2009 23:19:08 +0000 Degre http://www.dincerdegre.com/weblog/?p=149 Görsel olarak Javascript bazlı değişimler yapmak için bir sürü Framework oluşturulmuş bulunmakta. Bu yazı ile Jquery ile sekme sisteminin nasıl yapıldığını anlayıp uygulayacaksınız.

Neye İhtiyacımız Var?

Basit bir Sekme sistemi oluşturacağımız için bize JQuery Framework Dosyası ve JQuery UI Javascript dosyaları gerekiyor. UI Downloader size hangi özellikleri kullanmak istediğinizi seçme olanağı tanıyor, bu aşamada ben sadece Tabs yani sekme bölümünü seçtim. Neler gerekli olduğunu öğrendiğimize göre artık işleme başlayabiliriz.

Başlangıçta Yapılacaklar

İlk işimiz indirdiğimiz Jquery dosyalarını HTML dosyamızın bulunduğu yere kopyalamak ve ilgili HTML dosyamız içinde </head> bölümünün hemen üstüne aşağıdaki kodları yapıştırmak.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery-tabs.js"></script>

Bir sonraki aşamamızda script’in döküman yüklendiğinde ne yapması gerektiğini yazıyoruz. diğer kodların hemen altına. Buradaki “#tabs” ilgili taşıyıcı div’in id’sidir.

<script>
$(document).ready(function()
{
	$("#tabs > ul").tabs();
});
</script>

Basitçe anlatmak gerekirse bu script bütün diğer dosyalar yüklendiğinde bir kereye mahsus çalışacak. Script’in istediğimiz yeri döküman içinden seçebilmesi için Div’in id olayı kullanıldı. Sistemi az çok anladığımıza göre şimdi içerik ekleyelim.

Sekmeleri Oluşturalım

Sekmeler birer div taşıyıcına bağlanacak, böylece istediğimizi script sayesinde gösterebileceğiz. Biraz önce div taşıyıcı olarak id’i “#tabs” olarak kullandığımız için burada da aşağıdaki gibi olacak.

<div id="tabs" class="tabs">
<ul>
	<li><a href="target"><span>Bir</span></a></li>
	<li><a href="target"><span>İki</span></a></li>
</ul>
</div>

Bilgiyi sekmelerin içine koymak için bir çok yol var. İlki ilgili sekmede göstermek istediğimiz bilgiyi sayfadaki farklı bir div’den çekebiliriz. Bunu yapmak için çekmek istediğimiz farklı div’in id’sini olması gerektiği gibi gerekli yere yazmalıyız. Diğer metottaysa sekmeyi div olarak deil dosya yani .html olarak çekmekten bahsedebiliriz.

Bu şekilde anlatıldığında anlamlı gelmese de yukarıdaki kodumuzu biraz değiştirerek ne demek istediğimizi anlatabiliriz.

<div id="tabs" class="tabs">
<ul>
	<li><a href="#example"><span>Örnek</span></a></li>
	<li><a href="another_file.html"><span>Diğer Dosya</span></a></li>
</ul>
        <div id="example">
        Birşeyler yazalım
        </div>
</div>

Bunu yaptıktan sonra aynı dizine birde another_file.html dosyası oluşturun ve içine aşağıdakini yazıp kaydedin.

<p>bu da diğer dosyadaki yazı</p>

HTML dosyasında yapmamız gerekenler bu kadardan ibaret. Şu anda basit şekilde oluşturulmuş sekmelerimiz bulunmakta. Bu dosyalara CSS yardımıyla şekil vermek size kalmış. Daha fazla bilgi için aşağıdaki ZIP’li dosyayı indirebilir veya demoyu inceleyebilirsiniz.

Jquery Sekme Demo

Jquery Sekme ZIP Indir

]]> http://ilgisel.com/blog/yazi/jqueryde-sekmeler/feed/ 1