Re: jqueryのAnythingSlider導入方法
- xiuming > jqueryのAnythingSlider導入方法 @ 2012/5/22 17:34
- » goichi > Re: jqueryのAnythingSlider導入方法 @ 2012/5/22 22:07
- clothoweb > Re: jqueryのAnythingSlider導入方法 @ 2012/5/22 23:54
- xiuming > Re: jqueryのAnythingSlider導入方法 @ 2012/5/23 1:12
- clothoweb > Re: jqueryのAnythingSlider導入方法 @ 2012/5/23 12:14
- clothoweb > Re: jqueryのAnythingSlider導入方法 @ 2012/5/22 23:47
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」フォルダに入れることが出来ます。 今回のテーマを見てみると、画像のスライダー部分は、1つの部品として切り分けられ、「elements」に入っていますね。 そこで、xiumingさんが行ったように、 今回使用するjqueryの画像スライド部分を「anythingslider.php」という風にして新たに作りましょう。 ただし、中身は以下のようにしてください。
(各画像はこのAnythingSlider開発元のサンプル画像です。。。また、ダウンロードしてきたサンプルと、もともとのテーマでidが重複するタグがありますので、それを回避するため、ulのidを「testSlider」とし、見え方の調整をするためdivにstyle属性を付与してスタイルシートを調整しています。) これで「anythingslider.php」というエレメントが出来ました。 今度はこれを呼びださなければなりません。エレメントはあくまでも部品ですので、この部品をレイアウトファイルから呼び出します。 テーマのフォルダ内にある「layouts」フォルダを開いて下さい。ここに「default.php」があると思います。 これが、このテーマのレイアウトファイルです。開いてみると32行目付近に以下のような部分が見つかると思います。
これは、エレメントファイル「Accordion.php」をココで表示しろ、という命令文です。 ここを以下のように書き換えて、先程作った「anythingslider.php」を呼び出しましょう。
(.phpという拡張子は書かない事に注意です。) さらに、最初にコピーしておいたjsファイルとCSSを読み込む必要がありますね。 デフォルトでは16行目付近からCSSを読み込んでいますので、これに一行追記して、必要なCSS「anythingslider.css」を読み込んでおきます。 結果的にCSSの読み込み部分は以下のようになると思います。
(.cssという拡張子は書かない事に注意です。) 次にjsファイルの呼び出し部分です。上のCSSの直後になると思いますが、「jquery.anythingslider.js」を読み込む必要がありますので、一行追加して以下のようにしてみてください。
ここまで出来たら、後少しですね。ダウンロードしてきたサンプルを見てみると、どうやらHTML内でscriptタグとstyleタグを使っているようです。HPを正式に公開する際は別ファイルにしたほうが良いと思いますが、ここでは横着をして、サンプル通り、書いてしまいます。。。。 書く場所は、これもレイアウトファイル「default.php」に書いてしまいましょう(本当ならTOPページだけが読み込むようにすべきですが・・・)。
というヘッダタグの終了部分を探して下さい。その直前に以下のコードを挿入してみてください。
サンプルを丸パクリですが、id等は変えています。。。 これで、TOPページを開くとどうでしょうか?ウチの環境では添付画像のようになっています。 お試し下さい(^^ |