jqueryのAnythingSlider導入方法

初の投稿です。
BaserCMSをMAMP内に導入して、サイトを考案しようかと思っております。
basercms2.0.0
phpスキルはEレベル
mac.OSX　10.7.4
mamp使用

まず@clothowebさんのアコーディオンのテーマを利用してやってみようかと
思いダウンロードしました。

jqueryのAnythingSliderとAccordionの入れ替えができないかと思い
根本的にphpをきちんと理解が出来ておりませんが、

webroot|rhemed|Accordion_2.0|layouts|default.phpに
<?php $bcBaser->css('anythingsslider')?>
<?php $bcBaser->js(array(
jquery-1.7.2.min',
jquery.easing.1.2',
jquery.anythingslider',
jquery-anythingslider.min',
'rollover',
'startup')) ?>
と書き換えました。'rollover'の意味がわからないのでそのままです。
cssはwebroot|rhemed|Accordion_2.0|css内に
anythingslider.cssのみ入れました。

webroot|rhemed|Accordion_2.0|elements内にAccoredion.phpを複製して
anythingslider.phpにファイル名を変えて、中身を
変えようと思いましたが、ひとまずAccordion.phpで不要かと思うものは削除して
anythingsliderのhtmlファイルで使われていたul、li関連のソースを貼り付けました。
div　id="Accordion">の部分はdiv id="anythingslider">　と変えました。
Accordion.phpをそのまま流用したので、まだ不要なものや、書き換えが
必要なところがあるかもしれません。Accordion.php内の下あたりに
<script>
(function($,d) {
$
("#slider").anythingslider({"theme":"light〜以下省略〜
<div id="AccodionBottom"></div>は何も手をつけていません。

画像は、<li><img src="".../img/demos/images/slide-civil-1.jpg" alt=""></li>
になっています。これはanythingsliderをダウンロードした時のsampleのhtmlをそのまま
コピペしました。

たぶん、まだ何か出来ていないと思っていますが、どこが出来ていないのかが判っていません。
ご教示頂ければ幸いです。

こんにちは（＾＾
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」という風にして新たに作りましょう。
ただし、中身は以下のようにしてください。

（各画像はこの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ページを開くとどうでしょうか？ウチの環境では添付画像のようになっています。
お試し下さい（＾＾

xiumingさん、こんばんは！

引用：
このJavaは、マウスが乗る前の状態（onMouseOut)を「ファイル名_off.画像系拡張子」、
マウスが乗った状態(OnMouseOver)を「ファイル名_over.画像系の拡張子」にて
Javaが適用されている全てのページ内で画像を切り替えられるJQueryを使っています。

それだけのためのJsファイルですので、他の物で代用出来たり不要な場合は外せますよ〜。

私もしょっちゅう悪戦苦闘していますが、goichiさんが先に解説してくださっていて、
私自身もとても勉強にさせていただきながら記事を拝見させていただきました。

ありがとうございます〜！

また、これを機にテーマ作成でもいかがでしょうか。楽しみにしています。＾＾ヾ

goichiさん、こんばんは！

とても分かりやすい解説、ありがとうございます。かなり参考になりますね！

いつも一旦、HTML内で直接CSSを書いて後からまとめて書き足しているんですが
この頃、今より睡眠時間が少なくぼ〜〜〜っとして忘れてしまっていました。＞＜

あと、このテーマってトップページ以外でメニュー部分とかの隙間とかを
詰めたりするのにかなり試行錯誤していた覚えがあります。 (｡´・ω・)｡

もう一度似たようなのを作れって言われたら覚えているんだろうか。。。

今後はもう少し余裕を持って作れるように頑張りますね！

Ecology Black改？汚いソースのついでかも。

goichiさん、こんばんは！
とても、わかりやすい手順での説明有り難うございました。
おかげさまで導入できました。

li　img src="http://css-trick.com/example/…という場所ですが、ダウンロードしたAnythingSliderのhtml
とおもいますが、どこだろうか？と気になったくらいです。

あとは、ほんとにわかりやすい説明で、すんなり出来ました。

まだまだ勉強中ですが、またなにかありましたらご指導の程
お願い致します。



clothowebさんこんばんは。

rolloverはjqueryだったんですね。あとでjsフォルダのなかを探したら
ありました(^_^;)

今ｃｍｓに関心があるだけで、ろくに触っていないのでまだまだ勉強中ですが
いつかは作りたいと思いますね。

可変グリッドレイアウトのものが出来ればよいな〜と妄想しているだけです。


またなにかありましたら宜しくお願い致します。

xiumingさん、こんにちは！

引用：

おぉ！私もその意見に賛成です！！！
クライアント指定のCMSでは導入した事がありますが、BaserCMSではまだ完成していません。＞＜

というか、baserCMSシステム内部の解析が全然出来ていないために、
以前から放置状態なんですが、ほんの少しでも参考になれば・・・。

BaserCMSで可変グリッドレイアウト