Гладкая прокрутка Div с Colorbox - Галерея
У меня есть одна проблема с 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 ответ
У вас проблемы с вашим 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