Photo Album plugin based on JQUERY/CSS3 to achieve puzzle effect

Today we are going to share a cool jquery album plug-in, first photo album in the image will be tilted at a certain angle placed on the page, click on the image thumbnail to expand the picture, and the picture is made of all the thumbnails, the picture unfolded and collapsed animation effect is very good. Of course the picture tilt needs CSS3 support.

Online preview Source Download

The implemented code.

    <DivID= "Im_wrapper"class= "Im_wrapper">            <Divstyle= "background-position:0px 0px;"><imgsrc= "Images/thumbs/1.jpg"alt="" /></Div>            <Divstyle= "background-position:-125px 0px;"><imgsrc= "Images/thumbs/2.jpg"alt="" /></Div>            <Divstyle= "background-position:-250px 0px;"><imgsrc= "Images/thumbs/3.jpg"alt="" /></Div>            <Divstyle= "background-position:-375px 0px;"><imgsrc= "Images/thumbs/4.jpg"alt="" /></Div>            <Divstyle= "background-position:-500px 0px;"><imgsrc= "Images/thumbs/5.jpg"alt="" /></Div>            <Divstyle= "background-position:-625px 0px;"><imgsrc= "Images/thumbs/6.jpg"alt="" /></Div>            <Divstyle= "background-position:0px-125px;"><imgsrc= "Images/thumbs/7.jpg"alt="" /></Div>            <Divstyle= "background-position:-125px-125px;"><imgsrc= "Images/thumbs/8.jpg"alt="" /></Div>            <Divstyle= "background-position:-250px-125px;"><imgsrc= "Images/thumbs/9.jpg"alt="" /></Div>            <Divstyle= "background-position:-375px-125px;"><imgsrc= "Images/thumbs/10.jpg"alt="" /></Div>            <Divstyle= "background-position:-500px-125px;"><imgsrc= "Images/thumbs/11.jpg"alt="" /></Div>            <Divstyle= "background-position:-625px-125px;"><imgsrc= "Images/thumbs/12.jpg"alt="" /></Div>            <Divstyle= "background-position:0px-250px;"><imgsrc= "Images/thumbs/13.jpg"alt="" /></Div>            <Divstyle= "background-position:-125px-250px;"><imgsrc= "Images/thumbs/14.jpg"alt="" /></Div>            <Divstyle= "background-position:-250px-250px;"><imgsrc= "Images/thumbs/15.jpg"alt="" /></Div>            <Divstyle= "background-position:-375px-250px;"><imgsrc= "Images/thumbs/16.jpg"alt="" /></Div>            <Divstyle= "background-position:-500px-250px;"><imgsrc= "Images/thumbs/17.jpg"alt="" /></Div>            <Divstyle= "background-position:-625px-250px;"><imgsrc= "Images/thumbs/18.jpg"alt="" /></Div>            <Divstyle= "background-position:0px-375px;"><imgsrc= "Images/thumbs/19.jpg"alt="" /></Div>            <Divstyle= "background-position:-125px-375px;"><imgsrc= "Images/thumbs/20.jpg"alt="" /></Div>            <Divstyle= "background-position:-250px-375px;"><imgsrc= "Images/thumbs/21.jpg"alt="" /></Div>            <Divstyle= "background-position:-375px-375px;"><imgsrc= "Images/thumbs/22.jpg"alt="" /></Div>            <Divstyle= "background-position:-500px-375px;"><imgsrc= "Images/thumbs/23.jpg"alt="" /></Div>            <Divstyle= "background-position:-625px-375px;"><imgsrc= "Images/thumbs/24.jpg"alt="" /></Div>        </Div>        <DivID= "Im_loading"class= "Im_loading"></Div>        <DivID= "Im_next"class= "Im_next"></Div>        <DivID= "Im_prev"class= "Im_prev"></Div>        <Div>        </Div>

via:http://www.w2bc.com/article/31299

Photo Album plugin based on JQUERY/CSS3 to achieve puzzle effect