Movatterモバイル変換


[0]ホーム

URL:


コリス

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

サイト構築 -JavaScript

Post on:2013年4月8日

sponsorsr

lightboxよりJavaScriptと画像ロードの依存を少なくした、レスポンシブ対応で画像を拡大表示するjQueryのプラグインを紹介します。

サイトのキャプチャ

SuperBox the re-imagined lightbox gallery
Superbox -GitHub

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

sponsors

Related Posts

top of page

  • ワードプレステンプレート

Sponsors

  • Eagle
  • ソースネクスト
  • 広告掲載募集中
coliss

Recnet Entry

Pickup Entry

Recommend

top of page

Category

Blog Info

当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。
©2025 coliss

[8]
ページ先頭

©2009-2025 Movatter.jp