Question

I am trying to create an image gallery, I am using numbers instead of left/right arrows. At the moment, I am trying to get it working with only 2 image (i.g 2 numbers)

this is the html . the id page, is the highlighted number

 <div class="grid_1 pagelink" id="page"><p><a href="">1</a></p></div> 
<div class="grid_1 pagelink"><p><a href="">2</a></p></div> 

the first time the page loads, the code below works. so when I click on link 2 the the code bellow runs fine. But then I want the same code to be triggered when I click back on the first link; but when I do that, the page refreshes by ignoring the code bellow:

 $('.pagelink').live('click', function(e){
    e.preventDefault();
        var frame = $(this).text() - 1;
        var frames =     240 * frame;
    //  $('#gal').animate({marginLeft:'500px'},'slow'); 
        $('#gal').animate({marginLeft:  "+="+frames+'px'},'slow');
    $(this).attr('id', 'page').removeClass('pagelink');
    $('#page').addClass('pagelink').removeAttr('id','page');
       // $('#book').animate({    left: '50'  });
    })

I thought that the .live() would do that for me but it is not working.

I hope you could help

thank you

Answer 1

Previous, this is because you are removing the class of link “pagelink” which were used to map the clicked event.

Also, use another class instead of id(#page) to identify the #page link, id might be problem if its already assign to other link. like

$(this).removeClass('pagelink').addClass('page');
$('.page').addClass('pagelink').removeClass('page');