Question

以下是包含图库的页面的链接：

http://www.gerardtonti.com/Scrollable%20Gallery%202/index.html

我已经尝试了一切，但我仍然遇到同样的问题。我在网上找到了你的jQuery Smooth Div Scroll工具。我打算捐款，但是我在使用您在网站上的彩盒选项时遇到了问题：http://www.smoothdivscroll.com/colorbox.html

我是一名图形艺术家和网页设计师，正在寻找展示我作品的图库选项。似乎当我添加一个链接到大图像的href-tag时，它会破坏可滚动的图库。我有一个colorbox.css文件链接在我的html的head部分：

<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>

谢谢，

GER

Answer 1

正如我可以看到你的示例现在正在运行，一切都可以使用html-markup，只需设置div的宽度：

<div class="scrollableArea" style="width: 4000px;">

<强>加了：

使用jquery计算的

scrollableArea，很难调试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;
}

光滑的Div Scroll与colorbox无法正常工作

1 个答案: