CODEWITHSUNDEEP
jquery
Netra
Netra

Reputation: 338

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/

Upvotes: 2

Views: 422

Answers (3)

keypaul
keypaul

Reputation: 497

Here a fiddle http://jsfiddle.net/keypaul/7mUmK/28/

$(".thumbs_img  a").click(function(e){
    var c = $(this).attr('class');
    skipImg(c);
    e.preventDefault();
});


function skipImg(c){
    var sel = $('img.clicked'),
        l = $('.thumbs_img img').length,
        n;
    if( c == "next"){
        n = $('.clicked').next();
        if(n.index() > l){
           n = $('.thumbs_img img').eq(0);
        }
    }else{
        n = $('.clicked').prev();
        if(n.index() <= 0){
            n = $('.thumbs_img img').eq(l - 1);
        }
    }
    n.addClass('clicked');
    sel.removeClass('clicked');
   //here call a function to change big img
}

Upvotes: 0

Patrick Q
Patrick Q

Reputation: 6393

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();
    }
});

Upvotes: 3

Milind Anantwar
Milind Anantwar

Reputation: 82231

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

Upvotes: 3

Related Questions