■ユーザーズフォーラム リニューアルのお知らせ
新規投稿は新ユーザーズフォーラムにお願いします。

Re: jqueryのAnythingSlider導入方法

フラット表示

前のトピック | 次のトピック

goichi > Re: jqueryのAnythingSlider導入方法 @ 2012/5/22 22:07
こんにちは（＾＾
PHPのスキルというより、baserCMSの仕組みの問題かもしれませんね。
最初のとっかかりは難しいかも知れませんが、
慣れれば簡単なので、少し仕組みを追いかけながら説明してみます。

まず、今回はjqueryを使うということですので、jsファイルが幾つか存在すると思います。
ためにしにGitHubからサンプルも含めた一式をダウンロードしてみると、
「js」というフォルダの中に色々と入っていますね。
https://github.com/ProLoser/AnythingSlider/downloads

baserCMSのテーマでは、jsファイルは「/app/webroot/themed/テーマフォルダ/js/」に入れることになっています。
今回は先にダウンロードしたファイル一式の中のjsファイル群を、全て以下のフォルダにいれれば良いと思います。
webroot/themed/Accordion_2.0/js/

次にCSSを入れなくてはなりませんね。
CSSも同じく設置場所が決まっています。「/app/webroot/themed/テーマフォルダ/css/」がそうです。
jsと同じように、ダウンロードしてきたCSSフォルダ内にある全てのファイル（LESSというフォルダもです）を以下にコピーします。
webroot/themed/Accordion_2.0/css/

続いて画像です。今回のサンプルでは、矢印の画像等、いくつかの画像ファイルを使っていますね。
テーマ内では本来、画像ファイルを「/app/webroot/themed/テーマフォルダ/img/」に入れることになっています。
が、しかし。
今回はサンプルにはいっているCSSなどのパスを変更するのが面倒なので、
ダウンロードしてきたフォルダにある「images」をフォルダごと
webroot/themed/Accordion_2.0/
にコピーしてしまいます。結果として、
webroot/themed/Accordion_2.0/images/
というフォルダが出来たと思います。

とりあえず、事前の準備はこれでOKです。
問題はここからですが、既存のテーマファイルを書き換えていく事になります。

と、そのまえに説明ですが、
baserCMSではレイアウト用ファイル（HTMLやbaserCMS関数を使ったViewファイル）を「layouts」というフォルダに入れます。
さらに、レイアウトファイルの中で使う部品（ヘッダとかフッタとかのパーツ部分）を切り分けておいて「elements」フォルダに入れることが出来ます。
今回のテーマを見てみると、画像のスライダー部分は、１つの部品として切り分けられ、「elements」に入っていますね。

そこで、xiumingさんが行ったように、
今回使用するjqueryの画像スライド部分を「anythingslider.php」という風にして新たに作りましょう。
ただし、中身は以下のようにしてください。
<div id="slider" style="width:800px;height:450px;margin:0 auto;">
	<!-- Simple AnythingSlider -->

	<ul id="testSlider">

		<li><img src="http://css-tricks.com/examples/AnythingSlider/images/slide-tele-1.jpg" alt=""></li>

		<li><img src="http://css-tricks.com/examples/AnythingSlider/images/slide-tele-2.jpg" alt=""></li>

		<li><img src="http://css-tricks.com/examples/AnythingSlider/images/slide-tele-3.jpg" alt=""></li>

		<li><img src="http://css-tricks.com/examples/AnythingSlider/images/slide-tele-4.jpg" alt=""></li>

	</ul>
</div>
	<!-- END AnythingSlider -->
<div id="AccordionBottom"></div>

（各画像はこのAnythingSlider開発元のサンプル画像です。。。また、ダウンロードしてきたサンプルと、もともとのテーマでidが重複するタグがありますので、それを回避するため、ulのidを「testSlider」とし、見え方の調整をするためdivにstyle属性を付与してスタイルシートを調整しています。）

これで「anythingslider.php」というエレメントが出来ました。
今度はこれを呼びださなければなりません。エレメントはあくまでも部品ですので、この部品をレイアウトファイルから呼び出します。
テーマのフォルダ内にある「layouts」フォルダを開いて下さい。ここに「default.php」があると思います。
これが、このテーマのレイアウトファイルです。開いてみると32行目付近に以下のような部分が見つかると思います。
	<?php $bcBaser->element('Accordion') ?>

これは、エレメントファイル「Accordion.php」をココで表示しろ、という命令文です。
ここを以下のように書き換えて、先程作った「anythingslider.php」を呼び出しましょう。
<?php $bcBaser->element('anythingslider') ?>

（.phpという拡張子は書かない事に注意です。）

さらに、最初にコピーしておいたjsファイルとCSSを読み込む必要がありますね。
デフォルトでは16行目付近からCSSを読み込んでいますので、これに一行追記して、必要なCSS「anythingslider.css」を読み込んでおきます。
結果的にCSSの読み込み部分は以下のようになると思います。
<?php $bcBaser->css('style') ?>
<?php $bcBaser->css(array('liteaccordion')) ?>
<?php $bcBaser->css(array('shThemeDefault')) ?>
<?php $bcBaser->css(array('anythingslider')) ?>

（.cssという拡張子は書かない事に注意です。）

次にjsファイルの呼び出し部分です。上のCSSの直後になると思いますが、「jquery.anythingslider.js」を読み込む必要がありますので、一行追加して以下のようにしてみてください。
<?php $bcBaser->js(array(
	'jquery-1.6.4.min',
	'jquery.easing.1.3',
	'liteaccordion.jquery',
	'liteaccordion.jquery.min',
	'jquery.anythingslider',
	'rollover',
	'startup')) ?>


ここまで出来たら、後少しですね。ダウンロードしてきたサンプルを見てみると、どうやらHTML内でscriptタグとstyleタグを使っているようです。HPを正式に公開する際は別ファイルにしたほうが良いと思いますが、ここでは横着をして、サンプル通り、書いてしまいます。。。。
書く場所は、これもレイアウトファイル「default.php」に書いてしまいましょう（本当ならTOPページだけが読み込むようにすべきですが・・・）。
</head>

というヘッダタグの終了部分を探して下さい。その直前に以下のコードを挿入してみてください。
	<!-- Define slider dimensions here -->
	<style>
	#testSlider { width: 700px; height: 390px; }
	</style>

	<!-- AnythingSlider initialization -->
	<script>
		// DOM Ready
		$(function(){
			$('#testSlider').anythingSlider();
		});
	</script>

サンプルを丸パクリですが、id等は変えています。。。

これで、TOPページを開くとどうでしょうか？ウチの環境では添付画像のようになっています。
お試し下さい（＾＾

フラット表示

前のトピック | 次のトピック

ログイン
ユーザー名:
パスワード:


　 新規登録 / パスワード紛失

検索
 ≫ 高度な検索

facebook
フォーラムで悩みが解決した場合など、よかったら「いいね！」をポチっとクリックしてください！質問の回答者や開発者の励みになります

フォーラムガイド
質問を投稿する際のガイドライン 質問に回答する際のガイドライン 動作環境の雛形 署名の登録方法


関連リンク
baserCMS公式サイト baserCMS公式wiki baserCMSユーザー会 baserCMSコア開発プロジェクト(BTG)
最新バージョンの修正パッチ一覧 修正パッチの適用方法 baserCMS開発環境 GitHub
CakePHP公式サイト CakePHP Users in Japan

オンライン状況
19 人のユーザが現在オンラインです。 (19 人のユーザが フォーラム を参照しています。)

登録ユーザ: 0
ゲスト: 19