トップページイラスト(ナナセミキ様作成)

イラストの情報はこちらから≫

Jimdo・みんビズカスタマイズ JimdoでjQueryを干渉させずに動かしてみた

非常に高機能で便利なのですが、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でも応用できそうですね。

コメントをお書きください

コメント: 3
  • #1

    yume-jq (水曜日, 08 8月 2012 19:07)

    はじめまして 私は今から初めてJIMDOにジェイクウェリーを入れてみようと思っています

    昨日WOWというシステムを見つけて作ったはいけど、このスライドがうまく作動しません

    どうしたらいいんでしょうか? 

  • #2

    ヒデ・ユーキ(どんなもんじゃろい管理人) (水曜日, 08 8月 2012 21:08)

    yume-jq 様
    初めまして。管理人のヒデです。

    WOWとは「WOW Slider」の事でしょうか。
    多彩なエフェクトが魅力的ですね。

    残念ながら私はJimdoでの動作を試した事はありませんが、
    jQueryをJimdoで動作させる際は

    ・画像データは直接アップロードし、それにあわせて各ソースコードを修正する
    ・CSS等のデータは「独自レイアウト」に直接記載する
     (上記の項目は外部サーバーをお持ちでしたら、リンクで参照させる事が可能です)
    ・Jimdo自体のシステムとの干渉を避けるための対応が必要

    等々、通常のWebサイトに導入する際の対応と比べ、かえって手間がかかります。
    また一部のjQueryは「そもそもJimdoで動作させる事が出来ない」場合もあります。
    (jQueryファイルアップロードを行う際、警告表示が出てアップ出来ない)

    他のjQueryになりますが、ファイル名やソースの修正については、当サイト内
    「jimdoコンテンツスライダーjquery-flexslider-をjimdoと干渉させずに設置」という記事でも記載しておりますので、一度ご確認くださいませ。

  • #3

    yume-jq (火曜日, 14 8月 2012 17:06)

    わかりました。お返事ありがとうございます

    ヒデ・ユーキさんの他の記事をためしてみます

    また結果を報告します

    ありがとうございました

▲このページのトップへ