jocosn 2008-6-25 06:06 PM
lightbox & slideshow
[b]Lightbox (Image Gallery) & Slideshow[/b]
[u]Ajax-Based [/u]
■ [url=http://www.huddletogether.com/projects/lightbox2/]Lightbox[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/250/image/2008-05-10/lightbox_huddletogether0.jpg.jpg[/img]
[Note]
[url]www.HuddleTogether.com[/url]
2.0版當 IE 關掉左側我的最愛時，最右側背景會缺一長條塊黑影
配合這個自動產生器→ LightBox JS Web Gallery Generator
[img]http://pranas.net/webgallerycreator/images/WGdouble.jpg[/img]
[url]http://pranas.net/webgallerycreator/[/url]
■ [url=http://smoothgallery.jondesign.net/showcase/gallery/]JonDesign's SmoothGallery[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/250/image/2008-05-10/lightbox_jondesign.jpg.jpg[/img]
[Note]
smoothgallery.jondesign.net
Slideshow
■ [url=http://www.agilegallery.com/ajax-photo-gallery.html]Ajax Photo Gallery[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/250/image/2008-05-10/lightbox_agilegallery.jpg.jpg[/img]
[Note]
[url]www.agilegallery.com[/url]
Require XML file output by Picasa (須上傳照片到Picasa網站)
■ [url=http://orangoo.com/labs/GreyBox/]Grey Box[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/250/image/2008-05-10/lightbox_orangoo.jpg.jpg[/img]
[Note]
orangoo.com
display websites, images and other content
■ [url=http://www.doknowevil.net/litebox/]Litebox[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/250/image/2008-05-10/lightbox_doknowevil.jpg.jpg[/img]
[Note]
[url]www.doknowevil.net[/url]
■ [url=http://www.gregphoto.net/lightbox/]Multifaceted Lightbox[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/animated/image/2008-05-10/lightbox_gregphoto.gif[/img]
[Note]
[url]www.gregphoto.net[/url]
■ [url=http://www.jasons-toolbox.com/SlightlyThickerBox/]Slightly ThickerBox[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/250/image/2008-05-10/lightbox_jasonstoolbox.jpg.jpg[/img]
[Note]
[url]www.jasons-toolbox.com[/url]
1.7版測試時，Opera 有 bug，無法顯示圖片。IE 會閃圖後才出現。
■ [url=http://www.digitalia.be/software/slimbox]Slimbox[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/animated/image/2008-05-10/lightbox_digitalia.gif[/img]
[Note]
[url]www.digitalia.be[/url]
** ready to launch, no waiting for all images loaded
temporary hides flashs & videosno
use a 1pix transparent gif image & simple CSS (no CSS hacks)
not compatible with the old IE5.5
■ [url=http://mondaybynoon.com/2007/02/19/suckerfish-hoverlightbox-redux/]Suckerfish HoverLightbox Redux[/url] ( [url=http://mondaybynoon.com/2006/03/27/suckerfish-hoverlightbox/]Suckerfish HoverLightbox[/url] )
[img]http://cache7.badongo.com/thumbnails/disk24/animated/image/2008-05-10/lightbox_mondaybynoon.gif[/img]
[Note]
mondaybynoon.com
■ [url=http://stickmanlabs.com/lightwindow/]LightWindow[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/250/image/2008-05-10/lightbox_stickmanlabs.jpg.jpg[/img]
[Note]
stickmanlabs.com
可顯示Flash、影片檔、外部網頁
■ [url=http://www.dolem.com/lytebox/]Lytebox[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/animated/image/2008-05-10/lightbox_dolem.gif[/img]
[Note]
[url]www.dolem.com[/url]
Album & Slideshow
■ [url=http://www.ibegin.com/labs/ibox/]iBox[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/animated/image/2008-05-10/lightbox_ibegin.gif[/img]
[Note]
[url]www.ibegin.com[/url]
可看影片檔 大圖會隨卷軸自行移動，因此大圖若超過瀏覽器外，則無法看見被切掉的部份。
■ [url=http://gueschla.com/labs/smoothbox/]Smoothbox[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/animated/image/2008-05-10/lightbox_gueschla.gif[/img]
[Note]
gueschla.com
大圖會隨卷軸自行移動
■ [url=http://thecodecentral.com/2008/01/01/yui-based-lightbox-final]YUI Based Lightbox[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/animated/image/2008-05-10/lightbox_thecodecentral.gif[/img]
[Note]
thecodecentral.com
■ [url=http://codeboje.de/imago/]Imago[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/animated/image/2008-05-10/lightbox_codeboje.gif[/img]
[Note]
codeboje.de
支援 xml 設定、Flickr&Smugmug
■ [url=http://nicora.net/projects/photoViewer/index.cfm/home]photoViewer[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/250/image/2008-05-15/lightbox_nicora.jpg.jpg[/img]
[Note]
nicora.net
based on YUI library Easily skinned, auto-centered, slide show, XML files, absolute&relative position
■ [url=http://billwscott.com/carousel/]carousel[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/250/image/2008-05-15/lightbox_billwscott.jpg.jpg[/img]
[Note]
billwscott.com
支援 Vertical Orientation、Slide Show、Module Scrolling、Module Tabset 效果沒有 lightbox 效果。
Demo 部分在出大圖後須按上一頁返回，此時 thumbnail 會跑回第一頁。
■ [url=http://www.phatfusion.net/multibox/]multibox[/url] 、[url=http://www.phatfusion.net/lightbox/index.htm]Lightbox[/url] 、[url=http://www.phatfusion.net/slideshow/index.htm]slideshow[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/animated/image/2008-05-15/lightbox_phatfusion.gif[/img]
[Note]
[url]www.phatfusion.net[/url]
可開啟swf、movie、mp3等格式
■ [url=http://www.puidokas.com/portfolio/frogjs/]FrogJS Javascript Gallery[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/250/image/2008-05-15/lightbox_puidokas.jpg.jpg[/img]
[Note]
[url]www.puidokas.com[/url]
a different way of showcasing galleries(best used when a page-by-page gallery is needed, as is the case with photo stories)
■ [url=http://code.google.com/p/galleria/]Galleria[/url] ( [url=http://monc.se/galleria/]homesite[/url]、[url=http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails]lightweight gallery[/url] )
[img]http://cache7.badongo.com/thumbnails/disk23/250/image/2008-05-15/lightbox_monc.jpg.jpg[/img]
[Note]
monc.se
■ [url=http://mediaeventservices.com/blog/2007/11/15/ajax-image-gallery-powered-by-slideflow-like-cover-flow/]AJAX Image Gallery powered by Slideflow (like Cover Flow) [/url]
[img]http://cache7.badongo.com/thumbnails/disk23/animated/image/2008-05-15/lightbox_mediaeventservices.gif[/img]
[Note]
mediaeventservices.com
■ [url=http://www.robertnyman.com/jas/]JaS gallery[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/animated/image/2008-05-15/lightbox_robertnyman.gif[/img]
[Note]
[url]www.robertnyman.com[/url]
■ [url=http://www.outcut.de/MooFlow/]MooFlow[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/250/image/2008-05-15/lightbox_outcut.jpg.jpg[/img]
[Note]
[url]www.outcut.de[/url]
支援 mouse wheel、reflections、UI skinable via CSS
■ [url=http://mjijackson.com/shadowbox/index.html]Shadowbox[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/250/image/2008-05-15/lightbox_mjijackson.jpg.jpg[/img]
[Note]
mjijackson.com
支援 photo resize、thumb gallery、client-side image maps可開啟 flash、movies、web pages
■ [url=http://www.thedeveloperinside.com/blog/moocicle-sample-javascript-gallery/]mooCicle[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/animated/image/2008-05-15/lightbox_thedeveloperinside.gif[/img]
[Note]
[url]www.thedeveloperinside.com[/url]
類似 slideshow、無縮圖
■ [url=http://benjaminsterling.com/jqgalviewiii-proof-of-concept/]jqGalViewIII (proof of concept)[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/animated/image/2008-05-15/lightbox_benjaminsterling.gif[/img]
[Note]
benjaminsterling.com
■ [url=http://diverged.org/thumbnail/]Live Thumbnail[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/250/image/2008-05-15/lightbox_diverged.jpg.jpg[/img]
[Note]
diverged.org
超級陽春(沒有說明文件、下載點，效果差強人意)
■ [url=http://minishowcase.frwrd.net/]minishowcase[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/250/image/2008-05-15/lightbox_minishowcase.jpg.jpg[/img]
[Note]
minishowcase.frwrd.net
php/javascript online photo gallery, powered by AJAX自動製作縮圖
■ [url=http://fennecfoxen.org/pyxy/gallery]Pyxy-gallery[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/250/image/2008-05-15/lightbox_fennecfoxen.jpg.jpg[/img]
[Note]
fennecfoxen.org AJAX image gallery in PHP and JavaScript
■ [url=http://www.zenphoto.org/]zenphoto[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/250/image/2008-05-15/lightbox_zenphoto.jpg.jpg[/img]
[Note]
[url]www.zenphoto.org[/url]
require PHP 4.10+ with GD support & MySQL 3.23+
Automatically generated thumbnails
Video support for Flash Video
沒有 lightbox 效果
■ [url=http://www.e2interactive.com/e2_photo_gallery/](E)2 Photo Gallery[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/animated/image/2008-05-15/lightbox_e2interactive.gif[/img]
[Note]
[url]www.e2interactive.com[/url]
XML Driven, 須 PHP 配合
■ [url=http://livepipe.net/projects/photo_folder/]photo folder[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/animated/image/2008-05-15/lightbox_livepipe.gif[/img]
[Note]
livepipe.net
requires PHP 5+ & GD image library 縮圖有捲軸做移動
■ [url=http://www.google.com/uds/solutions/slideshow/index.html]AJAX Slide Show[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/250/image/2008-05-15/lightbox_google.jpg.jpg[/img]
[Note]
[url]www.google.com[/url]
■ [url=http://www.couloir.org/js_slideshow/]Couloir Slideshow[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/250/image/2008-05-15/lightbox_couloir.jpg.jpg[/img]
[Note]
[url]www.couloir.orgphoto[/url]
slideshow of Flash-like behavior
■ [url=http://slideshow.triptracker.net/]TripTracker[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/250/image/2008-05-15/lightbox_triptracker.jpg.jpg[/img]
[Note]
slideshow.triptracker.net
JavaScript image viewer with an animated slideshow feature
■ [url=http://www.malsup.com/jquery/cycle/]jQuery Cycle Plugin[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/animated/image/2008-05-15/lightbox_malsup.gif[/img]
[Note]
[url]www.malsup.com[/url]
slideshow plugin 多種轉景
■ [url=http://www.flickrshow.com/]FlickrShow - Simple Javascript Slideshows[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/animated/image/2008-05-15/lightbox_flickrshow.gif[/img]
[Note]
[url]www.flickrshow.com[/url]
■ [url=http://www.electricprism.com/aeron/slideshow/]Slideshow[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/animated/image/2008-05-15/lightbox_electricprism.gif[/img]
[Note]
[url]www.electricprism.com[/url]
■ [url=http://slideshow.webtwo.ws/]Ajax SlideShow[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/250/image/2008-05-15/lightbox_webtwo.jpg.jpg[/img]
[Note]
slideshow.webtwo.ws
XML Based Configuration、Flickr.com compatible
■ [url=http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html]slideViewer[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/250/image/2008-05-15/lightbox_gcmingati.jpg.jpg[/img]
[Note]
[url]www.gcmingati.net[/url]
下方圖片張數索引自動生成，無法使用縮圖
■ [url=http://efectorelativo.net/laboratory/noobSlide/sample.html]noobSlide - mootools[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/250/image/2008-05-15/lightbox_efectorelativo.jpg.jpg[/img]
[Note]
efectorelativo.net可用縮圖選擇、多種轉景效果
:hert
----------------------------------------
[u]CSS-Based [/u]
■ [url=http://www.cssplay.co.uk/articles/gallery/index.html]A Photograph Gallery Tutorial[/url]
[url=http://www.cssplay.co.uk/menu/gallery.html]Demo1[/url]、[url=http://www.cssplay.co.uk/menu/photo_album.html#nogo]Demo2[/url]、[url=http://www.cssplay.co.uk/menu/lightbox.html#flower8]Demo3[/url]、[url=http://www.cssplay.co.uk/menu/photo_scroll.html#nogo]Demo4[/url]、[url=http://www.cssplay.co.uk/menu/gallery3l.html]Demo5[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/animated/image/2008-05-10/css_cssplay.gif[/img]
[Note]
[url]www.cssplay.co.uk/menu/gallery.html[/url]
■ [url=http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/]CSS Image Gallery[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/animated/image/2008-05-10/css_dynamicdriveimagegallery.gif[/img]
[Note]
[url]www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/[/url]
■ [url=http://mikecherim.com/experiments/css_photo_showcase.php]Photo Showcase[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/animated/image/2008-05-10/css_mikecherim.gif[/img]
[Note]
mikecherim.com
■ [url=http://sonspring.com/journal/hoverbox-image-gallery]Hoverbox[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/animated/image/2008-05-10/css_sonspring.gif[/img]
[Note]
sonspring.com
■ [url=http://cross-browser.com/toys/img_gallery_2.php]xImgGallery[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/animated/image/2008-05-10/css_crossbrowser.gif[/img]
[Note]
cross-browser.com
■ [url=http://tjkdesign.com/articles/gallery/photo_gallery.asp]easyAlbum[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/250/image/2008-05-10/css_tjkdesign.jpg.jpg[/img]
[Note]
tjkdesign.com
■ [url=http://vikjavev.no/highslide/]Highslide JS[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/animated/image/2008-05-10/css_vikjavev.gif[/img]
[Note]
vikjavev.no
﹡Only non-commercial free可顯示 flash、iframe
■ [url=http://dasme.org/imagegal/]ImageGal[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/animated/image/2008-05-10/css_dasme.gif[/img]
[Note]
dasme.org PHP script
■ [url=http://design.tedforbes.com/]Satellite[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/250/image/2008-05-10/css_tedforbes.jpg.jpg[/img]
[Note]
design.tedforbes.com
結合 PHP & Yahoo Flickr
■ [url=http://lifedraft.de/projekte/dhonishow/]Dhonishow[/url]
[img]http://cache7.badongo.com/thumbnails/disk24/animated/image/2008-05-10/css_lifedraft.gif[/img]
[Note]
lifedraft.deinline gallery
■ [url=http://www.bigfolio.com/drop_proof/]DropProof[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/animated/image/2008-05-10/css_bigfolio.gif[/img]
[Note]
[url]www.bigfolio.com[/url]
PHP tool for simple image proofing
Bug: 大圖一定會顯示在最上方，須自行捲動scrollbar
■ [url=http://iamacamera.org/sandbox/photoshuffler/]CSS Photo Shuffler[/url]
[img]http://cache7.badongo.com/thumbnails/disk23/250/image/2008-05-10/css_iamacamera.jpg.jpg[/img]
[Note]
iamacamera.org
*************************
見下面這↓，可存成 mht 單檔格式
[url]http://jocosn.50webs.com/memo/web2_temp_20080508.html[/url]
