こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

liteboxと滑らかスクロールが同時処理出来ない

javascriptのliteboxと滑らかスクロールを1ページ内で行うことができません。

head内スクリプトタブ

<!--滑らかスクロール-->
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.page-scroller.js" charset="utf-8"></script>


<!--litebox-->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js2/prototype.js"></script>
<script type="text/javascript" src="js2/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js2/lightbox.js"></script>

イメージタグ
<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

ライトボックスのバージョンはlitebox2.0

滑らかスクロールは下記サイトからダウンロードさせて頂いたものを使ってます。
http://coliss.com/articles/build-websites/operation/javascript/296.html

一方のスクリプトタグをコメントで囲むと囲んでいない方のスクリプトが機能します。
また、下の方に記述したスクリプトが機能します。なので上記の場合、liteboxは機能し、滑らかスクロールの方は機能しません。

両方機能させるにはどうしたらよいのでしょうか?
ジャバスクリプトは初めて使うのであまり詳しくありません。
ご教授お願い致します。

投稿日時 - 2011-09-07 18:39:21

QNo.6995872

すぐに回答ほしいです

質問者が選んだベストアンサー

もう、すでに解決されているかもしれませんが念のため、
回答させていただきます。

私もまったく同じ条件(jquery.page-scroller.jsとprototype.js)で悩んでおりましたが、
別のjavascriptを利用する事で解決しました。

■smoothscroll.js(滑らかスクロールとは若干動作が異なりますが…)
http://blog.webcreativepark.net/2007/07/12-143406.html

■lightbox0.5
http://leandrovieira.com/projects/jquery/lightbox/

上記組み合わせだと問題なさそうです。
ぜひ試してみてください。

投稿日時 - 2011-09-17 00:57:02

お礼

返信が遅くなり大変申し訳ございません。
教えて頂いた組み合わせで解決致しました!
本当にありがとうございました!

投稿日時 - 2011-09-28 15:52:22

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

横からですが・・・

補足でご提示の記述内容だと、jqueryを2度読込んでいませんか?
読込む度に初期化されるので、それまでの設定が無効になっていると思われます。
それなので後から記載したものしか動かないと言う事象になっているのではないでしょうか?

jqueryを最初に1度だけ読込むようにしてみては?

投稿日時 - 2011-09-09 11:17:33

お礼

遅くなりました。
何とか出来ました!
有難うございました!

投稿日時 - 2011-09-28 15:53:12

ANo.1

jQueryとPrototype.jp両方使ってるからだよ。
jQueryベースのlightboxライクなスクリプト使えばいいんでないかい。

http://leandrovieira.com/projects/jquery/lightbox/

投稿日時 - 2011-09-07 19:34:04

補足

回答有難うございます。

教えていただいたサイトのスクリプトに書き換えたんですがやはり変わらず。。

<script type="text/javascript" src="js/litebox/jquery.js"></script>
<script type="text/javascript" src="js/litebox/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.page-scroller.js" charset="utf-8"></script>

上記の場合はliteboxが反映されずスクロールのみ可能、
liteboxの入力位置を下にするとliteboxは反映されますがスクロールが出来なくなります。。

何か良い方法があれば教えて頂きたいです。
宜しくお願い致します。

投稿日時 - 2011-09-08 11:29:59

お礼

遅くなり大変申し訳ないです。
何とか出来ました。
有難うございました!

投稿日時 - 2011-09-28 15:53:58

あなたにオススメの質問