这是包含图库的页面的链接:
http://www.gerardtonti.com/Scrollable%20Gallery%202/index.html
我已经尝试了所有方法，但我仍然遇到同样的问题。我在网上找到了您的 jQuery Smooth Div Scroll 工具。我打算捐赠，但我无法像您在网站上那样使用 colorbox 选项:http://www.smoothdivscroll.com/colorbox.html
我是一名平面艺术家和网页设计师，正在寻找画廊选项来展示我的作品。似乎当我添加链接到大图像的 href 标签时，它会破坏可滚动的画廊。我在我的 html 的头部部分链接了一个 colorbox.css 文件:
<code>link rel="Stylesheet" type="text/css" href="css/colorbox.css" /></code>
我在文档正文中也有这个:
<code><script type="text/javascript">
$(document).ready(function () {
// Init Smooth Div Scroll
$("#makeMeScrollable").smoothDivScroll({
mousewheelScrolling: "allDirections",
manualContinuousScrolling: true
});
// Init colorbox
$("#makeMeScrollable a").colorbox({ speed: "500" });
</code>
我在图库中重复使用相同的图片，一旦我弄清楚哪里出了问题，就会替换它们。任何帮助将不胜感激。
这是完整的 HTML 源代码:
<code>
<!DOCTYPE html>
<html>
<head>
<title>Demo - jQuery Smooth Div Scroll - Thomas Kahn</title>
<!-- the CSS for Smooth Div Scroll -->
<link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />
<link rel="Stylesheet" type="text/css" href="css/colorbox.css" />
<!-- Styles for my specific scrolling content -->
<style type="text/css">
#makeMeScrollable
{
width:100%;
height: 330px;
position: relative;
}
/* Replace the last selector for the type of element you have in
your scroller. If you have div's use #makeMeScrollable div.scrollableArea div,
if you have links use #makeMeScrollable div.scrollableArea a and so on. */
#makeMeScrollable div.scrollableArea img
{
position: relative;
float: left;
margin: 0;
padding: 0;
/* If you don't want the images in the scroller to be selectable, try the following
block of code. It's just a nice feature that prevent the images from
accidentally becoming selected/inverted when the user interacts with the scroller. */
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div id="makeMeScrollable">
<a href="images/charcoal_Big.jpg"><img src="images/charcoal.jpg" alt="charcoal" id="field" /></a>
<a href="images/charcoal_Big.jpg"><img src="images/charcoal.jpg" alt="charcoal" id="field" /></a>
<a href="images/charcoal_Big.jpg"><img src="images/charcoal.jpg" alt="charcoal" id="field" /></a>
<a href="images/charcoal_Big.jpg"><img src="images/charcoal.jpg" alt="charcoal" id="field" /></a>
<a href="images/charcoal_Big.jpg"><img src="images/charcoal.jpg" alt="charcoal" id="field" /></a>
<a href="images/charcoal_Big.jpg"><img src="images/charcoal.jpg" alt="charcoal" id="field" /></a>
<a href="images/charcoal_Big.jpg"><img src="images/charcoal.jpg" alt="charcoal" id="field" /></a>
<a href="images/charcoal_Big.jpg"><img src="images/charcoal.jpg" alt="charcoal" id="field" /></a>
</div>
<!-- LOAD JAVASCRIPT LATE - JUST BEFORE THE BODY TAG
That way the browser will have loaded the images
and will know the width of the images. No need to
specify the width in the CSS or inline. -->
<!-- jQuery library - Please load it from Google API's -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<!-- jQuery UI Widget and Effects Core (custom download)
You can make your own at: http://jqueryui.com/download -->
<script src="js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
<!-- Latest version of jQuery Mouse Wheel by Brandon Aaron
You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>
<!-- jQuery Kinetic - for touch -->
<script src="js/jquery.kinetic.js" type="text/javascript"></script>
<!-- Smooth Div Scroll 1.3 minified-->
<script src="js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
<!-- If you want to look at the uncompressed version you find it at
js/jquery.smoothDivScroll-1.3.js -->
<!-- Colorbox -->
<script src="js/jquery.colorbox-min.js" type="text/javascript"></script>
<!-- If you want to look at the uncompressed version you find it at
js/jquery.smoothDivScroll-1.3.js -->
<!-- Plugin initialization -->
<script type="text/javascript">
$(document).ready(function () {
// Init Smooth Div Scroll
$("#makeMeScrollable").smoothDivScroll({
mousewheelScrolling: "allDirections",
manualContinuousScrolling: true
});
// Init colorbox
$("#makeMeScrollable a").colorbox({ speed: "500" });
});
</script>
</body>
</html>
谢谢，
蒙古包
最佳答案
正如我所见，您的示例现在正在运行，html 标记一切正常，只需为 div 设置宽度:
<div class="scrollableArea" style="width: 4000px;">
添加:
scrollableArea 用 jquery 计算，很难调试 min 版本，但据我了解 makeMeScrollable div 必须用另一个 div 包裹，固定宽度。
新增 2 个:
现在一切正常。演示:http://jsfiddle.net/fDGJH/
设置此样式:
#makeMeScrollable
{
width:100%;
height: 330px;
position: relative;
}
#makeMeScrollable div.scrollableArea img
{
position: relative;
float: left;
margin: 0;
padding: 0;
}
关于jquery - 带有颜色框的平滑 Div 滚动不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12862465/