<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Fatih Hayrioğlu&#039;nun not defteri &#187; Lightwindow</title>
	<atom:link href="http://www.fatihhayrioglu.com/tag/lightwindow/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.fatihhayrioglu.com</link>
	<description>{ CSS, HTML ve Javascript }</description>
	<lastBuildDate>Thu, 09 Feb 2012 08:44:49 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=2012</generator>
		<item>
		<title>Lightbox seçimi</title>
		<link>http://www.fatihhayrioglu.com/lightbox-secimi/</link>
		<comments>http://www.fatihhayrioglu.com/lightbox-secimi/#comments</comments>
		<pubDate>Wed, 09 Jan 2008 21:36:32 +0000</pubDate>
		<dc:creator>fatih.hayrioglu</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[lightbox]]></category>
		<category><![CDATA[Lightwindow]]></category>
		<category><![CDATA[mootools]]></category>
		<category><![CDATA[Slimbox]]></category>

		<guid isPermaLink="false">http://www.fatihhayrioglu.com/?p=443</guid>
		<description><![CDATA[Lightbox; popup veya mesaj kutusu benzeri, sayfa içinde açılan kutulara denir. Bu kutular sayfadaki diğer öğelerin üzerine kapsayacak şekilde tüm sayfayı belli oranda saydamlık verilerek kaplayan kutulardır. Lightbox sayfalarımıza estetik görsellik kazandırır. Bir çok lightbox uygulaması mevcuttur. Ben bu lightbox uygulamalarından bazılarını denedim ve çeşitli sitelerde kullandım ve sonuçta birinde karar kıldım. Sırası ile denediğim [...]]]></description>
			<content:encoded><![CDATA[<p>Lightbox; popup veya mesaj kutusu benzeri, sayfa içinde açılan kutulara denir. Bu kutular sayfadaki diğer öğelerin üzerine kapsayacak şekilde tüm sayfayı belli oranda saydamlık verilerek kaplayan kutulardır. Lightbox sayfalarımıza estetik görsellik kazandırır. </p>
<p><span id="more-443"></span>
<p align="center"><img src="/images/lightbox.gif" alt="Lightbox örneği" width="450" height="325"></p>
<p>Bir çok lightbox uygulaması mevcuttur. Ben bu lightbox uygulamalarından  bazılarını denedim ve çeşitli sitelerde kullandım ve sonuçta birinde karar kıldım. Sırası ile denediğim genel lightbox kodları:</p>
<ul>
<li>prototype ve scriptaculous tabanlı en meşhur Lokesh Dhakar&#8217;ın yaptığı <a href="http://www.huddletogether.com/projects/lightbox2">Lightbox 2.0</a></li>
<li>Lightbox2.0&#8242;ın prototype.lite ve moo.fx. kullanılarak revize edilmiş daha küçük hali olan <a href="http://www.doknowevil.net/litebox/">Litebox</a></li>
<li><a href="http://stickmanlabs.com/lightwindow/">Lightwindow</a>, prototype alt yapısını kullanıyor, bir çok yerde kullanılması güzel(flash, iframe, komutla), boyutu yüksek olması dez avantajı, ayrıca değiştirmeye pek eleverişli değil.</li>
<li>Son olarak benim karar kıldığım mootools javascript kütüphanesi kullanılarak hazırlanan <a href="http://www.digitalia.be/software/slimbox">Slimbox</a></li>
</ul>
<p>Diğer lightbox seçenekleri bana daha hantal ve üzerinden daha az oynama imkânı sağladığı için tercih etmedim. Slimbox&#8217;ın avantajları :</p>
<ul>
<li>Küçük boyutlu mootools javascript kütüphanesini kullanması.</li>
<li>%100 doğrulanmış CSS kodu diğer lightboxlarda bu yok.</li>
<li>Javascript kodu yerine CSS kodu ile değiştirebilme imkânı </li>
<li>Diğer lightbox uygulamalarının aksine saydam png kullanmaması</li>
<li>Kolay değiştirilebilir olması</li>
</ul>
<p>	Benim gibi site kodlayan arkadaşların bu tip hazır javascript kodlarından beklentisi uygulamayı kendi sitemize adapte ederken bize sağladığı kolaylıktır. Slimbox bu hususta diğerlerine göre daha avantajlı ve kullanışlı.</p>
<p>slimbox.js scripti bize kolay değiştirme imkanı sağlar 11. ve 17 satırdaki kodlar</p>
<ul>
<li><strong>resizeDuration:</strong> Değişen genişlik ve yükseklik animasyonunun süresi, milisaniye cinsiden. </li>
<li><strong>resizeTransition:</strong> Geçiş efektinin aktif olup olamayacağı</li>
<li><strong>initialWidth:</strong> Kutunun başlangıçtaki genişlik değeri, piksel cinsiden. </li>
<li><strong>initialHeight:</strong>Kutunun başlangıçtaki yükseklik değeri, piksel cinsiden. </li>
<li><strong>animateCaption:</strong> Animasyon başlığı olsun mu olmasın mı?</li>
<li><strong>displayCounter:</strong> Resim galerisindeki sıralamayı göstersin mi göstermesin mi? </li>
</ul>
<p>Bunun haricinde eğer javascript konusunda mürekkep yalamışsanız bir çok değişikliği yapabilirsiniz slimbox.js içerisinde.</p>
<p>Sonuç olarak başta dediğim gibi şimdiye kadar uyguladıklarımdan en çok beğendiğin Slimbox olduğu için bunu sizlere öneriyorum nacak zaman ne gösterir onu bilemem. Ayrıca sizinde uygulayıp memnun kaldığınız lightbox uygulamaları varsa onlarıda yazmanızı bekliyorum. Tabi avantajları ile birlikte yazarsanız memnun olurum.</p>
<p>Not: Bir uyarı eğer sayfa içinde z-index değeri içeren bir nesneniz varsa ve slimbox bu nesnenin altında kalıyorsa. slimebox.css da #lbCenter z-index değeri olarak 9999 verin</p>
<h6>Kaynaklar</h6>
<ul>
<li><a href="http://particletree.com/features/lightbox-gone-wild/">http://particletree.com/features/lightbox-gone-wild/</a>
  </li>
<li><a href="http://www.digitalia.be/software/slimbox">http://www.digitalia.be/software/slimbox</a>
  </li>
<li><a href="http://www.artviper.net/test/ajaxslide/index.html">http://www.artviper.net/test/ajaxslide/index.html</a> (farklı bir uygulama şekli)</li>
<li><a href="http://clientside.cnet.com/cnet.gf/docs/files/common/3rdParty/Slimbox/slimbox-js.html">http://clientside.cnet.com/cnet.gf/docs/files/common/3rdParty/Slimbox/slimbox-js.html</a> (kaynak)</li>
<li><a href="http://scripts.ajaxflakes.com/category/lightbox/">http://scripts.ajaxflakes.com/category/lightbox/</a> (lightbox listesi)</li>
<li><a href="http://www.ajaxrain.com/tag.php?tag=popup&amp;page=1">http://www.ajaxrain.com/tag.php?tag=popup&amp;page=1</a> (lightbox listesi)</li>
<li><a href="http://jadedpixel.stikipad.com/design/show/A+Better+Lightbox">http://jadedpixel.stikipad.com/design/show/A+Better+Lightbox</a> (karşılaştırma)</li>
<li><a href="http://homepage.mac.com/yukikun/software/slimbox_ex/">http://homepage.mac.com/yukikun/software/slimbox_ex/</a> (geliştirilmiş sildebox)</li>
<li><a href="http://www.chazzuka.com/blog/index.php?p=21&amp;">http://www.chazzuka.com/blog/index.php?p=21&amp;</a> (karşılaştırma)</li>
<li><a href="http://www.phatfusion.net/lightbox/index.htm">http://www.phatfusion.net/lightbox/index.htm</a> (slimebox farklılaştırılmış</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.fatihhayrioglu.com/lightbox-secimi/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
	</channel>
</rss>

