An accordion-style album image unfolded by jquery

We have previously shared many jquery accordion-style menus, such as the CSS3 accordion drop-down menu. The jquery accordion that is to be shared today is very special, and it is an accordion-style photo album with an expanded effect. We just click on the image thumbnail to expand the current picture and shrink the other images.

Online preview Source Download

Code of Implementation

HTML code:

 <articleID= "Home">        <Header>        </Header>        <articleID= "Gallery">            < Section>                <H1>Portfolio</H1>                <ahref= "Images/autumn-large.jpg"title= "An autumn ThemeForest theme">                    <imgsrc= "Images/autumn-thumb.jpg"width= " the"Height= "All" />                    <P>the Seasons, Autumn</P>                </a><ahref= "Images/autumn-home-large.jpg"title= "the homepage">                    <imgsrc= "Images/autumn-home-thumb.jpg"width= " the"Height= "All" />                    <P>the Seasons, Autumn homepage</P>                </a><ahref= "Images/mustash-large.jpg"title= "Online Art Market">                    <imgsrc= "Images/mustash-thumb.jpg"width= " the"Height= "All" />                    <P>mustash.ro</P>                </a><ahref= "Images/winter-large.jpg"title= "Upcoming Winter themeforest Theme">                    <imgsrc= "Images/winter-thumb.jpg"width= " the"Height= "All" />                    <P>the Seasons, Winter</P>                </a><ahref= "Images/winter-home-large.jpg"title= "Theme homepage">                    <imgsrc= "Images/winter-home-thumb.jpg"width= " the"Height= "All" />                    <P>the Seasons, Winter homepage</P>                </a><ahref= "Images/bluebusiness-home-large.jpg"title= "The homepage for bluebusiness">                    <imgsrc= "Images/bluebusiness-home-thumb.jpg"width= " the"Height= "All" />                    <P>bluebusiness Homepage</P>                </a>            </ Section>            < Section>                <H1> Products</H1>                <ahref= "Images/bluebusiness-large.jpg"title= "Classic business theme on ThemeForest">                    <imgsrc= "Images/bluebusiness-thumb.jpg"width= " the"Height= "All" />                    <P>bluebusiness</P>                </a><ahref= "Images/bluebusiness-home-large.jpg"title= "The homepage for bluebusiness">                    <imgsrc= "Images/bluebusiness-home-thumb.jpg"width= " the"Height= "All" />                    <P>bluebusiness Homepage</P>                </a>            </ Section>            < Section>                <H1>upcoming</H1>                <ahref= "Images/winter-large.jpg"title= "Upcoming Winter themeforest Theme">                    <imgsrc= "Images/winter-thumb.jpg"width= " the"Height= "All" />                    <P>the Seasons, Winter</P>                </a>            </ Section>            < Section>                <H1>Projects</H1>                <ahref= "Images/acorn-vp-large.jpg"title= "HTML5 video player results from Dev.opera article">                    <imgsrc= "Images/acorn-vp-thumb.jpg"width= " the"Height= "All" />                    <P>Acorn Video Player</P>                </a><ahref= "Images/acorn-vp2-large.jpg"title= "Acorn video player with a different child theme">                    <imgsrc= "Images/acorn-vp2-thumb.jpg"width= " the"Height= "All" />                    <P>Acorn Video Player, Smalldark Theme</P>                </a>            </ Section>        </article>    </article>

CSS code:

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

JS code, here need to reference a jquery.min.js and jquery.accordiongallery.min.js external JS. Initialize the JS as follows:

$ (document). Ready (function  () {            $ (' #gallery '). Accordiongallery ();        });

This article originates from the network, by the Love programming organizes publishes, the original address: http://www.w2bc.com/Article/7436

An accordion-style album image unfolded by jquery