jQuery仿QQ空间响应式相册插件

gallery.js很简单，直接拿到项目中使用。只要定义好结构，引入插件，便可生成类似QQ空间的轮播效果。而且它可以自动生成缩略图、相片的大小改变、选择、排序等

淘建站为您提供更多_图片代码_图片轮播_缩略图_画廊，在此特别感谢您对我们的支持与厚爱！

相册结构图

<div id="rg-gallery" class="rg-gallery">
    <div class="rg-thumbs">
        <!-- Elastislide Carousel Thumbnail Viewer -->
        <div class="es-carousel-wrapper">
            <div class="es-nav">
                <span class="es-nav-prev">前一张</span>
                <span class="es-nav-next">后一张</span>
            </div>
            <div class="es-carousel">
                <ul>
                    <li><a href="#"><img src="images/thumbs/12.jpg" data-large="images/12.jpg" alt="HTML5手机声音提示" data-description="HTML5手机声音提示" /></a></li>
                    <li><a href="#"><img src="images/thumbs/9.jpg" data-large="images/9.jpg" alt="HTML5手机音频播放器" data-description="HTML5手机音频播放器" /></a></li>
                    <li><a href="#"><img src="images/thumbs/19.jpg" data-large="images/19.jpg" alt="jQuery+PHP实现开关效果" data-description="jQuery+PHP实现开关效果" /></a></li>
                </ul>
            </div>
        </div>
        <!-- End Elastislide Carousel Thumbnail Viewer -->
    </div><!-- rg-thumbs -->
</div>

引入相关插件

<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript" src="js/gallery.js"></script>

定义变量js/gallery.js

var $rgGallery = $('#rg-gallery'),
        // carousel container
        $esCarousel = $rgGallery.find('div.es-carousel-wrapper'),
        // the carousel items
        $items = $esCarousel.find('ul > li'),
        // total number of items
        itemsCount = $items.length;