Chowky 今日見到一個新的jQuery gallery.
原本以為只是just another gallery only，Chowky 看完整個不同的demo 之後，這個plugin絕不簡單，另外可以做到content changer. 可以做到以類似的tab 的效果，而且非常flexible，既容易implement ，customize 又簡單，非常吸引，效果一流。配上MIT License，web developer 絕對要記下。
用法簡單:
(1) 先加入以下的javascript 去set panel 同埋frame 既size $('#photos').galleryView({ panel_width: 800, panel_height: 300, frame_width: 100, frame_height: 100, }); （２） 加入 div． ｄｉｖ id 要和上面的一樣 <pre lang="html4strict"> <div id="photos" class="galleryview"> ...</div>
（３）. A series of panel
s, with optional overlays （ｏｖｅｒｙｌａｙ 是在相上面加入ｄｅｓｃｉｒｐｔｉｏｎ）
... <div class="panel"> <img src="img/gallery/02.jpg" alt="" /> <div class="panel-overlay"> <h2>Eden</h2> Photo by <a href="http://www.sxc.hu/profile/emsago" target="_blank">emsago</a>. View full-size photo <a href="http://www.sxc.hu/photo/152865" target="_blank">here</a>.</div> </div> ...
3. An unordered list of images (with optional title attributes if show_captions is set to true) 非常簡單的做法，連javascript 的ａｒｒａｙ都不用，非常簡單，只是用ｕｌ就可以。
<ul class="filmstrip"> <li><img title="Effet du soleil" src="img/gallery/frame-01.jpg" alt="Effet du soleil" /></li> <li><img title="Eden" src="img/gallery/frame-02.jpg" alt="Eden" /></li> <li><img title="Snail on the Corn" src="img/gallery/frame-03.jpg" alt="Snail on the Corn" /></li> <li><img title="Flowers" src="img/gallery/frame-04.jpg" alt="Flowers" /></li> <li><img title="Alone Beach" src="img/gallery/frame-06.jpg" alt="Alone Beach" /></li> <li><img title="Sunrise Trees" src="img/gallery/frame-05.jpg" alt="Sunrise Trees" /></li> <li><img title="Waterfall" src="img/gallery/frame-07.jpg" alt="Waterfall" /></li> <li><img title="Death Valley" src="img/gallery/frame-08.jpg" alt="Death Valley" /></li> </ul>
Recent Comments