jquery を追加したら動作しない部分があります。 専門ではないので

質問

jquery　を追加したら動作しない部分があります。　専門ではないので色々試しましたがダメでした。どなたか分かる方いましたらよろしくお願い致します。

サイト　：　http://blackstate.blog134.fc2.com/

--導入しているもの--
１　http://www.digitalia.be/software/slimbox2　　　（slimbox2　※LightBox）　　
2　http://www.ndesign-studio.com/blog/design/css-dock-menu　　（　css-dock-menu　※画面最下部のMAC風アイコン）
--------------------------

始めは上記　１　のみの導入で通常通り各主要ブラウザ動作で動作確認
↓
その後　2　を導入
↓
２つとも動作するが、１のslimbox2のみサイトに貼られた写真を２回目クリックすると、動作が途中で止まってしまう（１回目は通常通り動作します。）

--設置状況--

jqueryはグーグルのを利用しています
HTML上に

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>

その後　１と２のjsファイルをアップロード

<script src="http://blog-imgs-46.fc2.com/b/l/a/blackstate/slimbox2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a[ref*=lightbox]').slimbox();
});
</script>

<script type="text/javascript" src="http://blog-imgs-46.fc2.com/b/l/a/blackstate/interface.js"></script>
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]-->

-----------------

CSSは外部ファイルではなくそのままブログのCSSに記載

/* ---CSS Dock Menuここから--- */　　（以下入力制限により省略）

やって見たこと。

1　グーグルから呼び出すのではなく直接jqueryを設置　（状態変わらず）
2　css-dock-menu　を削除してみた　（slimbox2は２回目も通常表示）
3　slimbox2　と　css-dock-menu　の場所を入れかえてみた　（状態変わらず）

ファイルのURLは無料ブログの特性上すべてフルパスでやっていますので
そこの問題ではないと思いますが、良く分かりません。

HTMLもCSSも独学でjqueryも始めてです。
１つ目までは通常設置出来ましたが、２つ目のcss-dock-menuを入れたら上手く動作がしない状況です。

色々検索で調べましたが、お手上げ状態で初めて質問箱を利用します。
どなたか詳しかたいらっしゃいましたらアドバイス頂けると幸いです。
よろしくお願い致します。

回答No.1

yyr446 · ベストアンサー

$(function(){});　＜＝＝$(document).ready(function(){})と等価
が2個あるのが、悪いんでは、一つに統合しましょう。

にしてもブログで、$(document).ready(を使うのは考えもんです。

※全角空白は半角空白にしてね。

$(document).ready(function() {
　　 $('a[ref*=lightbox]').slimbox();
　　 $('#dock').Fisheye(
　　　{
　　　 maxWidth: 50,
　　　 items: 'a',
　　　 itemsText: 'span',
　　　 container: '.dock-container',
　　　 itemWidth: 40,
　　　 proximity: 90,
　　　 halign : 'center'
　　　}
　　 );
　　 $('#dock2').Fisheye(
　　　{
　　　 maxWidth: 70,
　　　 items: 'a',
　　　 itemsText: 'span',
　　　 container: '.dock-container2',
　　　 itemWidth: 50,
　　　 proximity: 80,
　　　 alignment : 'left',
　　　 valign: 'bottom',
　　　 halign : 'center'
　　　}
　　 );
　});

補足

yyr446さん　こんなに早く回答頂けると思っていなくて感動しました！

ご指摘の通り教えて頂いたソースをHTMLの　

<script type="text/javascript">

</script>　　間に貼りつけ、２重に記載していた部分は削除しました。

ですが動作の状況は変わりません。
もし可能ならアドバイスお願いします。

＞＞$(function(){});　＜＝＝$(document).ready(function(){})と等価
＞＞が2個あるのが、悪いんでは、一つに統合しましょう。

勉強不足ですみません。はじめて知りました。ありがとうございます。

＞＞にしてもブログで、$(document).ready(を使うのは考えもんです。

いつもはMTやWPのようなサーバー設置型ブログを使っていますが
今回はFC２で作成しました。$(document).readyもご指摘されて初めて調べましたが
半分程度しか理解していません。

このブログの環境では不可能なのでしょうか？
たびたび申し訳ありませんがもし、可能でしたらアドバイスよろしくお願い致します。

回答No.3

fujillin

専門ではありませんし、中身も見てませんが…、

slimbox2は私の環境では、単独でも同様の現象が出るケースがあるみたい。

原因を探すのは面倒なのでみてませんが、画像を拡大表示するだけなら同様のものが他にもいろいろあるので、乗り換えてみてはいかがでしょうか？
CSS Dock Menuがjqueryベースみたいなので、jqueryベースの同様の表示用プラグインから選択すれば、あまり重くもならないはず。

jqueryも使ったことがないので、どれが良いのかはわかりませんが、
＜ほぼまんまのjquery lightBox plugin＞
　http://leandrovieira.com/projects/jquery/lightbox/
＜ThickBox＞
　http://jquery.com/demo/thickbox/
＜そのほか＞
　http://www.pierrebertet.net/projects/jquery_superbox/
　http://www.pirolab.it/pirobox/#demos

他にも検索すればたくさん見つかるはずです。

おまけ：
　$(function(){ ～～　は複数あっても、一応、動作するみたいです。
　でも、わざわざ分ける必要もないので、まとめておいたほうが無難ですね。

お礼

fujillin　さん　アドバイスありがとうございます。

＞＞slimbox2は私の環境では、単独でも同様の現象が出るケースがあるみたい。

そうなんですね。
グーグルで、slimbox2　のバクを調べましたが出てこなかったので、それを聞いて安心しました。
それが分かれば他の奴でも試せばなるかもしれませんね。
さっそくやってみます！

出来ればfujillinさんにもベストアンサーしたかったのですが、先に答えて頂いた方が親身になってくれたので解決策ではありませんでしたがベストアンサーしました。

代わりにお気に入り登録させて頂きましたので今後ともよろしくお願い致します。

始めての質問箱、利用でしたがこんなやさしい人たちがいるなんてホントに感動しました。
なるべく自分で解決できるように頑張りたいとおもいます。
URLも色々とアドバイスして感謝です（＾＾）

回答No.2

yyr446

関係ないかもしれませんが、
slimbox2.jsのソースの中の
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
}
の部分を、削除するかコメントアウトしてみてください。

補足

yyr446 さん　ご回答ありがとうございます。

ご指摘の通り、slimbox2.jsのソースの中の部分を削除しましたらslimbox2.jsが利かなくなりました。
しばらくそのままですのでご確認いただければ幸いです。

あとは、これ以上質問するのも迷惑だと思うのでもう大丈夫です。
なんとかやってみます（たぶん自分には無理っぽいですが・・・）

こういった作業は直接テンプレートやログインID教えてサポートした方がやりやすいのに
面倒な質問にご教示頂きありがとうございました。

ｊｓファイル、ソースまで拝見して頂きありがとうございました。
yyr446さんのWEBサイトブクマしましたのでたまに訪問しますね！

色々とありがとうございました。
WEB作成、もっと勉強したいと思います。