0

我遇到的问题是，我想<img>在没有插件的情况下将我正在处理的主题中的所有内容都转入画廊，这意味着让叠加层正常工作（我认为我已经完成了）然后<img> <a href>从标记为（分类）的下一个/上一个 div调用下一个/上一个雇员，因为.img-main我最接近的是让下一个按钮转到下一个雇员<img>，而上一个按钮回到第一个......我不知所措帮助将非常感谢。

所以我想我的问题是如何使单击时的按钮src将当前img（覆盖的）的按钮替换href为下一个.post>的按钮.img-main？

<!DOCTYPE html>

<html>

<head>

    <title>{title}</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    <style type="text/css">

    body{}

    #overlay{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.3);
        box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        display: none;
    }

        .photo-wrapper{
            width: 100%;
            height: 80%;
            position: relative;
            top: 10%;
            left: 0;
            text-align: center;
        }

            .prev-img{
                width: 5%;
                height: 50px;
                position: absolute;
                top: 50%;
                left: 5%;
                float: left;
                background: #000;
                cursor: pointer;
                margin-top: -25px;  
            }

            .overlay-img{
                height: 100%;
                max-width: 90%;
                border-radius: 3px;
                box-shadow: 0 0 50px rgba(0,0,0,0.5);
            }

            .next-img{
                width: 5%;
                height: 50px;
                position: absolute;
                top: 50%;
                right: 5%;
                float: right;
                background: #000;
                cursor: pointer;
                margin-top: -25px;  
            }

    #container{
        width: 1040px;
        margin: 50px auto;
    }

        .post{
            width: 250px;
            margin: 5px;
            margin-bottom: 3px;
            float: left;
        }

    </style>

</head>

<body>

<div id="overlay">

    <div class="photo-wrapper">

        <div class="prev-img"></div>

        <img class="overlay-img" src=""/>

        <div class="next-img"></div>    

    </div>

</div>

<div id="container">

{block:Posts}

    {block:Photo}

    <div class="post">

        <a class="img-main" href="{PhotoUrl-HighRes}"><img src="{PhotoUrl-250}" alt="{PhotoAlt}"/></a>

    </div>

    {/block:Photo}

{/block:Posts}

</div>

<script type="text/javascript">

$(function(){

    $('.post').click(function overlayShow(){

        var photoId = ($(this).find('.img-main').attr('href'));

        var nextImg = ($(this).closest('.post').nextAll('.post').find('.img-main').attr('href'));

        var prevImg = ($(this).closest('.post').prevAll('.post').find('.img-main').attr('href'));

        $('#overlay').show();

        $('body').css('overflow','hidden');

        $('.overlay-img').attr('src', photoId);

        $('.next-img').click(function(){

            $('.overlay-img').attr('src', nextImg);

        });

        $('.prev-img').click(function(){

            $('.overlay-img').attr('src', prevImg);

        });

        return false;

    });

    $('#overlay').click(function(){

        //$('#overlay').hide();

        $('body').css('overflow','scroll');

    });

});

</script>

</body>

这是一个 tumblr 主题，所以对于不知道语法的人来说可能会有些困惑，但我确实有一个活生生的例子，所以你可以看到。

演示：http ://unnaturalchoices.tumblr.com

演示中的一些图像是 NSFW

编辑：感谢wmonk的帮助，虽然我认为仍然存在一些错误，但 img ins 没有立即加载，它仅在我点击 prev 按钮并且通过帖子前进时才加载不起作用（参见演示）>在 safari 6.0.5 和 chrome 27.0 上测试...

编辑只是使用了一个插件...

4

2 回答 2

0

尝试用这个替换你的点击事件代码：

$('.post').on('click', 'a', function overlayShow(e){
    e.preventDefault();

    var elem = $(this),
        parent = elem.parents('.post'),
        photoId = (elem.find('.img-main').attr('href'));

    parent.addClass('selectedImg');

    $('body')
        .css('overflow','hidden')
        .find('#overlay').show()
        .find('.overlay-img').attr('src', photoId);

    $('.next-img').on('click', function(e){
        e.preventDefault();

        nextImg = $('.selectedImg').removeClass('selectedImg').prev('.post').addClass('selectedImg').find('a').attr('href')
        $('.overlay-img').attr('src', nextImg);

    });

    $('.prev-img').on('click', function(e){
        e.preventDefault();

        prevImg = $('.selectedImg').removeClass('selectedImg').prev('.post').addClass('selectedImg').find('a').attr('href')
        $('.overlay-img').attr('src', prevImg);

    });

    return false;

});
于 2013-06-13T13:40:23.163 回答
0

您的代码现在已在实时站点上更改。要修复图像加载问题，请更改：

var elem = $(this),
    parent = elem.parents('.post'),
    photoId = (elem.find('.img-main').attr('href'));

至：

var elem = $(this),
    parent = elem.parents('.post'),
    photoId = (elem.find('a:first').attr('href'));
于 2013-06-17T13:18:14.927 回答