bildirgec.org

Web sayfalarının, oldukça ekiletici bir görselliğe kavuşmasını sağlayan, onlarca jQuery eklentisinden biri olan jqFancyTransitions eklentisi, fotoğrafların web sayfalarından slayt gösterimi şeklinde sergilenebilmesini sağlayan ilgi çekici bir eklenti.

jqFancyTransitions

Bu gösterim esnasında, bir fotoğraftan diğer bir fotoğrafa geçerken, Wave, Curtain ve Zipper adlı çeşitli şerit/dilimleme efektlerini kullanan jqFancyTransitions eklentisi; geçiş ve şerit sürelerinin ayarlanabilmesi, şerit sayısının ve şeffaflık miktarının belirlenebilmesi gibi özellikleri kullanıcılarına sunmakta.
Ayrıca, Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+ ve Opera 9+ tarayıcılarıyla da uyumlu çalışmakta.

Bu yazımızda jQuery ile sitemizdeki sağ yada sol sütunu, tabloyu yada paneli nasıl gizle/göster yapabileceğimizle ilgili uygulama hazırladım. Çalışma mantığı, daha önce anlattığım (jQuery İle “Tab” Uygulaması Geliştirmek) yazısındaki uygulama ve çalışma mantığıyla neredeyse aynıdır. Tek farkı! Bu uygulamada animasyonun daha fazla olması. Çalışan örneği için BU bağlantıya bakabilirsiniz.

Şimdi öncelikle site içeriklerini Ana Tablo içine aldım;

1
2
3

<div class="ana-tablo">
...
</div>

Ana Tablo için eklediğim stil;

1

.ana-tablo { overflow:hidden; position:relative; padding-bottom:10px; }

Şimdide sırayla içerikleri doldurmaya başlıyorum. Öncelikle Gizle/Göster butonlarını ekledim;

1
2

<div class="gizle">»</div>
<div class="goster">«</div></code>

Gizle/Göster butonları için eklediğim stil;

1

.gizle, .goster { font-size:25px; position:absolute; top:0; right:10px; background:#000; color:#fff; padding:5px 5px 8px 5px; line-height:0.2em; cursor:pointer; overflow:hidden; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:5px; -webkit-border-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }

Tabii bu bölümde de atlamamak lazım! Kullanıcılarımıza sadece “Gizle” butonu gösterileceğinden, “Göster” butonunu stille ekstra olarak gizledim;

1

.goster { display:none; }

Ardından Sağ Sütunu ekledim;

1
2
3
4

<div class="sag-sutun">
<div>...</div>
<div>...</div>
</div>

Sağ Sütun için eklediğim stil;

1
2

.sag-sutun { width:220px; float:right; overflow:hidden; padding-right:10px; margin-right:40px; }
.sag-sutun div { width:200px; padding:10px; margin-bottom:10px; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }

ve son olarak da Sol Sütunu ekledim;

1
2
3

<div class="sol-sutun">
...
</div>

Sol Sütun için eklediğim stil;

1

.sol-sutun { margin-right:280px; padding:10px; background:#fefee0; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }

Sayfa için kullanacağımız XHTML kodları burada bitiyor. Buradan sonrasında jQuery ile yazacağımız fonksiyonlar çalışacak.

jQuery kodlarını vermeden önce hazırladığım fonksiyonların ne işe yaradığından bahsetmek istiyorum. Öncelikle ilk fonksiyonumuz, “Gizle” butonu tıklanınca “Sağ Sütun” ve “Gizle” buttonu kaybolacak, kaybolan sütun yerine “Sol Sütun“‘u genişletecek, genişleyecek ama bir yandan da sağdan “Göster” butonu kadar boşluk bırakacak. İkinci fonksiyonumuzda ise “Göster” butonu tıklanınca “Gizle” butonu kaybolacak, “Sol Sütun” belirttiğimiz ölçüde tekrar daraltılacak, “Sağ Sütun” ve “Gizle Butonu” gösterilecek, gösterilecek ama “Sağ Sütun“‘un sağına “Gizle” butonun sığıcağı kadar boşluk ekleyecek. Aman dikkat!!! Anlattıklarımdan kafanız karışmasın. Sadece anlattıklarımı hayal edip, “- tabi ya! böle yapınca bu olucak, şöle yapınca şu olucak.” gibisinden düşünebilirsiniz…

Neyse, yukarıda anlattıklarım hayal ürünü olmaktan çıkıp, kodsal olarak bu şekli alıyor;

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function(){
	$(".gizle").click(function(){
		$(".gizle").animate({opacity:0}, 250).hide("slow");
		$(".goster").animate({opacity:1}, 250).show("normal");
		$(".sag-sutun").animate({marginRight:"-220px", opacity:0}, 250);
		$(".sol-sutun").animate({marginRight:"40px"}, 250);
	});
	$(".goster").click(function(){
		$(".gizle").animate({opacity:1}, 250).show("normal");
		$(".goster").animate({opacity:0}, 250).hide("slow");
		$(".sag-sutun").animate({marginRight:"30px", opacity:1}, 250 );
		$(".sol-sutun").animate({marginRight:"270px"}, 250);
	});
});

Herşeyi bu şekilde yaptıktan sonra, aşağıdaki gibi kodlara sahip olucaktınız;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<!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 İle "Gizle/Göster" Sütun ve Tablo Yapımı</title>
<script src="http://arsiv.pilli.com/jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".gizle").click(function(){
		$(".gizle").animate({opacity:0}, 250).hide("slow");
		$(".goster").animate({opacity:1}, 250).show("normal");
		$(".sag-sutun").animate({marginRight:"-220px", opacity:0}, 250);
		$(".sol-sutun").animate({marginRight:"40px"}, 250);
	});
	$(".goster").click(function(){
		$(".gizle").animate({opacity:1}, 250).show("normal");
		$(".goster").animate({opacity:0}, 250).hide("slow");
		$(".sag-sutun").animate({marginRight:"30px", opacity:1}, 250 );
		$(".sol-sutun").animate({marginRight:"270px"}, 250);
	});
});
</script>
<style type="text/css">
.ana-tablo { overflow:hidden; position:relative; padding-bottom:10px; }
.sag-sutun { width:220px; float:right; overflow:hidden; padding-right:10px; margin-right:30px; }
.sag-sutun div { width:200px; padding:10px; margin-bottom:10px; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
.sol-sutun { margin-right:270px; padding:10px; background:#fefee0; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:10px; -webkit-border-radius:10px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
.gizle, .goster { font-size:25px; position:absolute; top:0; right:10px; background:#000; color:#fff; padding:5px 5px 8px 5px; line-height:0.2em; cursor:pointer; overflow:hidden; /*Buradan*/-moz-box-shadow:1px 1px 5px #e4e4e4; -moz-border-radius:5px; -webkit-border-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
.goster { display:none; }
</style>
</head>
<body>
<div class="ana-tablo">
<div class="gizle">»</div>
<div class="goster">«</div>
<div class="sag-sutun">
<div>...</div>
<div>...</div>
</div>
<div class="sol-sutun">...</div>
</div>
</body>
</ html>

Sitenize üzerine açıklama da ekleyebileceğiniz bir xml flash slider örneği. İstediğiniz bölgeye entegre edip kullanabilir veya ölçülerini istediğiniz gibi değiştirebilirsiniz. Demo için burayatıklayın, indirmek için de burayatıklayın.

Bu eklenti ile web sitenizde jQuery ile hazırlanmış bir galeri oluşturabilirsiniz. Resimin altta yer alan önizlemesine tıkladığınızda kayarak tıkladığınız resim gelir.
Carousel Gallery (jQuery) for Wordpress

jQuery Lightbox For Native Galleries

Tıkladığınız resim büyük boy olarak sayfaya yansıtılır. İsterseniz diğer resimler arası geçiş yapabilir veya slayt gösterisine dönüştürebilirsiniz.

Google Analyticator

Google Analytics ile bütünleşik bu eklenti WordPress blog günlüğünü etkinleştirmek için gerekli JavaScript kodunu ekler. Blogunuza Google Analyticator ile çeşitli verileri çekebilirsiniz.

Wordpress’in binlerce eklentisi bulunmakta. Sitelere ve isteklere göre değişen bu eklentiler sitemizi kullanılabilir ve hoş bir görünüm sağlamakta. Sadece galeri içerikli olanlar ile sitenizde istediğiniz içerikte resimler yayınlayabilirsiniz. Ya da reklam olarak kullanabilirsiniz. Slaytlar yapabileceğiniz gibi basit bir galeride hazırlayabilirsiniz. İşte Wordpress’in dikkat çeken galeri eklentileri;

NextGEN Gallery

Wordpress’e entegre ettiğiniz bu eklenti ile web sayfanızda resimler ile slayt gösterileri yapabilir altına yorumlar ekleyebilirsiniz. Tek bir şablon değil farklı şablonlar kullanmanıza olanak sağlar.

Web sitenizde bulunan, metin ve görsel öğelere sahip içeriklerinizi, bir slayt gösterimi düzeneği ile ziyaretçilerinize sunabilmenizi sağlayan ve bir jQuery eklentisi olan bxSlider; hız, gösterim modu ve gösterimin kendiliğinden veya kullanıcı etkisi ile başlayabilme gibi birçok yapılandırma opsiyonu/özelliği ile web sayfanıza yerleştirebilirsiniz.

Web sayfanıza sadece birkaş satır kod ile kolayca ekleyebileceğiniz bxSlider eklentisi için hazırlanmış ve içeriğinde 4 farklı slayt gösterim tekniğinin bulunduğu demo sayfasına buradan ve bxSlider ana sayfasına da buradan ulaşabilirsiniz.

Sosyal Medya’da farklı amaçlar için faaliyet yürütmek isteyen; kurumların, kişilerin veya Sosyal Medya konusunda uzmanlaşmak isteyenlerin “başucu sunuları” olabilecek değerde ve türkçe olarak hazırlanmış sunumları, bu listede bulabilirsiniz.

Tümü, sunum ve doküman paylaşım sitesi SlideShare’de * paylaşılmış olan bu sunumlar yardımı ile, özellikle; Sosyal Medya nedir? ve Sosyal Medya’da pazarlama nasıl yapılabilir? gibi sorulara cevap bulabilirsiniz.

• Sosyal Medyayı pazarlama iletisimi icin firsatlara donusturmek
• Dijital Pazarlamayı Anlamak, Dijital Pazarlamanın Getirdiği fırsatlar

Web sayfalarınızda; haber başlıkları, fotoğraf galerileri, portfolyo gösterimi ve eğitim veya tanıtım amaçlı sunumlar gibi birçok farklı amaç için kullanabileceğiniz bir slide gösterim eklentisi olan JQuery slideViewerPro 1.0, yine slide gösterimi için hazırlanmış JQuery slideViewer eklentisinin çok daha farklı özelliklerle donatılmış, gelişmiş bir versiyonu konumunda.

JQuery slideViewerPro 1.0 ile resimleri otomotik gösterebilme, her bir slide için başlıkları gizleyebilme veya gösterebilme, slide geçişlerindeki animasyonu yeniden düzenleyebilme gibi özellikleri kullanarak, ziyaretçilerinizin beğenisini kazanacak web sayfaları düzenleyebilirsiniz.

Giriş seviyesindeki yerini almaya hazırlanan Nokia 2220 slide kayan kapak özelliği ve farklı renk seçenekleri ile oldukça hoş gözüküyor.

Nokia 2220 slide

Giriş seviyesi bir cep telefonu olması nedeniyle çok fazla fonksiyona sahip olmamakla beraber oldukça makul bir fiyata satılacağı da belli. Telefonda arayüz olarak Nokia S40 arayüzü kullanılacak. Ayrıca 128 x 160 TFT ekran, 3.5mm jak, VGA kamera, 10 mb dahili bellek, 400 saate varan bekleme süresi ve 8 saate kadar varan konuşma süresine sahip batarya, FM radyo, 640×480 piksel çözünürlük sunan kamera sahibi. 97,2 x 47 x 15,9 mm boyutlarındaki Nokia 2220 web tarayıcısı olarak Opera Mini kullanıyor (Opera Mini en çok indirilen mobil uygulama sıfatına sahip bir web tarayıcısı).

Web sayfalarında, farklı amaçlar ile hazırlanmış resim, fotoğraf, çizim vb. çeşitli görsel öğelerin sunumunu kolayca yapabilmeniz için bir arayüz sağlayan WebSlide, farklı tasarımı ile dikkat çekmekte.

Javascript ve Css ile hazırlanmış WebSlide, sunumu yapılmak istenen görseli, bir menü ile beraber web sayfasında görütüleyerek, ziyaretçilerin görseli, fare veya klavyedeki yön tuşları ile detaylı olarak inceyebilmelerine olanak tanımakta.

Sunucu taraflı herhangi bir yardıma ihtiyaç duymayan WebSlide’a, CSS ile çeşitli temalar da hazırlanabilmekte.