画像や指定範囲をクリックやマウスオーバーでFlip(裏返し)するJqueryプラグイン「Sponsor Flip Wall」

【この記事を読むのに必要な時間は約 16 分です。】

先日の記事、画像や指定範囲をクリックやマウスオーバーでFlip(裏返し)するJqueryプラグイン「QuickFlip2」でも少し触れたが、同様のFlip効果が得られるもうひとつのJqueryプラグイン「Sponsor Flip Wall」を紹介する。

Sponsor Flip Wallは本来下の図のように、複数のFlipパネルをタイル状に並べて表示し、phpで管理できるようにした非常に優れたjqueryプラグインだ。

1sponsor

こちらがSponsor Flip Wallのホームページ。こちらでデモも確認できる。

2sponsor

jQuery本体jqueryUI及びFlip!プラグインの用意

ファイルのダウンロード

jQueryjqueryUIをベースに「Flip!」というjqueryプラグインを利用して作成されている。jQuery本体はGoogle Ajax APIのホスティングを利用し、jqueryUIとjQuery Flip!プラグインは、それぞれダウンロードして利用することにする。
jqueryUIはこちらからダウンロード。
jQuery Flip! プラグインはこちらからダウンロード。
ダウンロードファイル:jquery-ui-1.10.4.zip / roncioso-Flip-jQuery-5f5d9a4.tar.gz

必要ファイルのアップロード

それぞれ解凍する。jqueryUIは、ui>minified>jquery-ui.min.jsファイルを、jQuery Flip!プラグインは、jquery.flip.min.jsファイルが必要。
必要ファイル:jquery-ui.min.zip / jquery.flip.min.js
それぞれサーバーにアップロードする。

今回は、画像や指定範囲(divBOX)をクリックやマウスオーバーでFlipさせるために利用することが前提。前回紹介した「QuickFlip 2」ではaタグで全体を指定したため、範囲の中にリンクアドレスを含めることができなかったが、Sponsor Flip Wallでは可能。そこが最大の違いだ。

jQuery本体、jqueryUI、jQuery Flip! プラグインの呼び出し

ヘッダー部分(<head>と</head>の間)に以下のように記載する。

<!-- jquery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- /jquery -->

<!-- jqueryui -->
<script src="http://(アップロード先URL)/jquery-ui.min.js" type="text/javascript"></script>
<!-- /jqueryui -->

<!-- flip! -->
<script src="http://(アップロード先URL)/jquery.flip.min.js" type="text/javascript"></script>
<!-- /flip! -->

クリックの場合とマウスオーバーの場合では、ハイライトした部分の1箇所しか違いはないが、それぞれの場合を示す。上記に続けて、ヘッダー部分(<head>と</head>の間)に以下のように記載する。

クリックの場合

<!-- sponsorjs setting -->
<script type="text/javascript">
$(document).ready(function(){
    $('.spFlip1').bind("click",function(){
        var elem = $(this);
        if(elem.data('flipped'))
        {
            elem.revertFlip();
            elem.data('flipped',false)
        }
        else
        {
            elem.flip({
                direction:'lr',
                speed: 350,
                onBefore: function(){
                    elem.html(elem.siblings('.spFlip2').html());
                }
            });
            elem.data('flipped',true);
        }
    });
});
</script>
<!-- /sponsorjs setting -->

マウスオーバーの場合

<!-- sponsorjs setting -->
<script type="text/javascript">
$(document).ready(function(){
    $('.spFlip1').bind("mouseover",function(){
        var elem = $(this);
        if(elem.data('flipped'))
        {
            elem.revertFlip();
            elem.data('flipped',false)
        }
        else
        {
            elem.flip({
                direction:'lr',
                speed: 350,
                onBefore: function(){
                    elem.html(elem.siblings('.spFlip2').html());
                }
            });
            elem.data('flipped',true);
        }
    });
});
</script>
<!-- /sponsorjs setting -->

ボディ部分への記載

ボックスや画像はcssで表示するため、ボックスや画像のみの場合は、ボディ部分(<body>と</body>の間)へは必須のhtmlタグだけを以下のように記載する。
内容がある場合には、その内容をあわせて記載することになる。

<div class="sp_wrapper">
    <div class="spFlip1">
         <div class="flip1">
 (表面に内容がある場合はここに)
         </div>
    </div>
    <div class="spFlip2">
         <div class="flip2">
 (裏面に内容がある場合はここに)
         </div>
   </div>
</div>

cssファイルの設定

flip1を表面、flip2を裏面としている。クラス名は自由に変更しても構わない。
なお、sp_wrapperとspFlip1及びspFlip2は直接動作に影響する部分なので、角丸の装飾以外は必須と考えて欲しい。
※sp_wrapperのwidthとheightは自分の利用したいdivBOXや画像の大きさにあわせて指定する必要がある。
今回は、ヘッダー部分(<head>と</head>の間)に直接スタイル設定しているが、cssファイルにしてももちろん構わない。
ヘッダー部分(<head>と</head>の間)に以下のように記載する。

<!-- for setting css -->
<style type="text/css">
.sp_wrapper {
    width:300px;         /*枠の幅を指定(必須)[ここでBOXの大きさを決定]*/
    height:200px;        /*枠の高さを指定(必須)[ここでBOXの大きさを決定]*/
    float:left;          /*フロートで左に配置指定*/
    margin:0px;          /*マージンを指定*/
    position:relative;   /*位置を指定*/
    cursor:pointer;      /*カーソルの種類指定*/
}
.spFlip1 {
    position:absolute;             /*位置を指定(必須)*/
    left:0;                        /*左からの位置を指定(必須)*/
    top:0;                         /*上からの位置を指定(必須)*/
    width:100%;                    /*幅を指定(必須)*/
    height:100%;                   /*高さを指定(必須)*/
    border-radius: 5px;            /*CSS3角丸指定*/
    -moz-border-radius: 5px;       /*Firefox用角丸指定*/
    -webkit-border-radius: 5px;    /*Safari,Chrome用角丸指定*/
}
.spFlip2 {
    display:none;                  /*(必須)*/ 
}            
.flip1 {
    position:absolute;             /*位置を指定(必須)*/
    left:0;                        /*左からの位置を指定(必須)*/
    top:0;                         /*上からの位置を指定(必須)*/
    width:100%;                    /*幅を指定(必須)*/
    height:100%;                   /*高さを指定(必須)*/
    background-image:url();        /*←divBOXを使う場合空白*/
    background-color: #f5f5f5;     /*背景の色[ここで表の色を決定]←divBOXを使う場合*/
    border-radius: 5px;            /*CSS3角丸指定*/
    -moz-border-radius: 5px;       /*Firefox用角丸指定*/
    -webkit-border-radius: 5px;    /*Safari,Chrome用角丸指定*/
}
.flip2 {
 position:absolute;                /*位置を指定(必須)*/
   left:0;                         /*左からの位置を指定(必須)*/
   top:0;                          /*上からの位置を指定(必須)*/
   width:100%;                     /*幅を指定(必須)*/
   height:100%;                    /*高さを指定(必須)*/
   background-image:url(http://(画像のアップロードURLを記載).jpg); /*←画像を使う場合*/
   background-color:;              /*背景の色[画像を使う場合必要ない]*/
   border-radius: 5px;             /*CSS3角丸指定*/
   -moz-border-radius: 5px;        /*Firefox用角丸指定*/
   -webkit-border-radius: 5px;     /*Safari,Chrome用角丸指定*/
}      
.clear{
    clear:both;
}
</style>
<!-- /for setting css -->

cssファイルで一般的な装飾

この部分は完全に任意に記載してもらえばよい。今回のサンプル(デモ)用に用意したもの。
ヘッダー部分(<head>と</head>の間)に以下のように記載している。

<!-- for common css -->
<style type="text/css">
body {
      font-size: 14px;      /*フォントサイズ*/
      text-align: center;   /*テキストの位置 中央*/
      color: #ffa500;       /*フォントの色 orange*/
      font-family: Arial, Helvetica, sans-serif;
}
a {
      align: center;
      font-size: 12px;
}
</style>
<!-- /for common css -->

これで表示されているはず。

デモ

上記を組み合わせて実際に作成したもの。

クリックでFlip-ボックスのみ

クリックでFlip-ボックスとテキスト

クリックでFlip-画像のみ

クリックでFlip-画像とテキスト

クリックでFlip-画像とボックスとテキスト

マウスオーバーでFlip-ボックスのみ

マウスオーバーでFlip-ボックスとテキスト

マウスオーバーでFlip-画像のみ

マウスオーバーでFlip-画像とテキスト

マウスオーバーでFlip-画像とボックスとテキスト

是非おためしを!
なお、マウスオーバーでFlipの場合、リンクURLはクリックできないので、悪しからず。
以上

2014年1月29日追記

違う画像で複数のFlipパネルを配置したい場合

私のフッターウィジェットのように複数の画像を利用したい場合は、背景画像を空白にして、直接内容部分に画像を入れるようにすると良い。
具体的には以下のように記載する。

<head>
(中略)
<!-- for setting css -->
<style type="text/css">
(中略)
.flip1 {
    position:absolute;             /*位置を指定(必須)*/
    left:0;                        /*左からの位置を指定(必須)*/
    top:0;                         /*上からの位置を指定(必須)*/
    width:100%;                    /*幅を指定(必須)*/
    height:100%;                   /*高さを指定(必須)*/
   background-image:url();        /*[背景画像を指定しない]*/
    background-color: #f5f5f5;     /*背景の色[ここで裏の色を決定]*/
    border-radius: 5px;            /*CSS3角丸指定*/
    -moz-border-radius: 5px;       /*Firefox用角丸指定*/
    -webkit-border-radius: 5px;    /*Safari,Chrome用角丸指定*/
}
.flip1 img {                       /*.flip1 imgを追加する */
    border-radius: 5px;            /*CSS3角丸指定*/
    -moz-border-radius: 5px;       /*Firefox用角丸指定*/
    -webkit-border-radius: 5px;    /*Safari,Chrome用角丸指定*/
}
(中略)
<!-- /for setting css -->
</style>
(中略)
</head>
<body>
<div class="sp_wrapper">
     <div class="spFlip1">
        <div class="flip1">
           <img src="http://(アップロード先URL)flickr.png">
        </div>
     </div>
     <div class="spFlip2">
        <div class="flip2">
           <h2>My Flickr</h2>
           <a href="http://www.flickr.com/photos/109038559@N08/" target="_blank">http://www.flickr.com/<br />photos/109038559@N08/</a>
        </div>
     </div>
</div>

<div class="clear"></div>

<div class="sp_wrapper">
     <div class="spFlip1">
        <div class="flip1">
           <img src="http://(アップロード先URL)tumblr.png">
        </div>
     </div>
     <div class="spFlip2">
        <div class="flip2">
           <h2>My Tumblr</h2>
           <a href="http://jump-up-jp.tumblr.com/" target="_blank">http://jump-up-jp.tumblr.com/</a>
        </div>
     </div>
</div>
<div class="clear"></div>
(中略)
</body>

これで違う画像を配した複数のFlipを利用できる。
以上

Related Posts Plugin for WordPress, Blogger...