二つの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で正常に見る事ができませんでした。（サムネイル画像をクリックすると一番左に戻る）
よろしくお願いします
お礼
初めまして。ありがとうございました。とても参考になりました。 と言うより、エレベーターメニューっていうんですね。初めて知りました。 どうりで、いくら思いついた名前で検索しても検索に引っかかって来ないハズです。ププッ (￣m￣*） 参考に、頑張ってやってみたいと思います。 この度はありがとうございました。┏○))