3
私はビデオギャラリーを一緒にハックしようとしています。私はjQueryを使用して、パネルを外にスライドさせるようにしています シンプルです。また、サムネイルをスクロールするためにjQueryも使用しています。彼らは両方とも美しく動作します。問題は、スクロールアウトパネル内でスクロールする必要があることですが、スクロールすることはできません。私はそれがドキュメントの準備ができていることと、ウィンドウが読み込まれていることの2つの機能と関係していると思います。私はjQueryを初めて使う理由はわかりません。いずれにせよこれを助けることができます。jQueryドキュメントはウィンドウのロードと競合していますか？
ここにスライドアウトパネル機能があります。
彼女はスクロール機能です。
<script>
jQuery.noConflict()
(function($){
window.onload=function(){
$("#tS2").thumbnailScroller({
scrollerType:"clickButtons",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
}
})(jQuery);
</script>
ここでは、誰とでも矛盾するものはありますか？
ここに全体のHTMLがあります。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical Sliding Info Panel With jQuery</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link href="jquery.thumbnailScroller.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="jquery-ui-1.8.13.custom.min.js"></script>
<script>
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
</head>
<body>
<div class="panel">
<div>
<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<a href="#"><img src="thumbs/img1.jpg" /></a>
<a href="#"><img src="thumbs/img2.jpg" /></a>
<a href="#"><img src="thumbs/img3.jpg" /></a>
<a href="#"><img src="thumbs/img4.jpg" /></a>
<a href="#"><img src="thumbs/img5.jpg" /></a>
<a href="#"><img src="thumbs/img6.jpg" /></a>
<a href="#"><img src="thumbs/img7.jpg" /></a>
<a href="#"><img src="thumbs/img8.jpg" /></a>
<a href="#"><img src="thumbs/img9.jpg" /></a>
<a href="#"><img src="thumbs/img10.jpg" /></a>
<a href="#"><img src="thumbs/img11.jpg" /></a>
<a href="#"><img src="thumbs/img12.jpg" /></a>
<a href="#"><img src="thumbs/img13.jpg" /></a>
<a href="#"><img src="thumbs/img14.jpg" /></a>
<a href="#"><img src="thumbs/img15.jpg" /></a>
<a href="#"><img src="thumbs/img16.jpg" /></a>
<a href="#"><img src="thumbs/img17.jpg" /></a>
<a href="#"><img src="thumbs/img18.jpg" /></a>
<a href="#"><img src="thumbs/img19.jpg" /></a>
<a href="#"><img src="thumbs/img20.jpg" /></a>
</div>
</div>
<a href="#" class="jTscrollerPrevButton"></a>
<a href="#" class="jTscrollerNextButton"></a>
</div>
<!-- thumbnail scroller markup end -->
<script>
/* jQuery.noConflict() for using the plugin along with other libraries.
You can remove it if you won't use other libraries (e.g. prototype, scriptaculous etc.) or
if you include jQuery before other libraries in yourdocument's head tag.
[more info: http://docs.jquery.com/Using_jQuery_with_Other_Libraries] */
jQuery.noConflict();
/* calling thumbnailScroller function with options as parameters */
(function($){
window.onload=function(){
$("#tS2").thumbnailScroller({
scrollerType:"clickButtons",
scrollerOrientation:"horizontal",
scrollSpeed:2,
scrollEasing:"easeOutCirc",
scrollEasingAmount:600,
acceleration:4,
scrollSpeed:800,
noScrollCenterSpace:10,
autoScrolling:0,
autoScrollingSpeed:2000,
autoScrollingEasing:"easeInOutQuad",
autoScrollingDelay:500
});
}
})(jQuery);
</script>
<!-- thumbnailScroller script -->
<script src="jquery.thumbnailScroller.js"></script>
</div>
</div>
<a class="trigger" href="#">infos</a>
</body>
</html>
含んあなたのjQueryを使って何が起こっていますか？ –