<?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; Gallery</title>
	<atom:link href="http://www.rockfu.net/blog/category/website/gallery/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.rockfu.net/blog</link>
	<description>讓生活多一點浪漫</description>
	<lastBuildDate>Wed, 08 Feb 2012 05:26:21 +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>15 jQuery Image Gallery Slider Tutorials and Plugins</title>
		<link>http://www.rockfu.net/blog/2009/09/website/gallery/25-jquery-image-gallery-slider-tutorials-and-plugins/</link>
		<comments>http://www.rockfu.net/blog/2009/09/website/gallery/25-jquery-image-gallery-slider-tutorials-and-plugins/#comments</comments>
		<pubDate>Thu, 17 Sep 2009 12:44:56 +0000</pubDate>
		<dc:creator>rockfu</dc:creator>
				<category><![CDATA[Gallery]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[Plugin]]></category>
		<category><![CDATA[Slider]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[教學]]></category>
		<category><![CDATA[相簿]]></category>

		<guid isPermaLink="false">http://www.rockfu.net/blog/?p=1953</guid>
		<description><![CDATA[<br/>jQuery Images gallery slider 真的很棒, 很多像flash 的效果都可以做到,而且很容易就可以用到, 看了都想找點東西放上去展示一下,他們用途很大,特別是在產品上. Create an Image Rotator with Description (CSS/jQuery) jQuery Image Gallery/News Slider Full Screen Image Gallery Using jQuery and Flickr Create a Slick and Accessible Slideshow Using jQuery Fancy Thumbnail Hover Effect with &#8230; <a href="http://www.rockfu.net/blog/2009/09/website/gallery/25-jquery-image-gallery-slider-tutorials-and-plugins/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<br/><p>jQuery Images gallery slider 真的很棒, 很多像flash 的效果都可以做到,而且很容易就可以用到, 看了都想找點東西放上去展示一下,他們用途很大,特別是在產品上.</p>
<p><strong><a href="http://designm.ag/tutorials/image-rotator-css-jquery/" target="_blank"><strong>Create an Image Rotator with Description (CSS/jQuery)</strong></a></strong></p>
<p><img class="alignnone" title="Image Rotator" src="http://vandelaydesign.com/images/0709/jquery/16.jpg" alt="" width="425" height="250" /><span id="more-1953"></span></p>
<p><span style="font-size: small;"><a rel="external" href="http://www.queness.com/post/443/jquery-image-gallerynews-slider-with-caption-tutorial" target="_blank">jQuery Image Gallery/News Slider</a></span><br />
<span style="font-size: medium;"><img class="alignnone" title="jQuery Image Gallery" src="http://vandelaydesign.com/images/0709/jquery/1.jpg" alt="" width="425" height="229" /><br />
</span><strong><a href="http://devkick.com/blog/full-screen-image-gallery-using-jquery-and-flickr/"><strong>Full Screen Image Gallery Using jQuery and Flickr</strong></a></strong><br />
<img class="alignnone" title="Full Screen Image Gallery Using jQuery and Flickr" src="http://devkick.com/lab/fsgallery/fsgallery.jpg" alt="" width="381" height="187" /></p>
<p><strong><a href="http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/"><strong>Create a Slick and Accessible Slideshow Using jQuery</strong></a></strong></p>
<p><strong><img class="alignnone" title="Create a Slick and Accessible Slideshow Using jQuery" src="http://vandelaydesign.com/images/0709/jquery/20.jpg" alt="" width="425" height="256" /></strong></p>
<p><strong><a href="http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/"><strong>Fancy Thumbnail Hover Effect with jQuery</strong></a></strong></p>
<p><strong><img class="alignnone" title="Fancy Thumbnail Hover Effect with jQuery" src="http://vandelaydesign.com/images/0709/jquery/23.jpg" alt="" width="425" height="180" /></strong></p>
<p><strong><a href="http://net.tutsplus.com/tutorials/javascript-ajax/building-a-jquery-image-scroller/"><strong>Building a jQuery Image Scroller</strong></a></strong></p>
<p><strong><img class="alignnone" title="Building a jQuery Image Scroller" src="http://vandelaydesign.com/images/0709/jquery/8.jpg" alt="" width="448" height="173" /></strong></p>
<p><strong><a href="http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/"><strong>Sliding Boxes and Captions with jQuery</strong></a></strong></p>
<p><strong><img class="alignnone" title="Sliding Boxes and Captions with jQuery" src="http://vandelaydesign.com/images/0709/jquery/9.jpg" alt="" width="425" height="233" /></strong></p>
<p><strong><a href="http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html"><strong>Create Beautiful jQuery Slider</strong></a></strong></p>
<p><strong><img class="alignnone" title="Create Beautiful jQuery Slider" src="http://lh4.ggpht.com/_zffIzal5cfI/SfKjCa2AxDI/AAAAAAAADjo/zY079AhPW5M/jQuerysliders_thumb8.png?imgmax=800" alt="" width="440" height="177" /></strong></p>
<p><strong><a href="http://www.catswhocode.com/blog/how-to-create-a-fancy-image-gallery-with-jquery"><strong>How to: Create a Fancy Image Gallery with jQuery</strong></a></strong></p>
<p><strong><img class="alignnone" title="How to: Create a Fancy Image Gallery with jQuery" src="http://vandelaydesign.com/images/0709/jquery/19.jpg" alt="" width="425" height="271" /></strong></p>
<p><strong><a href="http://jqueryfordesigners.com/coda-slider-effect/"><strong>Coda Slider Effect</strong></a></strong></p>
<p><strong><img class="alignnone" title="Coda Slider Effect" src="http://vandelaydesign.com/images/0709/jquery/25.jpg" alt="" width="425" height="188" /></strong></p>
<h3>jQuery Image Gallery/Slider Plugins:</h3>
<p><strong><a href="http://www.buildinternet.com/project/supersized/"><strong>Supersized</strong></a></strong></p>
<p><strong><img class="alignnone" title="Supersized jquery plugin" src="http://vandelaydesign.com/images/0709/jquery/7.jpg" alt="" width="425" height="232" /></strong></p>
<p><strong><a href="http://plugins.jquery.com/project/galleryview"><strong>Gallery View</strong></a></strong></p>
<p><strong><img class="alignnone" title="Gallery View" src="http://vandelaydesign.com/images/0709/jquery/2.jpg" alt="" width="425" height="267" /></strong></p>
<p><strong><a href="http://www.twospy.com/galleriffic/#1"><strong>Gallerific</strong></a></strong></p>
<p><strong><img class="alignnone" title="Gallerific" src="http://vandelaydesign.com/images/0709/jquery/6.jpg" alt="" width="425" height="314" /></strong></p>
<p><strong><a href="http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding"><strong>Easy Slider 1.5</strong></a></strong></p>
<p><strong><img class="alignnone" title="Easy Slider 1.5" src="http://vandelaydesign.com/images/0709/jquery/13.jpg" alt="" width="425" height="127" /></strong></p>
<p><strong><a href="http://www.visual-blast.com/javascript/s3slider-jquery-image-gallery-plugin/"><strong>S3 Slider – jQuery Image Gallery</strong></a></strong></p>
<p><strong><img class="alignnone" title="S3 Slider – jQuery Image Gallery" src="http://vandelaydesign.com/images/0709/jquery/15.jpg" alt="" width="425" height="272" /></strong></p>
<p><strong><br />
</strong></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=1953&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.rockfu.net/blog/2009/09/website/gallery/25-jquery-image-gallery-slider-tutorials-and-plugins/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<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>
<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>

