使用Colorbox平滑Div滚动 - 图库

时间：2012-10-22 14:15:37

标签： html scroll colorbox image-gallery smooth

我遇到了Smooth Div Control的一个问题。我认为这是次要的。

我在主页面上有四个画廊，现在都使用Smooth Div Scroll。有些图像是占位符，但我只是想确保图库正常运行。我无法理解为什么第四个可滚动的画廊与前三个不同且更大？

这是链接： http://www.gerardtonti.com/Scrollable%20Gallery%202/index.html 

<!DOCTYPE html>
<html>
<head>
<title>Untitled</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: 150px;
    position: relative;
}
#makeMeScrollable div.scrollableArea a
{
    border: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}

#makeMeScrollable2
{
    width:100%;
    height: 150px;
    position: relative;
}
#makeMeScrollable2 div.scrollableArea a
{
    border: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}

#makeMeScrollable3
{
    width:100%;
    height: 150px;
    position: relative;
}
#makeMeScrollable3 div.scrollableArea a
{
    border: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}​

#makeMeScrollable4
{
    width:100%;
    height: 150px;
    position: relative;
}
#makeMeScrollable4 div.scrollableArea a
{
    border: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}​

</style>

</head>

<body>
<style css="text/css">
body {background-color: black; background-image:url("images/background.jpg");    background-repeat: repeat}
</style>


<img src="images/FineArt.png">

<div id="makeMeScrollable">
    <a href="images/paintings/Nude_Big.jpg"><img src="images/paintings/Nude.jpg" alt="Nude" id="field" width="330" height="330" /><img src="images/spacer.png" width="15"></a>
    <a href="images/paintings/Walter_Big.jpg"><img src="images/paintings/Walter.jpg" alt="Walter" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/paintings/OneOfUs_Big.jpg"><img src="images/paintings/OneOfUs.jpg" alt="One Of Us" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
</div>
<img src="images/PublicArt.png">

<div id="makeMeScrollable2">
    <a href="images/publicart/Elevate1_Big.jpg"><img src="images/publicart/Elevate1.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
</div>
<img src="images/CoffeeHouse.png">

<div id="makeMeScrollable3">
    <a href="images/coffeepaintings/TazzaDoro_Big.jpg"><img src="images/coffeepaintings/TazzaDoro.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/charcoal_Big.jpg"><img src="images/portraits/charcoal.jpg" alt="charcoal" id="field" /><img src="images/spacer.png" width="15"></a>
</div>

<img src="images/Portraits.png">

<div id="makeMeScrollable4">
    <a href="images/portraits/Erin_Big.jpg"><img src="images/portraits/Erin.jpg" alt="Erin" id="Erin" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/ErinColor_Big.jpg"><img src="images/portraits/ErinColor.jpg" alt="Erin Color" id="Erin Color" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/Robert_Big.jpg"><img src="images/portraits/Robert.jpg" alt="Robert" id="Robert" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/Scott_Big.jpg"><img src="images/portraits/Scott.jpg" alt="Scott" id="Scott" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/Sean_Big.jpg"><img src="images/portraits/Sean.jpg" alt="Sean" id="Sean" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/Nate_Big.jpg"><img src="images/portraits/Nate.jpg" alt="Nate" id="Nate" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/Bill_Big.jpg"><img src="images/portraits/Bill.jpg" alt="Bill" id="Bill" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/Erin3_Big.jpg"><img src="images/portraits/Erin3.jpg" alt="Erin3" id="Erin3" /><img src="images/spacer.png" width="15"></a>
    <a href="images/portraits/Erin4_Big.jpg"><img src="images/portraits/Erin4.jpg" alt="Erin4" id="Erin4" /><img src="images/spacer.png" width="15"></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,
autoScrollingMode: "onStart",
autoScrollingDirection:"endlessLoopRight"
});
$("#makeMeScrollable2").smoothDivScroll({
    mousewheelScrolling: "allDirections",
    manualContinuousScrolling: true,
    autoScrollingMode: "onStart",
    autoScrollingDirection:"endlessLoopLeft"
});
$("#makeMeScrollable3").smoothDivScroll({
    mousewheelScrolling: "allDirections",
    manualContinuousScrolling: true,
    autoScrollingMode: "onStart",
    autoScrollingDirection:"endlessLoopRight"
});
$("#makeMeScrollable4").smoothDivScroll({
    mousewheelScrolling: "allDirections",
    manualContinuousScrolling: true,
    autoScrollingMode: "onStart",
    autoScrollingDirection:"endlessLoopLeft"
});


// Init colorbox
$("#makeMeScrollable a").colorbox({ speed: "500" });
$("#makeMeScrollable2 a").colorbox({ speed: "500" });
$("#makeMeScrollable3 a").colorbox({ speed: "500" });
$("#makeMeScrollable4 a").colorbox({ speed: "500" });
});

</script>

</body>
</html>

1 个答案:

答案 0 :(得分：0)

您的css styles部分存在问题：

#makeMeScrollable3 div.scrollableArea a
{
    border: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}​ //here

#makeMeScrollable4 div.scrollableArea a
{
    border: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}​ //here
相关问题
最新问题