<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/main.xsl"?>
<b:blog xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://blog.othree.net"  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://blog.othree.net http://blog.othree.net/blooog.xsd">
	<b:blogTitle>O3noBLOG</b:blogTitle>
	<b:blogDescription></b:blogDescription>
	<b:entries>
		<b:entriesMeta>
			<b:listType>s</b:listType>
			<b:listData listID="000505" baseName="lightlightbox">lightlightbox</b:listData>

			<b:previous>
				<b:mTitle>手上的鍵盤</b:mTitle>
				<b:mDate>2008/04/02</b:mDate>
				<b:mBase>keyboards</b:mBase>
			</b:previous>


			<b:next>
				<b:mTitle>除錯與測試 JavaScript</b:mTitle>
				<b:mDate>2008/04/06</b:mDate>
				<b:mBase>javascript-debug-test</b:mBase>
			</b:next>

		</b:entriesMeta>
		<b:entry entryID="000505" baseName="lightlightbox">
			<b:author>
				<b:authorName>othree</b:authorName>
				<b:authorEmail>othree@gmail.com</b:authorEmail>
				<b:authorUrl></b:authorUrl>
			</b:author>
			<b:datetime>
				<b:date>2008-04-06</b:date>
				<b:time>11:40:04</b:time>
			</b:datetime>
			<b:category>script</b:category>

			<b:CommentsAccepted>1</b:CommentsAccepted>



			<b:PingsAccepted>1</b:PingsAccepted>


			<b:title>lightlightbox</b:title>
			<b:content>
				<b:summary>好一陣子沒寫新東西了，前陣子其實在把一些舊的Script重新寫過，像是hiddenlinks（想到新名字後才會放出:P）和這裡的表單檢查等等，主要是想脫離jQuery，當然不是嫌它不好，而是覺得自己blog的東西不用特別用jQuery來縮減開發時間，而且寫好的東西大部分都還會公開出來。其中最後要處理的就是lightbox特效，我之前是用thickbox這個套件，本來是想改用FancyZoom，不過他的縮放特效遇到一些特定情況時會變很慢，最早的lightbox又不是用DOM方法來處理，在XHTML 1.1下無用武之地，更不用說2.0用了prototype，最後我決定自己寫一個lightbox，完成後我把它取名為lightlightbox，因為真的很輕量，程式碼不到100行XD。 想看效果的可以直接點這，如果不想開在lightbox裡面，可以壓著ctrl或alt鍵再點擊。全部是三個檔案，一個js檔，一個讀取中的gif動畫檔，一個關閉按鈕的圖檔，讀取中的gif動畫我是用Ajax Loading Gif Generator做的，關閉按鈕的圖則是先用FancyZoom的那張，和蘋果網站上用的很像，因為權利問題我不直接提供連結。在功能上預設是把所有連到jpg、jpeg、gif、png這四種檔案的連結都套上lightbox特效，另外也可以設定classFilter來判斷class，變成可以用class來決定哪些連結要有lightbox，哪些不要，檔案下載： llbox.js loading.gif 另外有一個fade in/out版的： llbox.js 使用前先記得修改llbox.js裡面的讀取中動畫和關閉按鈕的圖檔位置，目前版本在IE7、Firefox 3 beta5、Safari 3.1、Opera 9.26上測試過都沒問題。有兩個已知問題，一是png圖在IE6以前的版本會有透明色的問題，另一個是鍵盤控制沒有處理，等修正後會放出1.1版。 更新：結果今天就花時間把兩個問題都處理完了，更新版的檔案在原位置。...</b:summary>
				<b:mainContent><p>好一陣子沒寫新東西了，前陣子其實在把一些舊的Script重新寫過，像是<a href="http://blog.othree.net/log/2005/09/19/hiddenlinks-2/">hiddenlinks</a>（想到新名字後才會放出:P）和這裡的表單檢查等等，主要是想脫離<a href="http://jquery.com">jQuery</a>，當然不是嫌它不好，而是覺得自己blog的東西不用特別用jQuery來縮減開發時間，而且寫好的東西大部分都還會公開出來。其中最後要處理的就是lightbox特效，我之前是用<a href="http://jquery.com/demo/thickbox/">thickbox</a>這個套件，本來是想改用<a href="http://www.cabel.name/2008/02/fancyzoom-10.html">FancyZoom</a>，不過他的縮放特效遇到一些特定情況時會變很慢，最早的<a href="http://www.huddletogether.com/projects/lightbox/">lightbox</a>又不是用DOM方法來處理，在XHTML 1.1下無用武之地，更不用說2.0用了prototype，最後我決定自己寫一個lightbox，完成後我把它取名為lightlightbox，因為真的很輕量，程式碼不到100行XD。</p>

<p>想看效果的可以直接點<a href="http://othree.net/projects/lightlightbox/DSCF5940.JPG">這</a>，如果不想開在lightbox裡面，可以壓著ctrl或alt鍵再點擊。全部是三個檔案，一個js檔，一個讀取中的gif動畫檔，一個關閉按鈕的圖檔，讀取中的gif動畫我是用<a href="http://www.ajaxload.info/">Ajax Loading Gif Generator</a>做的，關閉按鈕的圖則是先用FancyZoom的那張，和蘋果網站上用的很像，因為權利問題我不直接提供連結。在功能上預設是把所有連到jpg、jpeg、gif、png這四種檔案的連結都套上lightbox特效，另外也可以設定classFilter來判斷class，變成可以用class來決定哪些連結要有lightbox，哪些不要，檔案下載：</p>


<ul>
<li><a href="http://othree.net/projects/lightlightbox/llbox.js">llbox.js</a></li>
<li><a href="http://othree.net/projects/lightlightbox/loading.gif">loading.gif</a></li>
</ul>



<p>另外有一個fade in/out版的：</p>


<ul>
<li><a href="http://othree.net/projects/lightlightbox-fade/llbox.js">llbox.js</a></li>
</ul>



<p>使用前先記得修改llbox.js裡面的讀取中動畫和關閉按鈕的圖檔位置，目前版本在IE7、Firefox 3 beta5、Safari 3.1、Opera 9.26上測試過都沒問題。<del>有兩個已知問題，一是png圖在IE6以前的版本會有透明色的問題，另一個是鍵盤控制沒有處理</del>，等修正後會放出1.1版。</p>

<p class="update">更新：結果今天就花時間把兩個問題都處理完了，更新版的檔案在原位置。</p></b:mainContent>
				<b:extendContent></b:extendContent>
			</b:content>
			<b:comments commentCount="0">

			</b:comments>
			<b:trackbacks trackbackCount="0" trackbackURL="http://othree.net/mt/mt-tb.cgi/503">

			</b:trackbacks>
		</b:entry>
	</b:entries>
</b:blog>