<?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>RockFu.Net - Rock my life! &#187; slideshow</title>
	<atom:link href="http://www.rockfu.net/blog/tag/slideshow/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.rockfu.net/blog</link>
	<description>讓生活多一點浪漫</description>
	<lastBuildDate>Fri, 27 Jan 2012 04:02:10 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>14 jQuery Photo Slideshow</title>
		<link>http://www.rockfu.net/blog/2009/05/website/gallery/14-jquery-photo-slideshow/</link>
		<comments>http://www.rockfu.net/blog/2009/05/website/gallery/14-jquery-photo-slideshow/#comments</comments>
		<pubDate>Wed, 20 May 2009 09:11:21 +0000</pubDate>
		<dc:creator>rockfu</dc:creator>
				<category><![CDATA[Gallery]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[slideshow]]></category>

		<guid isPermaLink="false">http://www.rockfu.net/blog/?p=1632</guid>
		<description><![CDATA[<br/>近排因為要改website 的關系,開始學jQuery, jQuery 為一個javascript library, 用jQuery 可以在瀏覽器中實現一些特別效果,而且實現標準化. 除了jQuery外,還有Mootools等其他libaray, 我是新手,選擇簡單容易入手的. 在網上見到14 個易用效果正的jQuery slideshow viewer, 做一個記錄 1.Galleria &#8211; a javascript image gallery  觀看演示 用javascript 實現類似flash gallery 效果，可以用於產品展示，實用性高。 2.jQuery multimedia portfolio &#8211; 觀看演示 這個效果類似蘋果的slideshow， 產品展示 3. Apple slider gallery &#8211; 觀看演示 這個是就是蘋果的slide gallery &#8230; <a href="http://www.rockfu.net/blog/2009/05/website/gallery/14-jquery-photo-slideshow/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<br/><p>近排因為要改website 的關系,開始學<a href="http://jquery.com/" target="_blank">jQuery</a>, jQuery 為一個javascript library, 用jQuery 可以在瀏覽器中實現一些特別效果,而且實現標準化. 除了jQuery外,還有Mootools等其他libaray, 我是新手,選擇簡單容易入手的.</p>
<p>在網上見到14 個易用效果正的jQuery slideshow viewer, 做一個記錄</p>
<p>1.Galleria &#8211; a javascript image gallery  <a href="http://devkick.com/lab/galleria/demo_01.htm" target="_blank">觀看演示</a></p>
<p><img class="aligncenter" src="http://devkick.com/lab/galleria/galleria.jpg" alt="" width="500" height="455" />用javascript 實現類似flash gallery 效果，可以用於產品展示，實用性高。</p>
<p><span id="more-1632"></span></p>
<p>2.jQuery multimedia portfolio &#8211; <a href="http://www.openstudio.fr/jquery/index.htm" target="_blank">觀看演示</a></p>
<div class="wp-caption aligncenter" style="width: 510px"><img title="jQuery multimedia portfolio" src="http://blueprintds.com/wp-content/uploads/2009/01/picture-2.png" alt="jQuery multimedia portfolio" width="500" height="156" /><p class="wp-caption-text">jQuery multimedia portfolio</p></div>
<p>這個效果類似蘋果的slideshow， 產品展示</p>
<p>3. Apple slider gallery &#8211; <a href="http://jqueryfordesigners.com/demo/slider-gallery.html" target="_blank">觀看演示</a></p>
<p><img class="aligncenter" title="slider gallery" src="http://blueprintds.com/wp-content/uploads/2009/01/picture-5.png" alt="" width="500" height="161" />這個是就是蘋果的slide gallery ， 速度很快，超級實用</p>
<p>4. space gallery &#8211; <a href="http://eyecon.ro/spacegallery/#about" target="_blank">觀看演示</a></p>
<div class="wp-caption aligncenter" style="width: 510px"><img title="space gallery" src="http://blueprintds.com/wp-content/uploads/2009/01/picture-4.png" alt="" width="500" height="269" /><p class="wp-caption-text">space gallery</p></div>
<p>這個有類似3D效果的slideshow， 效果不錯，不過用起來效果一般</p>
<p>5.jQuery Gallery Scroller &#8211; <a href="http://benjaminsterling.com/jquery-jqgalscroll-photo-gallery/" target="_blank">觀看演示</a></p>
<div class="wp-caption aligncenter" style="width: 510px"><img title="jQuery Gallery Scroller" src="http://blueprintds.com/wp-content/uploads/2009/01/picture-7.png" alt="jQuery Gallery Scroller" width="500" height="433" /><p class="wp-caption-text">jQuery Gallery Scroller</p></div>
<p>這個gallery 很常見, 很容易上手</p>
<p>6.  jQuery Cycle Plugin &#8211; <a href="http://www.malsup.com/jquery/cycle/" target="_blank">觀看效果</a></p>
<div class="wp-caption aligncenter" style="width: 510px"><img title="jQuery Cycle Plugin" src="http://blueprintds.com/wp-content/uploads/2009/01/picture-6.png" alt="jQuery Cycle Plugin" width="500" height="376" /><p class="wp-caption-text">jQuery Cycle Plugin</p></div>
<p>這個plugin，能實現多種效果，如漸變，放大縮小，調換位置之類，不用flash也能做到</p>
<p>7.EOGallery &#8211; <a href="http://www.eogallery.com/" target="_blank">觀看演示</a></p>
<div class="wp-caption aligncenter" style="width: 510px"><img title="EOGallery" src="http://blueprintds.com/wp-content/uploads/2009/01/picture-8.png" alt="EOGallery" width="500" height="253" /><p class="wp-caption-text">EOGallery</p></div>
<p>這個gallery能自動播放, 還有就是可以增加圖片的描述,不過跳來跳去,眼睛有點花</p>
<p>8.  slideViewer &#8211; <a href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html" target="_blank">觀看演示</a></p>
<div class="wp-caption aligncenter" style="width: 510px"><img title=" slideViewer" src="http://blueprintds.com/wp-content/uploads/2009/01/picture-9.png" alt=" slideViewer" width="500" height="310" /><p class="wp-caption-text"> slideViewer</p></div>
<p>這個slideviewer 類似一本書,圖片左右移動,有緩沖效果</p>
<p>9. jQuery lightBox plugin &#8211; <a title="lightbox" href="http://leandrovieira.com/projects/jquery/lightbox/" target="_blank">觀看演示</a></p>
<div class="wp-caption aligncenter" style="width: 510px"><img title="jQuery lightBox plugin" src="http://blueprintds.com/wp-content/uploads/2009/01/picture-10.png" alt="jQuery lightBox plugin" width="500" height="375" /><p class="wp-caption-text">jQuery lightBox plugin</p></div>
<p>lightbox 十分出名,不過多介紹</p>
<p>10.Galleriffic -<a href="http://www.twospy.com/galleriffic/" target="_blank">觀看演示</a></p>
<div class="wp-caption aligncenter" style="width: 510px"><img title="Galleriffic" src="http://blueprintds.com/wp-content/uploads/2009/01/picture-11.png" alt="Galleriffic" width="500" height="271" /><p class="wp-caption-text">Galleriffic</p></div>
<p>我很喜歡這個gallery, 可以用它來展示個人作品, 速度很快，左邊的欄目可以顯示小圖或title</p>
<p>11.  piroBox &#8211; <a href="http://www.pirolab.it/pirobox/" target="_blank">觀看演示</a></p>
<div class="wp-caption aligncenter" style="width: 510px"><img title="piroBox" src="http://blueprintds.com/wp-content/uploads/2009/01/picture-12.png" alt="piroBox" width="500" height="401" /><p class="wp-caption-text">piroBox</p></div>
<p>效果類似於lightbox</p>
<p>12. jquery popeye &#8211; <a href="http://dev.herr-schuessler.de/examples/jquery-popeye/" target="_blank">觀看演示</a></p>
<div class="wp-caption aligncenter" style="width: 510px"><img title="jquery.popeye" src="http://blueprintds.com/wp-content/uploads/2009/01/picture-13.png" alt="jquery.popeye" width="500" height="296" /><p class="wp-caption-text">jquery.popeye</p></div>
<p>效果是有放大效果,縮圖是圖片的某一范圍,用在文章內很實用</p>
<p>13.Zoomimage &#8211; <a href="http://www.hotajax.org/demo/jquery/zoomimage/zoomimage/index.html" target="_blank">觀看演示</a></p>
<div class="wp-caption aligncenter" style="width: 510px"><img title="Zoomimage" src="http://www.hotajax.org/images/stories/jquery/zoomimage.jpg" alt="Zoomimage" width="500" height="221" /><p class="wp-caption-text">Zoomimage</p></div>
<p>放大縮小，但每次放大都來自不同的縮略圖</p>
<p>14.<a href="http://www.leigeber.com/2008/05/ajax-image-gallery-slideshow/" target="_blank">Dynamic Image Gallery and Slideshow</a>- <a href="http://sandbox.leigeber.com/slideshow/" target="_blank">觀看演示</a></p>
<div class="wp-caption aligncenter" style="width: 469px"><img title="Dynamic Image Gallery and Slideshow " src="http://www.leigeber.com/wp-content/uploads/2008/05/slideshow.jpg" alt="Dynamic Image Gallery and Slideshow " width="459" height="250" /><p class="wp-caption-text">Dynamic Image Gallery and Slideshow </p></div>
<p>gallery slideshow中很常用,因為它很精細, library 才幾kb</p>
<div style="text-align:center;width:100%;"><div style="margin:0px 0px 0px 0px;"><script type="text/javascript"><!--
google_ad_client = "pub-5237544886808594";
/* 300x250, 已建立 2009/2/20 */
google_ad_slot = "8308848689";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div></div><img src="http://www.rockfu.net/blog/?ak_action=api_record_view&id=1632&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.rockfu.net/blog/2009/05/website/gallery/14-jquery-photo-slideshow/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

