Serpito » jQuery http://www.serpito.com Güncel Teknoloji ve Yazılım Blogu Fri, 03 Feb 2012 11:44:15 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Yeni Başlayanlar İçin jQuery – Bölüm 2 http://www.serpito.com/yeni-baslayanlar-icin-jquery-bolum-2/ http://www.serpito.com/yeni-baslayanlar-icin-jquery-bolum-2/#comments Sat, 18 Jun 2011 18:58:37 +0000 yedincisenol http://www.serpito.com/?p=1379 read more »]]> jQuery’de Olaylar

Önceki bölümde de belirttiğim gibi, javascript olay temelinde çalışır. Bir işlemin yapılası için bir olay gerçekleşmeli. jQuery’de tanımlı olaylardan bazıları;

  • click(): Bir elemana tıklanma olayı
  • mouseOver(): Fare üstüne gelme olayı
  • moseOut(): Fare üstünden ayrılma olayı
  • toggle(): 2 tık. Fare bir tıklayınca 1., ikinci tıklayışında da 2. fonksiyonu çalıştırır.
  • change(): Bir “select box” nesnesindeki, seçili elemanın değişmesi
  • trigger(): Tetikçi. Bir olay çalıştığında başka bir olayı tetikler.

Tüm olaylar: http://api.jquery.com/category/events/

Ortak kullanımlarıı parantezlerin içine “function(){}” yazımıdır. Süslü parantezlerin içine, olay gerçekleştiğinde çalışacak kodları yazmalısınız. Toggle fonksiyonunda ise iki defa “function(){}” yazmalı ve aralarına “,” koymalısınız.

Örnek Kullanım


$(‘#akilli’).click(function(){
   alert(‘Akıllı ol, aklını almıyayım!’);
}) // Bu kod ile, “akilli” id değerine sahip elemana tıklandığında ekrana “Akıllı ol, aklını almıyayım!” uyarısını verir.

$(‘.cakal’).toggle(function(){
   alert(‘ilk tık’);
},function(){
   alert(‘ikinci tik’)
}) // Bu kod ile “cakal” class değerine sahip elemana ilk tıklandığında “ilk tık”, ikinci tıklandığında da “ikinci tik” uyarısını görüntüler. Üçüncü tıkta da tekrar birinci, dördüncü tıkta da ikinci mesajı verir. Böyle uzayıp gider... :)

jQuery’de Efektler

En zevkli işlerden biridir Efekt olayları. Onlar da basit, merak etmeyin! :)
fadeOut(): Nesnenin görünürlüğünü azaltır.
fadeToggle(): Nesenin görünürlüğünü azaltır-artırır.
slideTogge():Yaşağı – Yukarı slayt efekti
show(): Nesneyi gösterir.
hide(): Nesneyi gizler.

Tümü: http://api.jquery.com/category/effects/

Örnek Kullanımlar


$(‘.saklan’).click(function(){
   $(‘#beniSakla’).fadeOt(‘slow’); // “saklan” sınıfına sahip elemana tıklandığında, “beniSakla” id değerine sahip elemanın görünürlüğü azalarak kaybolur. ‘slow’ yazan yere, “normal” ya da ‘fast’ değeri verebilirsiniz.
})

$(‘.tıkla’).click(function(){
   $(‘#oyna’).slideToggle(‘slow’); // “tikla” classına sahip elemana tıklandığında, “oyna” 	id sine sahip elemanı durumuna göre önce aşağıya doğru açar, sonraki tıklamada yukarı doğru kapatır.
}):

Bir sonraki bölümde görüşmek üzere…

]]> http://www.serpito.com/yeni-baslayanlar-icin-jquery-bolum-2/feed/ 4 Jquery Image Slider (Image Rotator) http://www.serpito.com/jquery-image-slider-image-rotator/ http://www.serpito.com/jquery-image-slider-image-rotator/#comments Sun, 06 Mar 2011 18:23:11 +0000 sword fish http://www.serpito.com/?p=1301 Sayfalarımızda slider geçişi için kullana bileceğimiz oldukca estetik ve işlevsel bir jquery slider örneği.

Örneğimizi kecioren.bel.tr ‘ın ana sayfasında ve tarimonline.net sayfasında kullanmış bulunmaktayım ;) .

Download

]]> http://www.serpito.com/jquery-image-slider-image-rotator/feed/ 3 Jquery Fancy Sliding Form (Jquery Form) http://www.serpito.com/jquery-fancy-sliding-form-jquery-form/ http://www.serpito.com/jquery-fancy-sliding-form-jquery-form/#comments Fri, 04 Mar 2011 13:13:42 +0000 sword fish http://www.serpito.com/?p=1297 read more »]]> Jquey web geliştiriciler için oldukca kullanışlı bir kütüphane. Jquery bazen hayal gücü sınırlarımız zorlamamıza neden olmakta. Sistemlerimizde kullana bileceğimiz insan kaynakları, iletişim, sipariş vb formları bugunkü örnegimizle dahada geliştire bilir ve hızlı çözümler sunabiliriz.

 

Örnğimiz 5 tablı bir jquery form niteliğinde. Her tabda alanların doldurmamız gerekmekte doldurmadıgımız takdırde en sun bölümde gönder dediğimizde java script uyarıs karşımıza geliyor ve boş geçmiş olduğumuz alanlar açık pembe ile belirgin hale geliyor. Boş geçilen alanlar tab içerisinde oldugunda fark edilmesi güç bunu önlemek içinde tabların üzerine bir sonraki taba geçildiginde ikon beliriyor ve bu ikona göre nerede hata yapmış olduğumuzu görebiliyoruz.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fancy Sliding Form with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"/>
<meta name="description" content="Fancy Sliding Form with jQuery" />
<meta name="keywords" content="jquery, form, sliding, usability, css3, validation, javascript"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="sliding.form.js"></script>
</head>
<style>
span.reference{
position:fixed;
left:5px;
top:5px;
font-size:10px;
text-shadow:1px 1px 1px #fff;
}
span.reference a{
color:#555;
text-decoration:none;
text-transform:uppercase;
}
span.reference a:hover{
color:#000;

}
h1{
color:#ccc;
font-size:36px;
text-shadow:1px 1px 1px #fff;
padding:20px;
}
</style>
<body>
<div id="content">
<div id="wrapper">
<div id="steps">
<form id="formElem" name="formElem" action="" method="post">
<fieldset>
<legend>Hesap</legend>
<p>
<label for="username">Kullanıcı Adınız</label>
<input id="username" name="username" />
</p>
<p>
<label for="email">E posta</label>
<input id="email" name="email" placeholder="info@tympanus.net" type="email" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="password">Şifre</label>
<input id="password" name="password" type="password" AUTOCOMPLETE=OFF />
</p>
</fieldset>
<fieldset>
<legend>Kişisel Bilgiler</legend>
<p>
<label for="name">Adınız</label>
<input id="name" name="name" type="text" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="country">Ülke</label>
<input id="country" name="country" type="text" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="phone">Telefon</label>
<input id="phone" name="phone" placeholder="e.g. +351215555555" type="tel" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="website">Website</label>
<input id="website" name="website" placeholder="e.g. http://www.gumusluoglu.com" type="web" AUTOCOMPLETE=OFF />
</p>
</fieldset>
<fieldset>
<legend>Ödeme</legend>
<p>
<label for="cardtype">Kart</label>
<select id="cardtype" name="cardtype">
<option>Visa</option>
<option>Mastercard</option>
<option>American Express</option>
</select>
</p>
<p>
<label for="cardnumber">Kart Numarası</label>
<input id="cardnumber" name="cardnumber" type="number" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="secure">Güvenlik Kodu</label>
<input id="secure" name="secure" type="number" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="namecard">Kart üzerindeki isim</label>
<input id="namecard" name="namecard" type="text" AUTOCOMPLETE=OFF />
</p>
</fieldset>
<fieldset>
<legend>Ayarları</legend>
<p>
<label for="newsletter">Bülten</label>
<select id="newsletter" name="newsletter">
<option value="Daily" selected>Günlük</option>
<option value="Weekly">Haftalık</option>
<option value="Monthly">Aylık</option>
<option value="Never">Asla</option>
</select>
</p>
<p>
<label for="updates">Güncellemeler</label>
<select id="updates" name="updates">
<option value="1" selected>Paket 1</option>
<option value="2">Paket 2</option>
<option value="0">Güncelleme istemiyorum</option>
</select>
</p>
<p>
<label for="tagname">Bülten Etiket</label>
<input id="tagname" name="tagname" type="text" AUTOCOMPLETE=OFF />
</p>
</fieldset>
<fieldset>
<legend>Gönder</legend>
<p>
Tüm alanların dolu olup olmadıgını kontrol ediniz.
</p>
<p>
<button id="registerButton" type="submit">Kayıt Ol</button>
</p>
</fieldset>
</form>
</div>
<div id="navigation" style="display:none;">
<ul>
<li>
<a href="#">Hesap</a>
</li>
<li>
<a href="#">Kişisel Bilgiler</a>
</li>
<li>
<a href="#">Ödeme</a>
</li>
<li>
<a href="#">Ayarlar</a>
</li>
<li>
<a href="#">Gönder</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

]]> http://www.serpito.com/jquery-fancy-sliding-form-jquery-form/feed/ 0 Tüm Jquery cheat Sheetler (Jquery Kopya Kağıtları) http://www.serpito.com/tum-jquery-cheat-sheetler-jquery-kopya-kagitlari/ http://www.serpito.com/tum-jquery-cheat-sheetler-jquery-kopya-kagitlari/#comments Tue, 29 Jun 2010 11:55:50 +0000 stncweb http://www.serpito.com/?p=1132 read more »]]> jquery ile çalışırken hepimizin zaman zaman jquery olayları ve fonksiyonları ile ilgili yardıma ihtiyacı olur işte tam burada devreye Jquery cheat Sheet’ler  girer.

TÜm Jquery Cheatleri buraya topladım umarım işinize yarar.

En son verison 1.4 un ki: http://www.futurecolors.ru/jquery/

jQuery 1.1.3

İndirme linki

jQuery 1.3.2 :http://www.javascripttoolbox.com/jquery/cheatsheet/

jQuery 1.3 Visual Cheat Sheet

http://woork.blogspot.com/2009/09/jquery-visual-cheat-sheet.html

İndirme linki : http://woorkup.com/wp-content/uploads/2009/09/jQuery-Visual-Cheat-Sheet-by-WOORK.pdf

jq version 1.2:  http://colorcharge.com/jquery/

ve birde burada

http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/

ayrıca :jquery UI içinde var : http://oscarotero.com/jquery/ui.html

aynı zamanda buradaki görsel anlatımlarda işinize yarayablir,

http://visualjquery.com/

eğer aptana kullanıyorsanız ,bu sitedeki bilgiler aptana için eklenti olarak geliyor.

]]> http://www.serpito.com/tum-jquery-cheat-sheetler-jquery-kopya-kagitlari/feed/ 2 Ajax script arşivi – ajaxdude.com http://www.serpito.com/ajax-script-arsivi-ajaxdude-com/ http://www.serpito.com/ajax-script-arsivi-ajaxdude-com/#comments Wed, 05 May 2010 14:27:13 +0000 Atilla Akoğlu http://www.serpito.com/?p=1063 read more »]]> Ajaxdude.comWeb geliştiriciler için  script uyarlamak veya örnek uygulama araştırmak gereğinden fazla vakit alan bir eylemdir. Uzun zamandır elimde biriken Ajax, jQuery eklentileri yayınlamak ve kamunun hizmetine açmak düşüncesiyle ajaxdude.com adında bir domain üzerinde basit bir proje yayınladım.

Etiket sistemiyle navigasyonu imkanı veren bu sistemde, şuan için 106 farklı script uygulaması bulunmaktadır. Her uygulamanın demo adresi ve kaynak adresi detaylarında paylaşılmaktadır.

Ajaxdude.com navigation

Ajaxdude.com - Latest Ajax Scripts, demos

Web geliştiriciler için faydalı olacağını düşündüğüm bu proje için global yapmayı daha uygun gördüm. Ortalama bir kullanın da rahatça anlayabileceği basit ingilizce var zaten.

İlerleyen zamanlarda daha farklı eklenti ve opsiyon eklemeyi düşünüyorum. Şimdilik web dünyasında işe yarar ve popüler olan bütün Ajax – jQuery scriptlerini bu adreste bulabileceksiniz.

Adres için buradan buyrun

]]> http://www.serpito.com/ajax-script-arsivi-ajaxdude-com/feed/ 3 Jquery Image Mouse Effect http://www.serpito.com/jquery-image-mouse-effect/ http://www.serpito.com/jquery-image-mouse-effect/#comments Wed, 14 Apr 2010 14:21:03 +0000 sword fish http://www.serpito.com/?p=1057 read more »]]> Web sitelerimizde, kişisel bloglarımızda, formlarımızda veya portallarımızda yer alan resimlerimiz açıklamalarını jquery yardımı ile görselleştirebiliriz, daha kullanışlı bir hale getirebiliriz.


Resmimizin üzerine mause ile gelindiginderesimin üst ve alt kısımlarında bölümlerimiz açılıyor ve resim hakkında bilgilerimiz bu bölüm aracılıyığla yayınlamış oluyoruz.
index.html kodlarımız


&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en-GB&quot;&gt;
&lt;head&gt;
&lt;title&gt;Gumusluoglu.Com&lt;/title&gt;
&lt;link type=&quot;text/css&quot; href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jqueryui.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/mojo.js&quot;&gt;&lt;/script&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-9&quot;&gt;&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;container&quot;&gt;
        &lt;div class=&quot;bblock&quot;&gt;

            &lt;div class=&quot;item&quot;&gt;
        		&lt;div class=&quot;title&quot;&gt;Dilmen.Net&lt;/div&gt;
        		&lt;img src=&quot;images/tf.jpg&quot; alt=&quot;Image&quot; /&gt;
       			&lt;div class=&quot;desc&quot;&gt;Aykut Dilmen'ni kişisel fotograf sitesi.&lt;/div&gt;
    	    &lt;/div&gt;

            &lt;div class=&quot;item last&quot;&gt;
                &lt;div class=&quot;title&quot;&gt;Bemtashali.Com&lt;/div&gt;
                &lt;img src=&quot;images/cc.jpg&quot; alt=&quot;Image&quot; /&gt;
                &lt;div class=&quot;desc&quot;&gt;Bemtaş Halı LTD. ŞTİ. resmi web sitesi.&lt;/div&gt;
            &lt;/div&gt;
		&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.
Uygulamanın çalışır demosunu incelemek için tıklayınız.

]]> http://www.serpito.com/jquery-image-mouse-effect/feed/ 2 Jquery: Date Picker (Takvim) uygulaması http://www.serpito.com/jquery-date-picker-takvim-uygulamasi/ http://www.serpito.com/jquery-date-picker-takvim-uygulamasi/#comments Thu, 08 Apr 2010 06:55:14 +0000 Atilla Akoğlu http://www.serpito.com/?p=1038 read more »]]>
Web sitelerimizde kullanıcılarımız tarih işlemleri yaparken tarihleri uygun bir biçimde yazmaları ve bizimde sorgularımız bu dogrultuda yapmamız gerekir. Tarih işlemleri i “Jquery Date Pick’i ” kullanabiliriz. İnput alanımız aktif edildiği anda karşımızı bir takvim geliyor ve bu alandan sitediğimiz tarihi seçebiliyoruz.

Dosyamıza jsDatePick.min.1.1.js dosyamızı ve jsDatePick.css stil dosyamızı ekliyoruz, ardından aşagıda yer alan javascript kodumuzu yazıyoruz ve input id inputField aktif edildiğinde karşımızam tarhi seçimi yapacağımız takvimimiz geliyor.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gumusluoglu.Com || JsDatePick Javascript</title>
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick.css" />
<script type="text/javascript" src="jsDatePick.min.1.1.js"></script>
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"inputField"
});
};
</script>
</head>
<body>
<input type="text" size="12" id="inputField" />
</body>
</html>

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

]]> http://www.serpito.com/jquery-date-picker-takvim-uygulamasi/feed/ 6 Jquery: Screenshot Preview (Url bağlantısında site görünümü gösterme) http://www.serpito.com/jquery-screenshot/ http://www.serpito.com/jquery-screenshot/#comments Fri, 26 Feb 2010 09:51:31 +0000 sword fish http://www.serpito.com/?p=949 read more »]]> Sistemlerimizde yer alan linkler linklerin açıklamalarını yazı şeklinde yapabildiğimiz gibi Screenshot (Ekran Resmi) şeklindede yapabiliriz. Bu sayede kullanıcıların daha iyi bilgilendirilmesini sağlayabiliriz.Örneğimizde jquery ile screenshot önizlemesi yapıyoruz.


index.html kodlarımız


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Screenshot Önizleme</title>
<meta name="description" content="Easiest jQuery Tooltip Ever">
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</meta>
<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}

h1{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
</style>
</head>
<body>
<h1>jQuery Screenshot Önizleme</h1>
<p>Aykut Dilmen'in Kişisel Sitesi <a href="http://www.dilmen.net" target="_blank" rel="cssg_screenshot2.jpg" title="Aykut Dilmen">Dilmen.Net</a></p>

<p>Atilla Akoğlu'nun Kişisel Sitesi <a href="http://www.cssglobe.com" target="_blank" rel="cssg_screenshot1.jpg">Serpito.Com</a> </p>
<p>Mülsüm Gümüşlüoğlu'nun Kişisel Sitesi <a href="http://www.gumusluoglu.com" target="_blank" rel="cssg_screenshot.jpg" title="Müslüm Gümüşlüoğlu">Gumusluoglu.Com</a></p>
</body>
</html>

 

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

]]> http://www.serpito.com/jquery-screenshot/feed/ 3 Jquery: CSS: Drop Down Menü http://www.serpito.com/jquery-css-drop-down-menu/ http://www.serpito.com/jquery-css-drop-down-menu/#comments Thu, 25 Feb 2010 13:20:42 +0000 sword fish http://www.serpito.com/?p=939 read more »]]>

Sitelerimizde yer alan açılır menüleri oluşturmak kullanmak kadar kolay ve zevklidir. ul etikeni açıyoruz ve ana menü başlıklarını li etiketi içerisine yazıyoruz.


<ul class="dropdown">
<li><a href="#">Konu Başlıkları</a></li>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Hakkımızda</a></li>
</ul>

Yukarıdaki kodlar ile sadece yan yana linklerimiz dizmiş oluyoruz, alt menü eklenmemiş halde. Ana menümüze alt menü eklemeye geldi sıra


        <ul class="dropdown">
        	<li><a href="#">Konu Başlıkları</a>
        		<ul class="sub_menu">
        			 <li><a href="http://www.gumusluoglu.com/kategori/css/">CSS</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/genel/">Genel</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/javascript/">Javascript</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/jquery/">Jquery</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/mysql/">MYSQL</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/php/">Php</a></li>
        		</ul>
        	</li>
        </ul>

Konu başlıkları menüsünün üzerine geldiğimizde CSS, Genel, Javascript, Jquery, MYSQL ve Php menüleri açılıyor.Konu başlıkları menümüze alt menü eklemek için Konu Başlıkları’nın yer aldığı li etiketini kapatmadan önce class’ı sub_menu olan bir ul açıyoruz ve alt menü içeriklerini li etiketleri arasına yazıyoruz, alt menüleri oluşturduktan sonra ul etiketimizi ve Konu Başlıklarının yer aldığı li yi kapatıyoruz. En son olarakda ana ul mizi kapatıyoruz ve alt menülerimiz oluşuyor.
Örneğimizi biraz daha geliştirelim ve iki ana menü altında alt menülerimizi oluşturalım.


        <ul class="dropdown">
        	<li><a href="#">Konu Başlıkları</a>
        		<ul class="sub_menu">
        			 <li><a href="http://www.gumusluoglu.com/kategori/css/">CSS</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/genel/">Genel</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/javascript/">Javascript</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/jquery/">Jquery</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/mysql/">MYSQL</a></li>
        			 <li><a href="http://www.gumusluoglu.com/kategori/php/">Php</a></li>
        		</ul>
        	</li>
        	<li><a href="#">CSS</a>
        		<ul class="sub_menu">
        			<li><a href="http://www.gumusluoglu.com/kategoriler/link-ile-form-submit/">Link İle Form Submit</a></li>
        			<li><a href="http://www.gumusluoglu.com/kategoriler/jquery-text-to-image/">Jquery Text to İmage</a></li>
        			<li><a href="http://www.gumusluoglu.com/kategoriler/css-from-ornegi/">Css From Örneği</a></li><li>
        		</ul>
        	</li>
        </ul>

Konu başlıkları ve CSS ana menüleri altında alt menüler oluşturmuş olduk. Konu Başlıkları ana menüsü altında; CSS, Genel, Javascript, Jquery, MYSQL ve Php, CSS ana menüsü altında ise; Link İle Form Submit, Jquery Text to İmage ve Css Form Örneği alt menülerini oluşturduk.

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

]]> http://www.serpito.com/jquery-css-drop-down-menu/feed/ 2 PHP:Jquery: Image Crop Thumbnail (JCrop) http://www.serpito.com/php-jquery-image-crop-thumbnail/ http://www.serpito.com/php-jquery-image-crop-thumbnail/#comments Wed, 24 Feb 2010 09:41:29 +0000 Atilla Akoğlu http://www.serpito.com/?p=910 read more »]]>

Kullanıcıların profil resimlerini diledikleri ölçüde kesip küçültmelerini sağlayacak bir uygulama geliştirelim. Bir Jquery eklentisi olan Jcrop ile bu işlemi çok pratik bir şekilde yapabiliyoruz.

Uygulama için basit bir index.html dosyası oluşturuyoruz.

index.html


<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="jquery.Jcrop.js"></script>
<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demos.css" type="text/css" />

<script language="Javascript">

$(function(){

$('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords
});

});

function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};

function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>

<div id="outer">
<div>
<div>

<h1>Serpito.com - JCrop Demo</h1>

<!-- This is the image we're attaching Jcrop to -->
<img src="antalya.jpg" id="cropbox" />

<!-- This is the form that our event handler fills -->
<form action="crop.php" method="post" onSubmit="return checkCoords();">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" id="res" name="res" value="antalya.jpg" />

<input type="submit" value="Resimi Kes" />
</form>

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

</body>

</html>

&nbsp;

&nbsp;

Hidden inputlardan oluşan formun submit edildiğinde veri göndereceği crop.php dosyasını kodlayalım.

crop.php


<?php
error_reporting(E_ERROR);
//print_r($_POST);
$targ_w = $_POST['w']-$_POST['x'];
$targ_h = $_POST['h']-$_POST['y'];

$jpeg_quality = 90;

$src = $_POST['res'];
$s=explode(".",$_POST['res']);
$resim=$s[0]; //resimin ismini aliyoruz

$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],$targ_w,$targ_h,$_POST['w'],$_POST['h']);

header('Content-type: image/jpeg');
imagejpeg($dst_r, "image/".$resim."_thumb.jpg", $jpeg_quality);

?>]

&amp;nbsp;

crop.php ye gönderilen resim üzerindeki kesim noktalarının kordinatları ve x-y uzunlukları crop.php dosyasında imagecopyresampled fonksiyonu tarafından işleniyor.

Yukarıdaki görselde denediğim uygulamanın sonucunda images dizininde antalya_thumb.jpg resimini aşağıda görebilirsiniz.

php jqery crop thumbnails

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

]]> http://www.serpito.com/php-jquery-image-crop-thumbnail/feed/ 3