Question

我目前正在使用Shadowbox来限制我在网站上的Url数量。（在SB之前，你点击图片就会把你带到一个画廊。）我让SB在我的实际网站上工作，但它不能用于移动设备。我做了一些研究，发现我想用here的图像touchswipe代码。实现它之后，即使我的code中有20多个图像，也只显示3个图像。我甚至更改了原始代码“var maxImages = 3;”从3到50，没有运气。如果需要，我会很乐意提供更多细节。非常感谢任何和所有帮助。

Javascript代码：

    var IMG_WIDTH = 500;
    var currentImg = 0;
    var maxImages = 50;
    var speed = 500;

    var imgs;

    var swipeOptions = {
        triggerOnTouchEnd: true,
        swipeStatus: swipeStatus,
        allowPageScroll: "vertical",
        threshold: 75
    };

    $(function () {
        imgs = $("#imgs");
        imgs.swipe(swipeOptions);
    });


    /**
     * Catch each phase of the swipe.
     * move : we drag the div
     * cancel : we animate back to where we were
     * end : we animate to the next image
     */
    function swipeStatus(event, phase, direction, distance) {
        //If we are moving before swipe, and we are going L or R in X mode, or U or D in Y mode then drag.
        if (phase == "move" && (direction == "left" || direction == "right")) {
            var duration = 0;

            if (direction == "left") {
                scrollImages((IMG_WIDTH * currentImg) + distance, duration);
            } else if (direction == "right") {
                scrollImages((IMG_WIDTH * currentImg) - distance, duration);
            }

        } else if (phase == "cancel") {
            scrollImages(IMG_WIDTH * currentImg, speed);
        } else if (phase == "end") {
            if (direction == "right") {
                previousImage();
            } else if (direction == "left") {
                nextImage();
            }
        }
    }

    function previousImage() {
        currentImg = Math.max(currentImg - 1, 0);
        scrollImages(IMG_WIDTH * currentImg, speed);
    }

    function nextImage() {
        currentImg = Math.min(currentImg + 1, maxImages - 1);
        scrollImages(IMG_WIDTH * currentImg, speed);
    }

    /**
     * Manually update the position of the imgs on drag
     */
    function scrollImages(distance, duration) {
        imgs.css("transition-duration", (duration / 1000).toFixed(1) + "s");

        //inverse the number we set in the css
        var value = (distance < 0 ? "" : "-") + Math.abs(distance).toString();
        imgs.css("transform", "translate(" + value + "px,0)");
    }
</script>

HTML代码：

<div id="container">
<div id="content">
<div id="imgs">
<img src='http://www.everyhome.com/dir/images/1.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/2.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/3.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/4.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/5.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/6.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/7.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/8.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/9.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/10.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/11.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/12.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/13.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/14.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/15.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/16.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/17.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/18.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/19.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/20.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/21.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/22.jpg' alt='' />
<img src='http://www.everyhome.com/dir/images/23.jpg' alt='' />
</div>
<td align='center'><a style='font-size:10pt; color:#0093D0; font-weight:bold;     text-decoration:none;' href=''>25 Photos</a></td>
</div>
</div>

CSS的一部分：

    #container {
       max-width:768px;
       margin-bottom:20px;
    }   
    #content {
        height: 340px;
        width: 500px;
        overflow: hidden;
        position: relative;
        border: 1px solid #0093D0;
    }

    #imgs {
        float: left;
        display: inline;
        padding: 0;
        margin: 0;
        width: 1510px;

        transition-property: transform;
        transition-duration: 0.5s;
        transition-timing-function: ease-out;
        transform: translate(0, 0);
    }

    #imgs img {
        padding: 0;
        margin: 0;
        width: 500px;
        height: 340px;
        transform: translate(0, 0);
    }
</style>

Shadow Box移动刷卡（仅显示3个imgs）

0 个答案: