andygrid_1_2アンディーグリッドandygrid_1_2

Facebookでシェアする

andygrid-1.2.js How to useandygrid-1.2.js使用方法

このバージョンは過去のバージョンです。最新バージョンはandygrid-1.3.jsです。

andygrid-1.2.js

ie8以下では動作しません。

HTML

andygrid-1.2.js のマークアップは、以下のようにします。尚、width属性とheight属性の値は必須です。正しく入力しないと動作しません。
なお、imgタグの属性値にpxをつけないでください。
(ソースコード上でダブルクリックするとすべてのコードを選択できます)

            <div class="wrap">
            
                <a href="リンク先URL">
                <div class="wrap__box">
                    <div class="wrap__box__inner">
                        <img class="wrap__box__inner__img" src="イメージファイルまでのパス/イメージファイル.jpg" width="661" height="881">
                        <div class="wrap__box__inner__caption">
                            <span class="wrap__box__inner__caption__span">Img 任意のタイトル</span>
                        </div>
                    </div>
                </div>
                </a>
                
            </div>
        

javascript

andygrid-1.2.jsファイルをダウンロードして、webサーバーにアップロードしてください。

お支払い

入金額選択

このプラグインはシェアウエアです。このバージョンは非商用サイトの場合、¥200。商用サイトの場合、¥400で購入いただけます。

jsの読み込み

ヘッダータグ内部に以下のコードをコピペしてjQueryと先ほどアップロードしたjsファイルを読み込みます。

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

            
            <script src="あなたが置いたパス/andygrid-1.2.js"></script>
            
            <script>
            
            $(document).andygrid();
            
            </script>
            
        

お疲れ様です。以上でandygridの設置が終わりました。お気づきの通り、andygridはcssファイルの面倒な設定が必要ありません。

オプション設定(任意)

以下のオプションがありますので、自由に設定してください。

            <script>
            
            $(document).andygrid({
                "random":1,   //ランダム配置しないなら0
                "margin":10,  //ボックスのマージン 大体0~30位推奨
                "width" :250, //ボックスの横幅(ピクセルではない)ウインドウの幅をこの数字で割った物が実際のボックスの横幅になる。
                "ra": "0%",   //ボックスの角丸(100%にすると円になります)
                "cssCoustom":1  //cssをカスタムしたいときは0にするとjsでcssを設定しなくなります。
            });
            
            </script>

cssのカスタマイズ(オプション)

cssの知識をお持ちの方でさらにオリジナリティを表現したい方は、以下のcssを参考にカスタムしてお使いください。尚、その際はcssが有効になるようにandygrid-1.2.jsファイルのオプション設定を変更してください。

.wrap {
    position: relative;
    width: 100%;
    
}
.wrap__box {
    position: absolute;
    width: 100px;
    height: auto;
    overflow: hidden;
}
.wrap__box__inner{
	width:100%;
	height:600px;
	margin:20px;
	position: relative;
	overflow:hidden;
	}
.wrap__box__inner__img {
	width:100%;
	height:auto;
	position: absolute;
	top: 0px;
	left: 0px;
}
.wrap__box__inner__caption {
	width:100%;
	height:110%;
	margin:-10px;
	position: relative;
	background: rgba(225,225,225,0.70);
	opacity:0;
	top: 0px;
	left: 0px;
	z-index:99;
	display:table;
}
.wrap__box__inner__caption__span{
	width:100%;
	height:100px;
	font-size:30px;
	text-align:center;
	display: table-cell;
	vertical-align: middle;
    
}
            
        

Sample使用例