Tumblr Theme Photo Overlay On To The Next Photo URL?

The Issue I'm having is this, I want to turn all the <img> in the theme I'm working on into the gallery, with out a plugin, that means getting the overlay to work (that I think I've done) and then calling the next/prev hires <img> <a href> from the next/prev div labeled(classed) as .img-main the closest I've come is having the next button go to the next hires <img> and the prev button going back to the first … I'm at a loss any help would be great thanks.

so i guess my question is how do I make the button on click replace the src of the current img (the overlaid one) with the href of the next .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>

this is a tumblr theme, so it might be a little confusing to anyone who doesn't know the syntax, but I do have a live example so you can see.

DEMO : http://unnaturalchoices.tumblr.com

Some of the images in the demo are NSFW

EDIT: thanks to wmonk for the help, although i think there are some bugs still, the img ins't loading right away it only loads when i hit the prev button and going forward trough the posts doesn't work (SEE DEMO) > tested on safari 6.0.5 and chrome 27.0...

EDIT just used a plug in...

Solution

Try replacing your click event code with this:

$('.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;

});