Simulate click on next image

Question

I am making some simple slider with jQuery with left, right buttons (on the button click i want to simulate click on the next image with class gthumb and set class active to it)

HTML:

<div class="gleft"></div>
<div class="gright"></div>
    <div class="gal-thumbs">
    <a href="#" class="gthumb active"><img src="/sites/zum.kz/themes/lounge/gal/pub/pub1.jpg"></a>
    <a href="#" class="gthumb"><img src="/sites/555.kz/themes/lounge/gal/pub/pub2.jpg"></a>
    <a href="#" class="gthumb"><img src="/sites/555.kz/themes/lounge/gal/pub/pub3.jpg"></a>
    <a href="#" class="gthumb"><img src="/sites/555.kz/themes/lounge/gal/pub/pub4.jpg"></a>
    <a href="#" class="gthumb"><img src="/sites/555.kz/themes/lounge/gal/pub/pub5.jpg"></a>
    </div>

JS:

    // change background on arrow click
    var current_img = $('.gthumb.active');

    $('.gleft').live('click', function() {
        current_img.next().trigger('click').addClass('active');
    });

When you click on .gleft it should simulate click on next image from an image with .active class. However, when i click on .gleft nothing happens. Please help.

Answer 1

Its probably not the best way to create a slider but in terms of fixing what you have already this should be sufficient to get you started.

$('body').on('click','.gleft', function() {
    if($('.gthumb.active').next().length > 0){
        $('.gthumb.active').removeClass('active').next().trigger('click').addClass('active');
    }
});
$('body').on('click','.gright', function() {
    if($('.gthumb.active').prev().length > 0){
        $('.gthumb.active').removeClass('active').prev().trigger('click').addClass('active');
    }
});

Demo: http://jsfiddle.net/T9uY8/

Answer 2

This should cover all your bases...

// Click to go right
$('body').on('click', '.gright', function() {
    if($('a.active').next().length != 0){
    $('a.active').removeClass('active').next().addClass('active').trigger('click');
    }
});

// Click to go left
$('body').on('click', '.gleft', function() {
    if($('a.active').prev().length != 0){
    $('a.active').removeClass('active').prev().addClass('active').trigger('click');
    }
});

// Just to show the click is being triggered
$('body').on('click', '.gthumb', function(){
    alert('I have been clicked!!');
});

Working Example

Answer 3

First of all, live has been deprecated, you should just use on, see here http://api.jquery.com/live/

To trigger a click, you only need to call click()

var current_img = $('.gthumb.active');

$('.gleft').on('click', function() {
    current_img.next().click().addClass('active');
});