2

ギャラリーのあるページへのリンクは次のとおりです。

http://www.gerardtonti.com/Scrollable%20Gallery%202/index.html

私はすべてを試しましたが、私はまだ同じ問題を抱えています。jQuery Smooth Div Scroll ツールをオンラインで見つけました。私は寄付を計画していますが、あなたのサイトにあるように、カラーボックス オプションで機能させるのに問題があります: http://www.smoothdivscroll.com/colorbox.html

私はグラフィック アーティスト兼ウェブ デザイナーで、自分の作品を展示するギャラリー オプションを探しています。大きな画像にリンクする a href-tag を追加すると、スクロール可能なギャラリーが壊れてしまうようです。HTML の head セクションに colorbox.css ファイルが次のようにリンクされています。

<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>

ありがとう、

ゲル

4

1 に答える 1

0

あなたの例が現在機能していることがわかります。divの幅を設定するだけで、htmlマークアップですべて問題ありません。

<div class="scrollableArea" style="width: 4000px;">

追加した：

scrollableAreaminjqueryで計算すると、バージョンをデバッグするのが難しいですが、私が理解してmakeMeScrollableいるように、divは固定幅の別のdivでラップする必要があります。

追加 2:

今では正常に動作します。デモ: http://jsfiddle.net/fDGJH/

次のスタイルを設定します。

#makeMeScrollable
{
    width:100%;
    height: 330px;
    position: relative;
}

#makeMeScrollable div.scrollableArea img
{
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}
于 2012-10-12T15:55:17.733 に答える