Andygridアンディーグリッド

Facebookでシェアする

AndygridAndygridとは

Andygridとは、レスポンシブなグリッドデザインを実現するjQueryプラグインです。

縦横比がランダムな画像を効果的に表示することができます。なお、順番もランダムにすることが可能です。

How to use使用方法

使用方法は非常に簡単です。

HTML

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

            <div class="wrap">
                
                <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>
                         <a class="wrap__box__inner__a" href="リンク先URL"></a>
                    </div>
                </div>
                
            </div>
        

キャプションに画像を使う場合

            <div class="wrap">
            
                <div class="wrap__box">
                    <div class="wrap__box__inner">
                        <img class="wrap__box__inner__img" src="イメージファイルまでのパス/イメージファイル.jpg" width="661" height="881">
                            <img class="wrap__box__inner__caption--img" src"イメージファイルまでのパス/ホバー後に表示させたいイメージファイル.jpg">
                        <a class="wrap__box__inner__a" href="リンク先URL"></a>
                    </div>
                </div>
                
            </div>
        

javascript

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

寄付

入金額選択

このプラグインの開発のモチベーションは寄付によって保たれています。是非寄付をお願い致します。

jsの読み込み

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

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

            
            <script src="あなたが置いたパス/jquery.andygrid-1.3.js"></script>
            
            <script>
            
            $(document).on("ready",function(){
                $(".wrap").andygrid();
            });
            
            </script>
            
        

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

オプション設定(任意)

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

            <script>
            
            $(document).on("ready",function(){
                $(".wrap").andygrid({
                    "margin": 20,
                    "cell": 260,
                    "captionBg": "#ffffff",
                    "shuffle":true,
                    "furufuru": false,
                    "rireki": false,
                    
                });
            });
            
            </script>

オプション解説
margin
ボックスとボックスの間のマージンを設定します。単位はピクセルですが、正の整数で設定してください。
cell
ボックスの大きさを自然数で設定します。実際に表示されるボックスの幅は、以下の計算で求められます。
ボックスの幅(px) = {ウインドウ幅 / (設定値(自然数)} - {マージン(px)*2}
captioBg
キャプションの背景の色を設定します。 例)#aaaaaa //灰色 rgba(0,0,0,0.5) //黒色半透明
shuffle
ボックスの配置をランダムにするかどうかを選択できます。ランダムにしたくない場合はfalseを設定してください。(デフォルトはtrue)
furufuru
スマートフォンやタブレット端末の時、端末を振ることでシャッフルする機能をオンにするかオフにするかを設定できます。この機能をtrueにする場合は、shuffleオプションを設定しないか、trueで設定してください。(デフォルトはfalse)
rireki
一度リンクを踏んだブロックにvisitedクラスを設定し、スタイルを設定できるようになります。(デフォルトはfalse)
もし、訪問済みのブロックを半透明表示したい時は、このオプションの値をtrueに設定の上、以下のスタイルシートを設定してください。
履歴は24時間でリセットされます。
                    
                    .visited{
                        opacity:0.5 !important;
                    }
                    
                    
                    
cssCostom
ボックスのキャプションなどのスタイルを外部cssでカスタムしたい場合、trueを設定してください。スタイルをjsで設定しなくなります。(デフォルトはfalse)

cssのカスタマイズ

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

                    .wrap{
                        width: 100%;
                        display: block;
                        heignt: 600px;
                        position: relative;
                    }
                    .wrap__box{
                        position: absolute;
                        textAlign: center;
                        width: 200px;
                        height: 200px;
                        overflow: hidden;
                        top: -1500px;
                        left: -1600px;
                        display: block;
                        position: absolute;
                    }
                    .wrap__box__inner{
                        width: 100%;
                        height: 600px;
                        margin: 20px;
                        position: relative;
                        overflow: hidden;
                        display: block;

                    }
                    .wrap__box__inner__img{
                        width: 100%;
                        height: auto;
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        zIndex: 0;
                        display: block;
                    }
                    .wrap__box__inner__a{
                        width: 100%;
                        height: auto;
                        display: block;
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        zIndex: 10;

                    }
                    .wrap__box__inner__caption{
                        width: 100%;
                        height: 110%;
                        margin: -10px;
                        display: block;
                        position: relative;
                        background: defolt[captionBg],
                        opacity: 0,
                        top: 0px;
                        left: 0px;
                        zIndex: 9;
                        display: table;

                    }
                    .wrap__box__inner__caption__span{
                        width: 100%;
                        height: 100%;
                        display: block;
                        position: relative;
                        fontSize: 30px;
                        display: table-cell;
                        verticalAlign: middle;

                    }
                    .wrap__box__inner__caption--img{
                        width: 100%;
                        height: auto;
                        margin: 0px;
                        display: block;
                        position: absolute;
                        opacity: 0,
                        top: 0px;
                        left: 0px;
                        zIndex: 0;

                    }
                    .visited{
                        opacity:0.5 !important;
                    }

Sample(defolt)使用例(デフォルト)

Img Title
Img Title
Img Title
Img Title
Img Title
Img Title
Img Title
Img Title
Img Title
Img Title
Img Title
Img Title
Img Title

Sample(option)使用例(オプション)

margin:0
cell:400
captionBg:rgba(255,255,255,0.5)
furufuru:true
rireki:true

    
    <script>
        $(document).on("ready",function(){
            $(".wrapSerector").andygrid({
                "margin":0,
                "cell":400,
                "captionBg":"rgba(255,255,255,0.5)",
                "furufuru":true,
                "rireki":true
            });
        });
    </script>
    
  
    

なお、履歴をリセットするボタンを設置したい場合は、下記のようにすることで設置できます。

    
    <script>
        $(document).on("ready",function(){
            $(".wrap--MarginZero").andygrid({
                "margin":0,
                "cell":400,
                "captionBg":"rgba(255,255,255,0.5)",
                "furufuru":true,
                "rireki":true
            });
            $("#リセットボタンのID").cokkieReset();
        });
    </script>
    
  
    

Img Title
Img Title
Img Title
Img Title
Img Title
Img Title
Img Title
Img Title
Img Title
Img Title
Img Title
Img Title
Img Title

Old version過去のバージョン

andygrid-1.2.js