一款由jQuery實作的手風琴式相冊圖檔展開效果

之前我們有分享過很多jQuery手風琴樣式的菜單，比如CSS3手風琴下拉菜單。今天要分享的jQuery手風琴效果很特别，它是手風琴樣式的相冊圖檔展開效果。我們隻需點選圖檔縮略圖即可展開目前的圖檔，并将其他的圖檔收縮起來。

線上預覽   源碼下載下傳

實作的代碼

html代碼：

<article id="home">
        <header>
        </header>
        <article id="gallery">
            <section>
                <h1>
                    Portfolio</h1>
                <a href="images/autumn-large.jpg" target="_blank" rel="external nofollow"  title="An autumn ThemeForest theme">
                    <img src="images/autumn-thumb.jpg" width="125" height="90" />
                    <p>
                        The Seasons, Autumn</p>
                </a><a href="images/autumn-home-large.jpg" target="_blank" rel="external nofollow"  title="The Homepage">
                    <img src="images/autumn-home-thumb.jpg" width="125" height="90" />
                    <p>
                        The Seasons, Autumn Homepage</p>
                </a><a href="images/mustash-large.jpg" target="_blank" rel="external nofollow"  title="Online art market">
                    <img src="images/mustash-thumb.jpg" width="125" height="90" />
                    <p>
                        Mustash.ro</p>
                </a><a href="images/winter-large.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  title="Upcoming winter ThemeForest theme">
                    <img src="images/winter-thumb.jpg" width="125" height="90" />
                    <p>
                        The Seasons, Winter</p>
                </a><a href="images/winter-home-large.jpg" target="_blank" rel="external nofollow"  title="Theme homepage">
                    <img src="images/winter-home-thumb.jpg" width="125" height="90" />
                    <p>
                        The Seasons, Winter Homepage</p>
                </a><a href="images/bluebusiness-home-large.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  title="The Homepage for BlueBusiness">
                    <img src="images/bluebusiness-home-thumb.jpg" width="125" height="90" />
                    <p>
                        BlueBusiness Homepage</p>
                </a>
            </section>
            <section>
                <h1>
                    Products</h1>
                <a href="images/bluebusiness-large.jpg" target="_blank" rel="external nofollow"  title="Classic business theme on ThemeForest">
                    <img src="images/bluebusiness-thumb.jpg" width="125" height="90" />
                    <p>
                        BlueBusiness</p>
                </a><a href="images/bluebusiness-home-large.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  title="The Homepage for BlueBusiness">
                    <img src="images/bluebusiness-home-thumb.jpg" width="125" height="90" />
                    <p>
                        BlueBusiness Homepage</p>
                </a>
            </section>
            <section>
                <h1>
                    Upcoming</h1>
                <a href="images/winter-large.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  title="Upcoming winter ThemeForest theme">
                    <img src="images/winter-thumb.jpg" width="125" height="90" />
                    <p>
                        The Seasons, Winter</p>
                </a>
            </section>
            <section>
                <h1>
                    Projects</h1>
                <a href="images/acorn-vp-large.jpg" target="_blank" rel="external nofollow"  title="HTML5 video player results from Dev.Opera article">
                    <img src="images/acorn-vp-thumb.jpg" width="125" height="90" />
                    <p>
                        Acorn Video Player</p>
                </a><a href="images/acorn-vp2-large.jpg" target="_blank" rel="external nofollow"  title="Acorn video player with a different child theme">
                    <img src="images/acorn-vp2-thumb.jpg" width="125" height="90" />
                    <p>
                        Acorn Video Player, Smalldark Theme</p>
                </a>
            </section>
        </article>
    </article>
           

 css代碼：

#gallery
        {
            width: 100%;
            height: 500px;
        }
           

 js代碼，這裡需要引用一個jquery.min.js和jquery.accordiongallery.min.js外部js。初始化的js如下：

$(document).ready(function () {
            $('#gallery').accordionGallery();
        });