Check out the gallery page by following this link:
http://www.gerardtonti.com/Scrollable%20Gallery%2/index.html
After trying numerous methods, I am still facing the same issue. Upon discovering your jQuery Smooth Div Scroll tool online, I intend to contribute but encounter difficulties implementing it with the colorbox feature as seen on your website:
As a graphic artist and web designer seeking a suitable gallery option to showcase my work, it appears that linking the large image through the anchor tag disrupts the scrollable gallery. In the head section of my HTML, I have linked a colorbox.css file like so:
<link rel="Stylesheet" type="text/css" href="css/colorbox.css" />Additionally, in the body of the document, I have included:
<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>
The images in the gallery are currently duplicating, and I plan to rectify this once I identify the issue at hand. Any assistance provided would be greatly appreciated.
Feel free to view the entire HTML source below:
<!DOCTYPE html>
<html>
<head>
<title>Demo - jQuery Smooth Div Scroll - Thomas Kahn</title>
<!-- 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 specific to scrolling content -->
<style type="text/css">
#makeMeScrollable
{
width:100%;
height: 330px;
position: relative;
}
/* Modify the last selector depending on the element type in the scroller */
#makeMeScrollable div.scrollableArea img
{
position: relative;
float: left;
margin: 0;
padding: 0;
-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>
<!-- Late Javascript loading just before the body tag -->
...
...
</body>
</html>
Thank you,
Ger