Вот ссылка на страницу с галереей:
http://www.gerardtonti.com/Scrollable%20Gallery%202/index.html
Я пробовал все, но у меня все еще та же проблема. Я нашел в Интернете ваш инструмент jQuery Smooth Div Scroll. Я планирую сделать пожертвование, но у меня не получается заставить его работать с опцией colorbox, как на вашем сайте: http://www.smoothdivscroll.com/colorbox.html
Я художник-график и веб-дизайнер, ищу галерею для демонстрации своих работ. Кажется, что когда я добавляю тег href, который ссылается на большое изображение, он ломает прокручиваемую галерею. У меня есть файл colorbox.css, связанный в разделе заголовка моего html как:
<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>
Спасибо,
Гер
