非常に高機能で便利なのですが、Jimdoで動作させるには干渉等色々問題があるjQuery
そんなjQuery干渉の解消を検証（舌かみそう･･･）してみました。
コンテンツスライダーを設置してみました
-
-
- テキストを記載する事もできます。リンクを設置する事もできます。
「next」 「previous」で左右に移動させることができます。
設置方法（独自レイアウトへ設置）
使用したjQueryはこちらから
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-sudo-slider.html
上記サイトからjQueryをダウンロードし、「basic」をベースに制作しました。
以下おぼえ書きです。
1：jQueryを設置
jQuery.jsと、上記jQueryを「レイアウト」⇒「独自レイアウト」⇒「ファイル」にアップします。
2：CSSデータを記載
下記のCSSデータを「レイアウト」⇒「独自レイアウト」⇒「CSS」に記載します。
#slider {
width:696px;
}
#slider img{
border:none;
}
#slider ul, #slider li{
position:relative;
margin:0;
padding:0;
list-style:none;
display:block;
}
#slider li {
width:696px;
overflow:hidden;
}
このまま記載すると、最初にスライダーが表示された際、2番目の画像やテキストがはみ出して表示されてしまいました。
ここでは、
#slider {
width:696px;
}
#slider img{
border:none;
}
の部分に
overflow:hidden;
と入れる事で解消しました。
3：jQueryの干渉防止対策
jQueryは、Jimdoで使用されている「prototype.js」と干渉するため、設置するだけでは「ログイン・ログアウトが出来ない」「ブログが投稿できない」等の不具合が出てしまいます。
干渉対策として「設定」⇒「ヘッダー部分を編集」に下記のコードを記載します。
<script type="text/javascript">
/* <![CDATA[ */
jQuery.noConflict();
/* ]]> */
</script>
更に、ダウンロードしたjQueryファイルの「basic」から
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#slider").sudoSlider({
});
});
//]]>
</script>
をコピーするのですが、その際、「$」の部分を、全て「jQuery」に書き換えます。
こうする事で、干渉が解消されます。
うまく動作しない場合は「レイアウト」⇒「HTML」に直接記載してみてください。
4：スライダーを表示させる
表示させたい場所に「ウィジェット/HTML」を選択し、下記のコードを記載します。
<div id="slider" class="slider">
<ul>
<li>Content1
</li>
<li>Content2
</li>
<li>Content3
</li>
<li>Content4
</li>
</ul>
</div>
<li><li/>の間には、テキストや画像を表示させることができます。リンク設置もOKです。
検証メモですので、間違いや足りない要素もあるかと思いますが、設置のご参考になれば幸いです。
他のjQueryでも応用できそうですね。
コメントをお書きください
yume-jq (水曜日, 08 8月 2012 19:07)
はじめまして 私は今から初めてJIMDOにジェイクウェリーを入れてみようと思っています
昨日WOWというシステムを見つけて作ったはいけど、このスライドがうまく作動しません
どうしたらいいんでしょうか？
ヒデ・ユーキ（どんなもんじゃろい管理人） (水曜日, 08 8月 2012 21:08)
yume-jq 様
初めまして。管理人のヒデです。
WOWとは「WOW Slider」の事でしょうか。
多彩なエフェクトが魅力的ですね。
残念ながら私はJimdoでの動作を試した事はありませんが、
jQueryをJimdoで動作させる際は
・画像データは直接アップロードし、それにあわせて各ソースコードを修正する
・CSS等のデータは「独自レイアウト」に直接記載する
（上記の項目は外部サーバーをお持ちでしたら、リンクで参照させる事が可能です）
・Jimdo自体のシステムとの干渉を避けるための対応が必要
等々、通常のWebサイトに導入する際の対応と比べ、かえって手間がかかります。
また一部のjQueryは「そもそもJimdoで動作させる事が出来ない」場合もあります。
（jQueryファイルアップロードを行う際、警告表示が出てアップ出来ない）
他のjQueryになりますが、ファイル名やソースの修正については、当サイト内
「jimdoコンテンツスライダーjquery-flexslider-をjimdoと干渉させずに設置」という記事でも記載しておりますので、一度ご確認くださいませ。
yume-jq (火曜日, 14 8月 2012 17:06)
わかりました。お返事ありがとうございます
ヒデ・ユーキさんの他の記事をためしてみます
また結果を報告します
ありがとうございました