Album plug-in based on jQuery/CSS3 to implement the puzzle effect, jquerycss3

Album plug-in based on jQuery/CSS3 to implement the puzzle effect, jquerycss3

Today we are going to share a very cool jQuery album plug-in. First, the images in the album will be skewed to a certain angle on the page. Click the thumbnail to expand the image, in addition, images are spliced by all thumbnails, And the animation effects of image expansion and convergence are also very good. Of course, image skew requires CSS3 support.

Download Online Preview source code

Implementation code.

    <div id="im_wrapper" class="im_wrapper">            <div style="background-position:0px 0px;"></div>            <div style="background-position:-125px 0px;"></div>            <div style="background-position:-250px 0px;"></div>            <div style="background-position:-375px 0px;"></div>            <div style="background-position:-500px 0px;"></div>            <div style="background-position:-625px 0px;"></div>            <div style="background-position:0px -125px;"></div>            <div style="background-position:-125px -125px;"></div>            <div style="background-position:-250px -125px;"></div>            <div style="background-position:-375px -125px;"></div>            <div style="background-position:-500px -125px;"></div>            <div style="background-position:-625px -125px;"></div>            <div style="background-position:0px -250px;"></div>            <div style="background-position:-125px -250px;"></div>            <div style="background-position:-250px -250px;"></div>            <div style="background-position:-375px -250px;"></div>            <div style="background-position:-500px -250px;"></div>            <div style="background-position:-625px -250px;"></div>            <div style="background-position:0px -375px;"></div>            <div style="background-position:-125px -375px;"></div>            <div style="background-position:-250px -375px;"></div>            <div style="background-position:-375px -375px;"></div>            <div style="background-position:-500px -375px;"></div>            <div style="background-position:-625px -375px;"></div>        </div>        <div id="im_loading" class="im_loading"></div>        <div id="im_next" class="im_next"></div>        <div id="im_prev" class="im_prev"></div>        <div>        </div>

Via: http://www.w2bc.com/Article/31299