WordPressで使いたいJAVAスクリプト「 jQuery plugin:Sliding Boxes and Captions with jQuery」


何かを紹介する場合、イメージは非常に大事な要素だと思います。
特にトップページや見出しは非常にインパクとデザイン性が必要です。トップページが文字ばかりだとそれだけで、せっかく訪問頂いたお客様が見にくく、見るのをやめてしまうなんてことになりかねません。
そういう意味で、単純に画像を並べるだけよりもよい効果が得られそうですね。

このスクリプトは、スライドの方向や距離などを細かく設定できるのが気に入っています。
言葉で説明するよりも、実際に↑（上）を触っていただきましたか。

いい感じでしょ。

jQuery plugin:Sliding Boxes and Captions with jQuery

フォルダ構成の修正

いつものように、同じスタイルに統一するところからメモしておきます。

今回ご紹介するスクリプトの解凍時の状態は以下となっています。

解凍時のフォルダ構成

  • slidingboxes
    • _MACOSX
      • boxes
        • ._.DS_Store
        • .birss.jpg
        • ._buildinternet.jpg
        • ._florian.jpg
        • ._jareck.jpg
        • ._kamil.jpg
        • ._martin.jpg
        • ._nonsense.jpg
    • boxes
      • .DS_Store
      • birss.jpg
      • buildinternet.jpg
      • florian.jpg
      • index.php
      • jareck.jpg
      • kamil.jpg
      • martin.jpg
      • nonsense.jpg

デモとして動作確認するにはこの状態でも構いませんが、WordPressで使用するには少々修正した方が使いやすいと思います。

まずは、以前の記事（WordPressプラグインではないJAVAスクリプトの設置場所メモ）をベースに下記のように修正していきます。

修正後のフォルダ構成

  • slidingboxes
    • css
      • slidingboxes.css
    • images
      • slidingboxes
        • XXXXX.jpg
    • js
      • jquery-1.3.2.min.js

スタイルシートの作成

この中で、「slidingboxes.css」は別に作りました。
作り方は、こちらの「Step 1 – CSS Foundation Work」の部分（３構成をつなげて）をエディタなどで新規に作成し、名前を「slidingboxes.css」にしておきます。

サンプル

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

.boxgrid{
	width: 325px;
	height: 260px;
	margin:10px;
	float:left;
	background:#161613;
	border: solid 2px #8399AF;
	overflow: hidden;
	position: relative;
}
.boxgrid img{
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
}
.boxcaption{
	float: left;
	position: absolute;
	background: #000;
	height: 100px;
	width: 100%;
	opacity: .8;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 	}  
 .captionfull .boxcaption {
 	top: 260;
 	left: 0;
 }
 .caption .boxcaption {
 	top: 220;
 	left: 0;
 }

ポイントは、スライドはclassで切り替えられますが、画像サイズはcss側で指定したサイズ以外は変えられませんので、利用方法を事前に決めておき、ブログ記事の横幅からはみ出さないように横幅（width）を微調整しましょう。

ヘッダへの記述

最後に、こちらの「Step 2 – Adding the Sliding Animations」の通り、～の間に記述します。
これも、以前の記事（WordPressプラグインではないJAVAスクリプトの設置場所メモ）の項目「ヘッダへの記述方法」をご覧ください。

サンプル

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<link type="text/css" rel="stylesheet" href="http://###/wp-admin/css/boxes.css" />
<script type="text/javascript" src="http://###/wp-admin/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
    //Vertical Sliding
    $('.boxgrid.slidedown').hover(function(){
        $(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
    }, function() {
        $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
    });
    //Horizontal Sliding
    $('.boxgrid.slideright').hover(function(){
        $(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
    }, function() {
        $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
    });
    //Diagnal Sliding
    $('.boxgrid.thecombo').hover(function(){
        $(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
    }, function() {
        $(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
    });
    //Partial Sliding (Only show some of background)
    $('.boxgrid.peek').hover(function(){
        $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
    }, function() {
        $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
    });
    //Full Caption Sliding (Hidden to Visible)
    $('.boxgrid.captionfull').hover(function(){
        $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
    }, function() {
        $(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
    });
    //Caption Sliding (Partially Hidden to Visible)
    $('.boxgrid.caption').hover(function(){
        $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
    }, function() {
        $(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
    });
});
</script>

※「http://###/」部分はご自身のURLに置き換える
※「jquery-1.3.2.min.js」はこちらよりダウンロードしてフォルダに入れておいて下さい。
※animate({top:’XXXpx’, left:’XXXpx’}：スライドの位置
※{queue:false,duration:XXX}：スライドのスピード

記載方法

ブログに記載する際には、事前に画像を用意する必要があります。
貼り付け方は、とりあえず以下とし、スライドごとの記述方法に従って画像を指定します。

  • リンクURL：なし
  • 配置：なし
  • サイズ：フルサイズ（XXX×XXX）

実際に貼り付けると下記のように貼り付けられると思います。

1

<img src="http://###/XXXXX.jpg" alt="XXXXX" title="XXXXX" width="XXX" height="XXX" class="alignnone size-full wp-image-XXXX" />

それを踏まえて、以下のスライドに併せて、イメージを書き換えて、タイトル、文章などを記載して出来上がりです。

サンプル

マスオーバー時にキャンプション表示

1
2
3
4
5
6
7

<div class="boxgrid caption">
	<img src="XXXXX.jpg"/>
	<div class="cover boxcaption">
		<h3>タイトル</h3>
		<p>文章文章文章文章文章<br />詳しくは<a href="XXXX"></a>まで</p>
	</div>		
</div>

マウスオーバー時に残りを表示

1
2
3
4
5
6
7

<div class="boxgrid captionfull">
	<img src="XXXXX.jpg"/>
	<div class="cover boxcaption">
		<h3>タイトル</h3>
		<p>文章文章文章文章文章<br />詳しくは<a href="XXXX"></a>まで</p>
	</div>
</div>

マスオーバー時に右にスライド

1
2
3
4
5
6
7

<div class="boxgrid slideright">
	<img src="XXXXX.jpg"/>
	<div class="cover boxcaption">
		<h3>タイトル</h3>
		<p>文章文章文章文章文章<br />詳しくは<a href="XXXX"></a>まで</p>
	</div>
</div>

マスオーバー時に右下にスライド

1
2
3
4
5
6

<div class="boxgrid thecombo">
 
	<img class="cover" src="XXXXX.jpg"/>
		<h3>タイトル</h3>
		<p>文章文章文章文章文章<br />詳しくは<a href="XXXX"></a>まで</p>
</div>

マスオーバー時に上にスライド

1
2
3
4
5

<div class="boxgrid slidedown">
	<img class="cover" src="XXXXX.jpg"/>
		<h3>タイトル</h3>
		<p>文章文章文章文章文章<br />詳しくは<a href="XXXX"></a>まで</p>
</div>

マスオーバー時に他の画像も表示

1
2
3
4

<div class="boxgrid peek">
	<a href="###"><img src="XXXXX.jpg"/></a>
	<a href="###"><img class="cover" src="XXXXX.jpg"/></a>
</div>

Error: NotFound

関連記事:

This entry was posted on 金曜日, 9月 11th, 2009 at 9:13 PM and is filed under 03 web関連. You can follow any comments to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.

コメントする