jQuery

【jQuery】エフェクトでウィンドウを表示するためのスクリプトjQuery SuperBox

December 7, 2018
jQuery SuperBox!

jQuery SuperBoxはエフェクトでウィンドウを表示するためのスクリプト

Getting started

スクリプトをインストール

<link rel="stylesheet" href="jquery.superbox.css" type="text/css" media="all" />
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript" src="jquery.superbox-min.js"></script>

rel属性から生成されます。

$(function(){
	$.superbox();
});
$.superbox.settings = {
	boxId: "superbox", // Id attribute of the "superbox" element
	boxClasses: "", // Class of the "superbox" element
	overlayOpacity: .8, // Background opaqueness
	boxWidth: "600", // Default width of the box
	boxHeight: "400", // Default height of the box
	loadTxt: "Loading...", // Loading text
	closeTxt: "Close", // "Close" button text
	prevTxt: "Previous", // "Previous" button text
	nextTxt: "Next" // "Next" button text
};

Use

デフォルト

<a href="http://example.com/picture.png" rel="superbox[image]">SuperBox</a>