jQuery图片展示插件SuperBox

 查看演示  website  立即下载

SuperBox减少了JavaScript和图像加载的依赖，使用HTML5的数据属性，响应布局。

SuperBox工程为静态的图片库，你可以点击以显示一个完整版的图像。在演示中每个图像具有相同的尺寸，但SuperBox支持的任何图像的大小。

使用方法

HTML

<div class="superbox-list">
    <img src="img/superbox/superbox-thumb-1.jpg" data-img="img/superbox/superbox-full-1.jpg" alt="" class="superbox-img">
</div>

默认情况下， display:inline-block;创建的元素，这是我们不希望之间的差距。因此，要根除这个问题，我们可以做以下一些HTML注释，这是完全可以接受的：

<div class="superbox-list">
    <img src="img/superbox/superbox-thumb-1.jpg" data-img="img/superbox/superbox-full-1.jpg" alt="" class="superbox-img">
</div><!--
--><div class="superbox-list">
    <img src="img/superbox/superbox-thumb-2.jpg" data-img="img/superbox/superbox-full-2.jpg" alt="" class="superbox-img">
</div><!--
--><div class="superbox-list">
    <img src="img/superbox/superbox-thumb-3.jpg" data-img="img/superbox/superbox-full-3.jpg" alt="" class="superbox-img">
</div>

HTML5的数据属性

SuperBox我已经添加到显示完整的图像数据，IMG自定义属性，这意味着我们不必依靠更多的标记，因为它动态地追加数据IMG源为您服务。

CSS

CSS的每个“盒子”看起来像这样，你可以看到包括*display:inline;下为IE7修复：
.superbox-list {
    display:inline-block;
    *display:inline;
    zoom:1;
    width:12.5%;
}

每个图像使用的最大宽度属性一样，所以它响应流畅的视图宽度。

响应

SuperBox也是有求必应，允许你在任何设备上使用它。媒体查询是非常基本的，因此您可以构建和扩展，以适合您的项目中。

jQuery

jQuery的非常简单的东西，这是一个非常简单的轻量级插件：

;(function($) {
        
    $.fn.SuperBox = function(options) {
        
        var superbox      = $('<div class="superbox-show"></div>');
        var superboximg   = $('<img src="" class="superbox-current-img">');
        var superboxclose = $('<div class="superbox-close"></div>');
        
        superbox.append(superboximg).append(superboxclose);
        
        return this.each(function() {
            
            $('.superbox-list').click(function() {
        
                var currentimg = $(this).find('.superbox-img');
                var imgData = currentimg.data('img');
                superboximg.attr('src', imgData);
                
                if($('.superbox-current-img').css('opacity') == 0) {
                    $('.superbox-current-img').animate({opacity: 1});
                }
                
                if ($(this).next().hasClass('superbox-show')) {
                    superbox.toggle();
                } else {
                    superbox.insertAfter(this).css('display', 'block');
                }
                
                $('html, body').animate({
                    scrollTop:superbox.position().top - currentimg.width()
                }, 'medium');
            
            });
                        
            $('.superbox').on('click', '.superbox-close', function() {
                $('.superbox-current-img').animate({opacity: 0}, 200, function() {
                    $('.superbox-show').slideUp();
                });
            });
            
        });
    };
})(jQuery);

然后，您可以调用SuperBox像这样：

$(function() {
    $('.superbox').SuperBox();
});

PREVIOUS:
NEXT:
frescojs一个美丽的响应灯箱插件
信用卡表单验证插件Creditly.js