[JS]lightboxの進化形、レスポンシブ対応で画像を拡大表示するスクリプト -SuperBox

サイト構築 -JavaScript

Post on:2013年4月8日

SuperBoxのデモ

デモは、IE7/8/9/10をはじめ、全てのモダンブラウザでご覧ください。
まずは、通常の状態です。

デモページ：幅1,200pxで表示

ウォール状に配置された各画像をクリックすると、アニメーションと共に画像を拡大表示します。

デモページ：画像を拡大表示

レスポンシブにも対応しているので、表示サイズにあわせてレイアウトは最適化されます。

デモページ：幅780pxで表示

SuperBoxの使い方

Step 1: 外部ファイル

「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。

<link href="css/style.css" rel="stylesheet">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/superbox.js"></script>

Step 2: HTML

まずは、基本構造です。
HTML5のdata属性で拡大する画像を指定し、classに「superbox-img」を加えます。

<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要素で内包します。
※divタグの終わりと始まりのコメントは、inlline-block時に生じる隙間を消すためです。

<div class="superbox">
<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>
</div>

Step 3: CSS

IE7用に「*display:inline;」を使用しています。

.superbox-list {
    display:inline-block;
    *display:inline;
    zoom:1;
    width:12.5%;
}

Step 4: JavaScript

ラッパーをjQueryのセレクタで指定し、スクリプトを実行します。

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

SuperBox

SuperBoxは非常にシンプルなプラグインで、下記のようになっています。

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