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

解決済みの質問

二つのJava Scriptを使うと動かない

現在ウェブサイトを制作中ですがJavascriptについては配布されている物を設置すること位しかできません。
ウェブサイトの特徴として、横スクロールサイトであり、どうしてもギャラリーを設置したいのです。

横スクロールの為に
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo'); //easeInOutExpoはeasingプラグインから選べます
event.preventDefault();
});
});
</script>

とし、
マウスの上下スクロールで左右の動きをさせるために
<script type="text/javascript" src="vscroll.js"></script>

を置いてました。
この時点で動作は正常だったのですが、

ギャラリーが必要なため、lightbox
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

を置くと横スクロールとlightboxの動きができなくなり、レイアウトも崩れました。
どなたか詳しい方がいらっしゃいましたら、ご教授いただけませんでしょうか。

またlightboxにはこだわらないので、横スクロールサイトでギャラリーを設置できる方法がありましたら、教えてください。
ちなみにCSSでモーダルウィンドウを設置してみたのですが、横スクロールということもあり、Firefoxで正常に見る事ができませんでした。(サムネイル画像をクリックすると一番左に戻る)

よろしくお願いします

投稿日時 - 2011-08-15 09:54:22

QNo.6943751

すぐに回答ほしいです

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

jQueryとprototype.jsを同時に使うと競合します。

競合を解決する方法はあるのですが、多少知識が無いとめんどくさいので、
どちらか一つに統一することをお勧めします。

lightboxのjQuery代替としては、thickboxが有名です。
参考
http://blog.webcreativepark.net/2008/03/24-223837.html

投稿日時 - 2011-08-15 11:24:55

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

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

回答(2)

ANo.2

javascriptには、いくつかのライブラリ(javascrit集のようなもの)というものがあります。
代表的なものが、jQueryやprototypeというライブラリで、今回使用されているのもこの2つです。
これらは基本的に併用することができません。
もちろん、併用させるテクニックは存在するのですが、javascriptをご存じないということなので、ライブラリの構成をjQueryかprotoypeに統一する方が簡単です。

たとえば、現在は以下のような構成なので、
jQueryのスクロール機能 + prototype.jsのギャラリー機能

このように統一してみてください。
jQueryのスクロール機能 + jQueryのギャラリー機能

具体的にはNo.1さんの回答が参考になります。

投稿日時 - 2011-08-19 06:43:09

あなたにオススメの質問