二つの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で正常に見る事ができませんでした。（サムネイル画像をクリックすると一番左に戻る）
よろしくお願いします
