Q:

Jquery select next and prev img

I worked on a little jquery function but i'm a little stuck. What I'm trying to do is when I click on next and prev link to show me the next and previous img based on the img with the class="clicked". I know I can use the find() function but I dont really know how to implement it.
HTML
            <div class="thumbs_img">
                <a href="#p" class="prev">Prev</a>
                <img src="images/single_slider1.png" class="gallerythumbnail">
                <img src="images/single_slider2.png" class="gallerythumbnail">
                <img src="images/single_slider3.png" class="gallerythumbnail">
                <img src="images/single_slider4.png" class="gallerythumbnail clicked">
                <img src="images/single_slider5.png" class="gallerythumbnail"> 
                <img src="images/single_slider6.png" class="gallerythumbnail"> 
                <img src="images/single_slider7.png" class="gallerythumbnail">
                <a href="#n" class="next">Next</a>
            </div>

Js
$(document).ready(function() {        
    $('.gallerythumbnail').click(function(){
        $('#homeprod').removeClass('clicked');
        $('.gallerythumbnail').removeClass('clicked');
        $(this).toggleClass('clicked');
    });

    $('.showimagediv').show();
    $('.gallerythumbnail').on('click', function() {
        var img = $('<img />', {src    : this.src,
                                'class': 'fullImage'
                  });

        $('.showimagediv').html(img).show();
    });
});

Css
.showimagediv {
    display: none;
    width: 100%;
    height: 474px;
    background-color: #000;
}
.gallerythumbnail{
    margin-left: 5px;
    margin-right: 5px;
    width:80px; 
    height: 80px;
    cursor:pointer;
}
.slider_prod{
    border: 2px solid #000;   
}
.thumbs_img{
    margin-top: 10px;
}
.clicked {outline: 2px solid #fdb900;}
.fullImage{
    width: 750px;
    height: 474px;
}
.prev{
    background-image: url('images/arrow_left.png');
    background-position: center center;
    background-repeat: no-repeat;
    padding-left: 20px;
    padding-right: 25px;
    padding-top: 30px;
    padding-bottom: 35px;
    margin-right: 3px;
}
.next{
    background-image: url('images/arrow_right.png');
    background-position: center center;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-right: 20px;
    padding-top: 30px;
    padding-bottom: 35px;
    margin-left: 3px;
}

http://jsfiddle.net/7mUmK/

A:

You can trigger the next/prev image element click of .clicked element on next/prev click button respectively.try this:
 $('.next').click(function(){
  if($('.clicked').next().is(':last'))
    $('.clicked').next().click();
 });
 $('.prev').click(function(){
  if($('.clicked').prev().is(':first'))
    $('.clicked').prev().click();
 });

Working Demo

A:

Solution that doesn't hang your browser when you're on the first image and click "Prev" or on the last image and click "Next"
$('.next').click(function(){
    if(!$(".clicked").is(".gallerythumbnail:last"))
    {
        $('.clicked').next().click();
    }
});
    $('.prev').click(function(){
    if(!$(".clicked").is(".gallerythumbnail:first"))
    {
        $('.clicked').prev().click();
    }
});

DEMO
And if by chance you do want it to loop around in end cases
$('.next').click(function(){
    if(!$(".clicked").is(".gallerythumbnail:last"))
    {
        $('.clicked').next().click();
    }
    else
    {
        $(".gallerythumbnail:first").click();
    }
});
    $('.prev').click(function(){
    if(!$(".clicked").is(".gallerythumbnail:first"))
    {
        $('.clicked').prev().click();
    }
    else
    {
        $(".gallerythumbnail:last").click();
    }
});

