0

SmoothDivControlに問題が1つあります。マイナーなことだと思います。

メインページに4つのギャラリーがあり、すべてSmoothDivScrollを使用しています。一部の画像はプレースホルダーですが、ギャラリーが機能していることを確認したいだけです。4番目のスクロール可能なギャラリーが最初の3つとは異なり、大きくなっている理由がわかりません。

ここに再びリンクがあります：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>
4

1 に答える 1

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
于 2012-10-22T14:27:55.057 に答える