jQuery图片展示插件SuperBox

查看演示立即下载

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

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();
});

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：信用卡表单验证插件Creditly.js
下一个特效： jQuery视差插件ImageScroll